webpack+vue 我的视角(持续更新)
最近一直在研究webpack+vue的组合拳,现在分享一下:
webpack就是一个项目管理工具,可以各种模块化加载,然后压缩,当然还有热加载技术(时灵时不灵。。)
vue是mv*模式的框架,组件化开发,很轻量级的,有自己的路由系统,组件,数据绑定等等。(可以配合animate.js做出来)
当他们组合起来用的时候是这样的。。。学习阶段的搭建:
1.webpak准备工作:
首先,安装环境
安装webpack,开启webpack服务器
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev
//App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
编译html,css,热加载等,都是模块化开发的工具
vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2
//es6的语法编译为es2015
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
-----------------------------------------------------------
webpack.config.js的配置:
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'build.js'
},
module:{
loaders:[
{test:/\.vue$/, loader:'vue'},
{test:/\.js$/, loader:'babel', exclude:/node_modules/}
]
},
babel:{
presets:['es2015'],
plugins:['transform-runtime']
}
};
接下来就是vue模块开发了。。。
2.介绍一下脚手架的工具运用:
基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
验证安装ok?
vue --version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
webpack 可以使用(大型项目),Eslint 检查代码规范
单元测试
webpack-simple 推荐使用, 没有代码检查
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev