webpack加vue的開發配置

 1 淘寶cnpm安裝
 2     npm install -g cnpm --registry=https://registry.npm.taobao.org
 3 
 4 查看已安裝的npm
 5     npm list --depth=0
 6     npm list --depth=0 -g
 7     npm list 
 8     npm list -g
 9 
10 安裝vue
11     npm install vue -g
12 安裝vue-cli
13     npm install vue-cli -g
14 安裝vue-router路由
15     npm install vue-router -g
16 
17 安裝webpack
18     npm install webpack -g
19 安裝webpack-cli
20     npm install webpack-cli -g
21 
22 安裝 sass -----
23     cnpm install node-sass --save-dev 
24     cnpm install sass-loader --save-dev
25 
26 ------------------------------------------
27 利用webpack建立vue
28     vue init webpack-simple {}  簡單版
29 配置項
30 webpack配置文件 webpack.config.js  
31 一、入口文件
32     entry:'',
33 二、build建立文件的配置
34     output: {
35     path:
36     publicPath:
37     filename:    文件名
38     }
39 三、module 其餘配置
40     rules:   配置loader
41         過濾文件loader: 'babel-loader',// es6=> es5 ??
42     devServer: 臨時服務、熱更新
43 四、判斷是否進行js壓縮
44 
45 package.json 配置npm
46 執行npm install 下載全部依賴包
47 
48 ------------------------------------------
49 利用webpack完整建立vue
50     一、cmd配置 {
51         vue init webpack {}  完整版
52         router? 是否須要路由
53         ESLint?是否須要嚴格代碼規範
54         set up unit test with karma + mocha? 單體測試 測試代碼
55         set up e2e tests with nightwatch ?  綜合測試， 測試HTML
56     },
57     二、package.json 配置文件 {
58         可執行的 npm 命令
59         "scripts": {
60             運行臨時服務器
61             "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
62             運行臨時服務器
63             "start": "npm run dev",
64             單體測試，代碼接口
65             "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
66             綜合測試，
67             "e2e": "node test/e2e/runner.js",
68             兩個測試
69             "test": "npm run unit && npm run e2e",
70             生成文件 編譯 { npm run build }
71             "build": "node build/build.js",
72             build 生成的文件也只有用服務器運行  本地不能運行
73             {    cd dist
74                 cnpm i -g http-server
75                 hs
76                 }                        
77 
78             測試編碼規範  可經過build/webpack.base.conf.js 配置
79             "lint":""
80         },
81     }
82     三、項目入口 main.js {
83         // 控制log 是否打印
84         Vue.config.productionTip = false
85 
86         router, //路由
87 
88         compoments: {},  // 組件 (零件、要素、部件)
89 
90         template: '<app/>' // 模板
91     }
92     四、主HTML文件 index.HTML