[第一课] 实战饿了么app—vue2.0

咱们今天就来做一个饿了么——商家模块，来体验一下vue2.0时如何实现的！

第一步：搭建vue-cli脚手架

          这个不多说了，还不会的朋友可以参考我之前写的这篇文章：

[ 搭建vue-cli ]

第二步：技术简述

        我们用vue-resource做后台数据交互，用vue-router做前端路由实现单页应用，第三方js裤better-scroll做列表联动滚动，商家收藏功能用我们用h5的localstorage本地存储，图标字体我们使用：icoMoon，对移动端1像素边框的解决，css sticky footer布局的介绍，flex弹性布局的应用等等，还有整体代码我们是用的es6的语法开发，前几课没有提到过的基础知识也会在这个案例中介绍，比如组件、指令、过滤器，es6如果写成es5怎么去写、开始咱们的实战之旅吧，加油每天进步一点点。

          到了这步我就假定你已经启动了vue-cli的项目，并且在浏览器打开了网页，如图：

第三步：编写之前需要做的准备

3.1 用icoMoon转换SVG的字体图标

一般我们会把页面图片单一色，变为SVG，因为变大也不会造成图片质量的下降，然后我们在把svg转成字体图标，这样用起来也方便，而且可以随意换颜色

网址：https://icomoon.io

操作步骤：（1）点击iconMoon App的按钮——>（2）点击import Icons导入所有的SVG图片——>（3）上传后，选中所有你上传的图标，点击Generate Font按钮 ——>（4）点击Preferences，修改Font Name为sell-icon——>（5）点击Download下载

把fonts文件夹里的文件和style.css考到项目中

3.2 新建文件夹

把stylus中，style.css修改名称为：icon.styl

修改styl文件里代码的语法：

1 ) 把页面的{ }，去掉

2）把分号都去掉

3.3 删除assets文件夹

3.4 制作mock假数据

   安装express

    第一步：把实现写好的data.json文件考进入项目（数据包括3个方面）

    seller：商家相关的数据，goods：商品相关的数据，ratings：评论相关的数据

   编写接口：

     第二步：找到build文件夹下的webpack.dev.conf.js加入如下代码

const appData = require('../data.json')

const seller = appData.seller

const goods = appData.goods

const ratings = appData.ratings

在devServer中加入

app.get('/api/seller', function(req, res) { res.json({ errno: 0, data: seller }) }); app.get('/api/goods', function(req, res) { res.json({ errno: 0, data: goods }) }); app.get('/api/ratings', function(req, res) { res.json({ errno: 0, data: ratings }) }); },

第三步：重启之后，在地址栏上输入接口地址，测试

如果配置有问题请查看这个文章：https://github.com/ustbhuangyi/vue-sell/blob/master/update.md

vue2.0的代码：https://github.com/ustbhuangyi/vue-sell

显示的代码是没有格式化的，如果想看着好看，可以在谷歌浏览器的插件中安装：jsonview

造假数据的另一种方法：http://www.easy-mock.com/login（待测试）

3.5 在static/css/reset.css引入重置样式

      1）可以在http://cssreset.com下载

       2）然后在index.html中引入

3.6 安装依赖包

1）vue-resource | dependencies

2）vue-router | dependencies

3）babel-runtime | dependencies

4）better-scroll | dependencies

5）stylus，stylus-loader  | devDependencies

3.7 修改config的index.js

       第58行，assetsPublicPath: './'