1.需求分析
2.设备像素比DPR的概念
可以参看张鑫旭老师的博客：http://www.zhangxinxu.com/wordpress/?p=2568
http://www.fly63.com/article/detial/3208
手机上设置的像素是物理像素的两倍?
Svg是矢量图
3.IconMoon图标字体制作
通过svg文件在APP网站上最终生成的是一个fonts资源文件夹和一个css文件，css文件定义了图标的样式。只需在标签中引入相应样式即可使用图标。
网站地址:https://icomoon.io/
4.项目目录设计
Components目录，每一个组件例如header.vue放在header文件夹下面。（就近原则）
Common文件夹，新建公共模块和资源
Common下新建js，stylus和fonts文件夹.
Stylus是css预处理文件，语法就是css去掉花括号和分号。
5.后台mock造数据
Vue-cli集成express的流程:
- npm install express
- 将data.json文件拷入制定目录
- 在webpack.dev.conf.js文件中
//首先
const express = require('express')
const app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
//找到devServer,添加
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
// 这里是你的json内容
errno: 0,
data: seller
})
}),
app.get('/api/goods', (req, res) => {
res.json({
// 这里是你的json内容
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
// 这里是你的json内容
errno: 0,
data: ratings
})
})
}
这样就可以通过http://localhost:8080/api/seller访问后端数据了。
这之后导入static/reset.css，将浏览器常用标签的默认样式reset掉。
Npm install stylus 和 stylus-loader
6. 组件拆分
整个页面分为头部header，tab页和内容区
header在component/header/下写一个自定义组件header.vue，在App.vue中引入
7. 路由
编写goods，ratings和seller的.vue文件
在router/index.js中引入
使用<router-link to='指向要链接的组件'>做标签
<router-view></router-view>显示对应的内容页面
8. 像素border实现
手机上设置的像素是物理像素的两倍，根据dpr的概念需要做缩放。
tab的boder-bottom实现1px的思路
因为dpr的影响，需要对tab底部画出来的线进行缩放，实现真正1px的效果。
在tab中定义了一个伪类:after,:after绝对定位在tab的下方，内容为空，伪类的border-top: 1px solid $color。
同时在base.styl中定义全局样式.border-1px，根据不同的dpr对伪类进行缩放。
在App.vue中的tab标签中引入全局样式.border-1px.
注意:
a.新建mixin.styl实现一些样式函数，例如border-1px($color)，方便不同的vue文件调用。
b.新建base.styl实现一些全局样式例如.border-1px，方便vue文件直接使用。
c.新建index.styl引入包括字体，mixin.styl，base.styl在内的样式文件，并在main.js中引用index.styl,这样这几个样式文件均可以全局使用。
d.webpack.base.conf.js中的alias可以定义路径别名，例如
'@': resolve('src'),
'common':resolve('src/common')
草料网站根据应用网址生成二维码，微信扫码可以手机预览。（手机与电脑需在同一个局域网）