vue2.0 饿了么项目总结

项目启动

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