准备工作
安装vue-cli
npm install vue-cli
初始化webpack模板
vue init webpack [项目名]
注：填写到ESLint选项时选yes，preset为standard，剩下的karma和nightwatch为no。
安装依赖
npm install
运行
npm run dev
需求分析
相关设计稿
点击公告和数字时，展示浮层，点击x，浮层关闭。
内容区：商品对应的区块高亮。当商品数超过可视区，两边的列表可以滚动。点击加号加入购物车，当购物车总价超过最小配送费时，付款按钮高亮。购物车中商品数量大于0，则展示商品列表。
商品详情页：自适应大图，点击购物车进入购买流程；底部为评论区。
评论页：自适应滚动。
商家详情页：图可以左右滚动，收藏按钮收藏商家。
项目资源
文件目录
项目目录
所有代码写在src下，svg转换的字体copy到fonts目录下，style.css拷贝到stylus目录下，把该文件的扩展名改为【.styl】，并把文件中所有分号和大括号删除，删除assets目录
mock数据
把下载的资源中【data.json】的放到项目根目录下，并在【dev-server.js】中添加代码，如下
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
//定义路由
var 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) // express使用api
测试
先npm run dev，测试是否通过；再在浏览器地址栏中输入【.../api/seller】查看是否存在代码【这里需要安装Chrome的jsonview扩展】，之后测试goods和ratings。
