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
