04、Vue-项目准备《饿了吗》

*** 《饿了吗》外卖商家页面***

一、项目需求分析

商品页

SPA(单页面开发): 快、局部刷新、减少请求大小、体验有明显变化;
实现原理: 在页面中，如果只是锚点发生变化时，是不会有任何的请求操作的，只是在当前页面找对应的锚点位置；另外锚点值发生变化时是可以监听到的，所以可以利用JS当锚点值的改变时，向服务器发起数据请求，获取到数据之后，只需要局部刷新页面即可

二、项目资源

在webpack构建项目中，最好都是使用单张图，因为webpack会帮我们将图片进行打包，将图片图片base64之后打包到js文件中，即没有大图时根本都不会有图片请求操作(只有大于10KB的图片才会生成静态文件)。另外，移动端图片一般都分普通图、2倍图、3倍图，不同屏幕分辨率对应不同图片。

• 屏幕像素关于设备像素比

• 字体图标
  为什么使用字体图标，字体图标的制作，字体图标的使用，查看Bootstrap之字体图标。

三、项目目录

index.html即是一个空壳，里面装了一个App.vue大组件，页面显示都是一个个小的组件组合，添加到App.vue中。

• src项目源码文件
  • components目录组件资源，但一般一个组件又会对应一个文件夹，方便管理该组件对应的资源，组件维护是就近原则；
  • common目录存放公共的模块、公共的资源，在该目录下一般会创建js、fonts、stylus；

  将字体图标字体拷贝到fonts目录中，另外将字体样式style.css拷贝到stylus目录中，文件名改为icon.styl，就是使用stylus语法，另外还需要对文件进行简单的处理(删除{}，删除;)
  - assets目录可以不需要，直接删除;

四、项目数据

项目是前后端分离，项目中的数据获取数据一般通过ajax异步获取到数据。

seller: 商家信息
goods: 商品列表
ratings: 评论列表

• dev-server.js启动node服务，即可以在 dev-server.js中利用express模块来定义接口请求

var express = require('express');
var app = express();
// 路由器
var routes = express.Router();
// 网站首页接受 GET 请求
routes.get('/seller', (req, res) => {
      // 客户端的相应即返回一个json数据
    res.json({
        data: {name: '张三'},
        errno: 0        // 表示没有错误       
    });
});
routes.get('/goods', (req, res) => {
  ...
});
// 注意: 是express中的API，不是Vue中的
// app.use 加载用于处理http请求的middleware(中间件)，当一个请求来的时候先经过中间件处理
app.use('/api', routes);

json格式化工具:

• http://tool.oschina.net/codeformat/json
• http://json.cn/
• 谷歌浏览器jsonview插件

五、页面标签样式的重置

页面中很多样式都需要重置的，而这个代码不需要编译生成，所以就是添加在static目录中，可以自动手动写，也可以参考其他网站写法，或者直接使用cssreset。另外index.html就是一个外壳框架，所以就只需要在这里引入该样式即可。