项目启动
1.node.js配置安装
2.Vue-cli脚手架安装
3.了解webpack，之后会通过package.json安装资源。
4.制作iconmoon.com制作字体图标文件，导入resource文件，了解项目结构
5.mock数据
因为vue2取消了dev-client.js和dev-server.js，替换成webpack-dev-conf.js。因此在这里踩下了Vue2的第一个大坑。
正确的mock姿势：
//第一步，在const portfinder = //require(‘portfinder’)后添加 const express = require('express') const app = express()//请求server 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() before(app) { app.get('/api/seller', (req, res) => { res.json({ errno: 0, data: seller })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用 }), app.get('/api/goods', (req, res) => { res.json({ errno: 0, data: goods }) }), app.get('/api/ratings', (req, res) => { res.json({ errno: 0, data: ratings }) }) }完成这一步呈现的效果就是能通过localhost:8080/api/goods等url访问到相应页面。
到此为止， 只要在cmd里输入npm run dev不报错，并且能够在浏览器上访问到相应url的界面就算大功告成了。可以进入下一个步骤。
外部组件
主要用到的app.vue和main.js
app.vue作为页面上第一个被挂载上的程序，主要负责初始化一些数据和app头部导航的功能。template部分负责页面html部分，script负责页面js部分，style负责页面css，我们使用的是es6 和stylus，所以注意在头部引入相关信息。导入模块的方式也有点容易混淆，也是我入的第二个大坑
<script type="text/ecmascript-6"> import header from './components/header/header.vue'; //导入js时不需要@，并且可以在webpackage.base.conf.js的resolve.alias配置关键字导入目录，比如'components': path.resolve(__dirname, '../src/components') <style lang="stylus" rel="stylesheet/stylus"> @import './common/stylus/mixin.styl' //导入style时需要@main.js文件用来配置app.vue和index页面的挂载以及相关路由。vue-router的配置方式从1.0到2版本有比较大的更改，当初在这里也卡了一段时间，幸好网上这方面的信息挺多，还算比较好解决。
vue-resource:这个插件也比较简单，注意返回必须是json.body才是object对象。
created() { this.$http.get('/api/seller').then((response) => { let response = response.body; // 判断errno是否为0 if (response.data.errno === ERR_OK) { this.seller = response.data; } }); },header组件
...tobe continue
