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中执行命令：

一、$ cnpm install  （要有一会）

二、$ 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' )

    }

}