04-项目实战-准备工作

4-1 需求分析

4-2 项目资源准备

DPR（Device Pixel Ratio）：设备像素比

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

公式表示就是：window.devicePixelRatio = 物理像素 / dips

设备像素比devicePixelRatio简单介绍

可以通过meta viewport的值判断代码运行在什么DPI的手机上

SVG：矢量图片，可以伸缩，转换为图标字体

4-3 图标字体制作

https://icomoon.io/

4-4 项目目录设计

src：项目源码文件
assets
common
fonts：图标字体文件
js
stylus：CSS预处理器，less,sass差不多
components：组件文件
Hello.vue
App.vue：页面的实例文件
main.js：入口文件

stylus文件需要去除CSS文件中的”{“、”}”、”;”

4-5 mock数据（模拟后台数据）

data.json

1. 使用data.json来mock后端数据

   // dev-server.js
   var appData = require('../data.json');
   var seller = appData.seller;
   var goods = appData.goods;
   var ratings = appData.ratings;
   
   let apiRoutes = express.Router();
   apiRoutes.get('/seller', function (req, res) {
     res.json({
       errno: 0,
       data: seller
     });
   });
   apiRoutes.get('/goods',function (req,res) {
     res.json({
       errno: 0,
       data: goods
     });
   });
   apiRoutes.get('/ratings',function (req,res) {
     res.json({
       errno: 0,
       data: ratings
     });
   });
   
   app.use('/api', apiRoutes);

2. 访问地址

   http://localhost:8080/api/seller

   http://localhost:8080/api/goods

   http://localhost:8080/api/ratings