webpack+vue搭建
step1 初始化项目 ---- Webpack 使用npm安装
1.创建项目文件夹, npm init -y 创建 package.json
2.项目根目录下建立src和dist文件夹，分别用来存放项目源码和webpack编译后的代码
step2入口文件--- 简单跑一下
1.在根目录下直接建立一个index.html，作为页面的入口文件
Demo{{message}}
2.在src下建立一个main.js，作为Vue的入口文件
// require的语法是Commonjs的，webpack自身可以实现直接使用// es6的语法需要依赖babel哦const Vue = require('vue')newVue({el:'#app',data:{message:'Hello Vue.js!'}})
3.安装模块： vue npm install vue@1 --save ； webpack npm install webpack --save-dev(在本地安装)
本地安装的webpack 需要在package.json的 scripts 配置中添加运行脚本
"scripts": {"test":"echo \"Error: no test specified\" && exit 1","dev":"webpack src/main.js dist/main.js"// <---自行添加,指定运行的文件 **webpack [入口文件] [出口文件]**},
运行npm run dev，再用浏览器打开index.html就能看到效果了：
Hello Vue.js!
全局安装webpack npm install -g webpack 则无需指定脚本～
step3编写webpack配置文件 !!
在上一步中专门指定了webpack运行脚本去运行指定的文件，但实际开发中，对于不同环境的大型项目／系统开发显然是不满足的。因此创建一个文件专门存放webpack配置～
1.在根目录下创建 webpack.config 文件夹来存放webpack的配置文件；
2.在上面的目录下首先创建一个base.js文件来存在一些公共环境下的配置文件（例如loaders的配置）
constpath =require('path')constroot = path.resolve(__dirname,'..')// 指向 根目录module.exports = {entry: path.join(root,'src/main.js'),// 项目入口文件output: {path: path.join(root,'dist'),// 出口目录filename:'main.js'// 出口文件名}}
以上便实现了“webpack src/main.js dist/main.js”webpack指定 入口文件 -> 出口文件 的功能了。
此外还可以拓展一下，使得兼容更多的功能～ （webpack@2 resolving）
const path = require('path')const root = path.resolve(__dirname,'..')// 根目录module.exports = {entry:path.join(root,'src/main.js'),// 入口文件output:{path:path.join(root,'dist'),// 出口目录filename:'main.js'// 出口文件名},resolve:{ alias:{// 配置目录别名，来确保模块引入变得更简单// 在任意目录下require('components/example') 相当于require('项目根目录/src/components/example') components:path.join(root,'src/components'), views:path.join(root,'src/views'), styles:path.join(root,'src/styles'), store:path.join(root,'src/store') }, extensions:['.js','.vue'],// 引用js和vue文件可以省略后缀名 (此处有坑坑坑＝＝。)!!webpack@2+已经不再要求强制转入一个空字符串 resolveLoader:{ module:{// 配置loader loaders:[ {test:/\.vue$/,loader:'vue'},// 所有.vue结尾的文件，使用vue-loader{test:/\.js$/,loader:'babel',exclude:/node_modules/}// .js文件使用babel-loader，切记排除node_modules目录] }}
根目录下添加.babelrc用于配置 babel ：
{"presets": ["es2015"] }
关于 Babel 是什么 : 通常与webpack搭配一起使用，webpack可以看作是是打包工具，babel则视为编译工具，可把最新标准编写的js代码（例如 es6，react..）编译成当下随处可用的版本。是一种“源码到源码”的编译（转换编译）！
而.babelrc就是让 Babel 做你要它做的事情的配置文件。
babel-preset-es2015 打包了es6的特性
使用了vue-loader和babel-loader需要安装包： 运行如下命令（可能有坑哦，若踩可见文末 bug修复篇＝＝。）
npm install --save-dev vue-loader@8 babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 css-loader vue-style-loader vue-hot-reload-api@1 vue-html-loader
3.在 webpack.json 中创建 dev.js
constpath =require('path')constwebpack =require('webpack')constmerge =require('webpack-merge')constbaseConfig =require('./base')constroot = path.resolve(__dirname,'..')module.exports = merge(baseConfig, {}) \\首先 与base.js同样的配置
其中 webpack-merge 用于合并两个配置文件，需要安装 => npm install --save-dev webpack-merge
4.自行搭建一个小型服务器，以免手动调试 index.html 。定义使用 webpack dev server 。 （webpack@2 Proxy）
因此需要继续配置dev.js如下： 还有其他一切配置，可查阅 webpack-dev-server-cli
module.exports = merge(baseConfig, {devServer:{historyApiFallback:true,// 404的页面会自动跳转到/页面 inline:true,// 文件改变自动刷新页面// progress: true, // 显示编译进度 !!有坑，待解决。下同～ 暂时不加这两个属性继续走下去吧～！// colors: true, // 使用颜色输出 port:3800,// 服务器端口 ！！注意不要被占用了哦}, devtool:'source-map'// 用于标记编译后的文件与编译前的文件对应位置，便于调试})
5.添加热替换配置 HotModuleReplacementPlugin ，每次改动文件不会再整个页面都刷新。该配置是webpack内部插件，不需要安装。
module.exports = merge(baseConfig, { entry:['webpack/hot/dev-server',// 热替换处理入口文件path.join(root,'src/index.js') ],devServer:{/* 同上 */},plugins:[newwebpack.HotModuleReplacementPlugin()// 添加热替换插件]}
6.使用 HtmlWebpackPlugin ，实现js入口文件自动注入。npm install --save-dev html-webpack-plugin，且需要在头部引入 => const HtmlWebpackPlugin = require('html-webpack-plugin') (还在dev.js中哦)
module.exports = merge(baseConfig, {entry:[/* 同上 */],devServer:{/* 同上 */},plugins:[newwebpack.HotModuleReplacementPlugin(),newHtmlWebpackPlugin({ template:path.join(root,'index.html'),// 模板文件 inject:'body'// js的script注入到body底部}) ]}
7.修改index.html（根目录i 啊）,去掉入口文件的引入：
8.修改package.json 的运行脚本：
{"dev":"webpack-dev-server --config webpack.config/dev.js"//指向配置文件，而不是某一单一页面的js}
再来跑一下，检测是否webpack配置都成功运作了。创建一个vue组件 src/components/Hello.vue
相应的main.js也做出修改：
//import...from的语法是ES6的，由于已经安装了babel(可编译)，故可以直接使用importVuefrom'vue'importHellofrom'./components/Hello.vue'newVue({ el:'#app', template:'
运行npm run dev，浏览器打开 localhost:3800 查看结果 Hello Vue.js！ 并且改动页面会自动刷新，不需要再一遍遍command+r刷新啦。
step4配置路由
1.安装 vue-router： npm install --save [email protected] （当然了当下的vue + axois 会更搭哦）
2.src下创建views文件夹，用于存放页面组件；另外再创建router文件夹，用于存放所有路由相关的配置
3.添加路由页面 src/views/Home.vue:
importHellofrom'components/Hello'//引入已写vue组件exportdefault{components: {Hello} }4.添加 src/router/routes.js 文件，用于配置项目路由：
importHomefrom'views/Home'exportdefault{'/': { name:'home', component: Home } }
5.添加路由入口文件 src/router/index.js：
importVuefrom'vue'importRouterfrom'vue-router'importroutesfrom'./routes'Vue.use(Router)constrouter =newRouter({ hashbang:false,// 关闭hash模式history:true,// 开启html5history模式linkActiveClass:'active'// v-link激活时添加的class，默认是`v-link-active`})router.map(routes)router.beforeEach(({to, next}) =>{console.log('---------> '+ to.name)// 每次调整路由时打印，便于调试next()})exportdefaultrouter
6.再次修改main.js：
importVuefrom'vue'importrouterfrom'./router'//直接导入路由配置 constApp = Vue.extend({})router.start(App,'#app')
7.最后别忘了index.html:
{{message}}
可以再次执行 npm run dev: 浏览器直接访问 localhost:3800查看效果。
step5 配置Vuex
（vuex）
专门为vue.js开发而配套的 状态管理模式 .通常用于存放和管理不同组件中的共用状态，例如不同路由页面之间的公共数据.
其他 几个概念：
state：状态，即数据 ;
store：数据的集合，一个vuex引用，仅有一个store，包含n个state
mutation：state不能直接赋值，通过mutation定义最基本的操作
action：在action中调用一个或多个mutation
getter：state不能直接取值，使用getter返回需要的state
module：store和state之间的一层，便于大型项目管理，store包含多个module，module包含state、mutation和action
1.安装 ： npm install --save vuex@1 添加 src/store 文件夹，存放vuex相关文件，添加 src/store/modules 用于vuex分模块管理 ;
2.添加 src/store/types.js，vuex的所有mutation type（操作类型）建议放在一起，有效避免重名情况：
exportconstINCREASE ='INCREASE'// 累加exportconstRESET ='RESET'// 清零
3.vuex模块，添加 counter 模块目录 store/modules/counter添加 store/modules/counter/actions.js：
import{INCREASE, RESET}from'store/types'exportconstincrease =(({dispatch}) => { dispatch(INCREASE)// 调用type为INCREASE的mutation})exportconstreset= (({dispatch}) => { dispatch(RESET)// 调用type为RESET的mutation})
添加 store/modules/counter/index.js
import{INCREASE, RESET}from'store/types.js'conststate = { count:0}constmutations = { [INCREASE] (state) { state.count++ }, [RESET] (state) { state.count =0}}exportdefault{state, mutations}
4.vuex入口文件: store/index.js:
importVuefrom'vue'importVuexfrom'vuex'importcounterfrom'store/modules/counter'Vue.use(Vuex)// 确保在new Vuex.Store()之前exportdefaultnewVuex.Store({ modules: {counter} })
5.修改main.js，将store引入并添加到App中：
importVuefrom'vue'importrouterfrom'./router'importstorefrom'store'constApp = Vue.extend({store})router.start(App,'#app')
6.改造一下 src/components/Hello.vue，把action用上：
{{message}}
click count: {{count}}
increaseresetstep6配置eslint ---规范js编码
eslint定义的是编码风格，巧妙利用提供的rules，可以自定义配置 ，增减规则 ； 同时，在使用中检测不通过，不一定不能运行，只是违反了规则＝＝。监督自我。
网上也已经有很多现有的配置了，建议（standard）
1.配置.eslintrc文件
{"parser":"babel-eslint",// 支持babel"extends":"standard",// 使用eslint-config-standard的配置"plugins": ["html"// 支持.vue文件的检测],"env": {"browser":true,// 不会将window上的全局变量判断为未定义的变量"es6":true// 支持es6的语法},"rules": {// 自定义个别规则写在这，0忽略，1警告，2报错"no-unused-vars":1// 将”未使用的变量“调整为警告级别，原为错误级别，更多规则请看官网}}
用了啥就安装啥：npm install --save-dev eslint babel-esli nt eslint-config-standard eslint-plugin-standard eslint-plugin-html eslint-plugin-promis
step7 webpack生产环境配置 ---对于编译出来的文件进行压缩，提取公共模块等操作
1.添加webpack.config/pro.js文件，相比dev.js把生产环境用不到的删掉，比如webpack-dev-server、webpack-hot-replacement.
constpath =require('path')constwebpack =require('webpack')constmerge =require('webpack-merge')constHtmlWebpackPlugin =require('html-webpack-plugin')constbaseConfig =require('./base')constroot = path.resolve(__dirname,'..')module.exports = merge(baseConfig, { plugins: [newHtmlWebpackPlugin({ template: path.join(root,'index.html'),// 模板文件inject:'body'// js的script注入到body底部}) ]})
（常用插件） ：
extract-text-webpack-plugin 提取css到单独的文件
compression-webpack-plugin 压缩gzip
webpack.optimize.UglifyJsPlugin 压缩js文件，内置插件
.....
2.在package.json中添加运行脚本："build": "webpack --config webpack.config/pro.js";
3.运行npm run build，可以在dist文件夹中看到打包好的文件~~
webpack+vue的环境搭建到此算是初见雏形了，具体时实际运用还需要更多的实践
常见错误总结
安装一些npm包失败： 出现背景：执行npm install --save dev ....时
查问题shasum check failed：
人话：npm镜像源错误。
解决：1.通过config命令
npmconfig set registry http://registry.cnpmjs.org npminfounderscore
2.命令行指定
npm --registry http://registry.cnpmjs.org info underscore
以上两种都可以快速解决安装问题，但治标不治本，下次安装时仍会出现。因此推荐?，直接在配置中指定写死，一劳永逸～
3.编辑 ~/.npmrc 加入如下配置：
registry = http://registry.cnpmjs.org
npm版本太低报错：
解决：
1、首先安装n模块 npm install -g n
2、升级node.js到最新稳定版 n stable
若确定在最新版本中还是在报错的话，则需要检查是否时webpack.config中配置有错误，[email protected]>[email protected] 各中的（升级特性） 还是很重要的
出现segmentation fault 11报错： 出现背景：在一次需要最新版本的node时，舍弃了$n stable稳定版（因为系统还是提示需要升级最新版）执行 sudo n latest 后升级过慢，中间不够稳定，直接强行被退出。之后再运行，关于npm 和node 的所有命令均在报segmentation fault 11这个错误。
以为os被玩坏了，系统错乱，吓死宝宝了＝＝。
原因：执行n命令，显示当前没有选中任何版本。 解决：用n命令重新设置要使用的版本 sudo n 版本号
版本太低的报错
解决：执行npm install --save-dev eslint-plugin-import@^2.0.0
npm install --save-dev [email protected]