1.安装。

全局安装vue-cli，初始化一个webpack项目，安装依赖并启动

npm install -g vue-cli
vue init webpack demo
cd demo
npm init
npm run dev

 

 

2.dev 、start、build所代表的的具体命令在 package.json中。

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"

 

 

3.build是打包的配置文件夹（其中的build.js是来打生产包的），config是webpack的配置文件夹。spa需要关注webpack.base.conf.js（是一个打包核心配置）和config/index.js（环境的配置）。assetsPublicPath作为静态资源的前缀，可以写上CDN的地址。

 

 

4.在Vue2.x模拟mock数据时，没有dev-server.js，要在webpack.dev.conf.js文件里通过

...
const portfinder = require('portfinder')


//加载express
var express = require('express');
var app = express();
//加载本地json
var goodsData = require('../mock/goods.json');
var goods = goodsData.result;

const HOST = process.env.HOST
...
watchOptions: {
      poll: config.dev.poll,
    }

//设置路由start
    ,
    before(app){
      app.get('/goods/',(req,res)=>{
        res.json({
          code:0,
          data:goods
        })
      })
    }
//设置路由end
  },
  plugins: 
...

来引用。

 

 

5.v-for循环的img中的src最好用v-bind来绑定，否则因为dom渲染速度快导致来不及加载图片。图片懒加载用vue-lazyload。