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 1、入口文件
32     entry:'',
33 2、build创建文件的配置
34     output: {
35     path:
36     publicPath:
37     filename:    文件名
38     }
39 3、module 其他配置
40     rules:   配置loader
41         过滤文件loader: 'babel-loader',// es6=> es5 ??
42     devServer: 临时服务、热更新
43 4、判断是否进行js压缩
44 
45 package.json 配置npm
46 执行npm install 下载所有依赖包
47 
48 ------------------------------------------
49 利用webpack完整创建vue
50     1、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     2、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     3、项目入口 main.js {
83         // 控制log 是否打印
84         Vue.config.productionTip = false
85 
86         router, //路由
87 
88         compoments: {},  // 组件 (零件、要素、部件)
89 
90         template: '<app/>' // 模板
91     }
92     4、主HTML文件 index.HTML

 

 

posted @ 2018-10-22 23:42  不爱吃鱼的喵~  阅读(270)  评论(0)    收藏  举报