webpack 构建 vue 项目

一  是先安装node

http://nodejs.cn/download/ 一直点击下一步

然后再运行环境里输入node

如果不识别需要配置环境变量

 

在运行环境里　再试下　ｎｏｄｅ　就可以了

二　vue-cli 构建项目

 项目路径里输入 ：$ npm install -g vue-cli

　　时间比较长 如果网速慢可以使用淘宝镜像安装　

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm  install -g vue-cli

 三 添加项目

安装完成以后添加项目 

$  vue init webpack vuedemo

输入命令后一直按回车

然后进入创建的项目vuedemo  

$ cd vuedemo

$ cnpm install

时间比较长 

安装完成以后

$npm run dev  开始运行项目

此时出现 一个http://localhost:8080/#/ 页面代表构建完成

开发项目前还需要2件事

1）安装vue 开发调试工具 devtool

一.在github上下载压缩包，github下载地址：https://github.com/vuejs/vue-devtools

二.解压到本地的某盘

三.用你的npm中进入该文件夹下

$ cd vue-devtools

在npm中执行命令：

1、$ cnpm install  （要有一会）

2、$ cnpm run build.（cnpm是因为我用的镜像）

四.修改mainifest.json 中的persistant为true

打开你的谷歌浏览器，在更多工具中点击扩展程序，然后在出现的页面中勾选开发者模式，点击加载你的解压好的包

打开 shell 文件夹下的浏览器文件 chrome 将其拖拽到扩展程序里

五.最后执行在npm中执行$ cnpm run dev,打开http://localhost:8080/ 服务器调试地址 按F12，OK了

2)去除Eslint 验证

在webpack.base.conf.js里面删掉下面:

{

   test: /\.(js|vue)$/,

   loader: 'eslint-loader',

   enforce: 'pre',

   include: [resolve('src'), resolve('test')],

   options: {

     formatter: require('eslint-friendly-formatter')

   }

}