使用vue-cli编写外卖app【起步】

准备工作

安装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。