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' )

    }

}