vue.js学习之vue-cli定制脚手架详解


Posted in Javascript onJuly 02, 2017

前言

年初的时候公司的老后台系统实在难以维护和继续在其上开发了,因为这个系统被很多人写过页面,有前端有后端,编写前端代码时都非常随意,加之没有模块化,复用性和可维护性都极低,便下定决定,重新搞一套。

经过一段时间的调研选择了vue全家桶+elementUI来开发后台系统,让交互体验更好,让开发体验更好,让生产效率提高。

从零搭建其实考虑的事情还挺多的,比如:

  • 如何管理代码仓库
  • 开发环境,测试环境搭建
  • 如何接入公司的打包上线流程
  • 如何目录划分
  • 如何划分模块
  • 登录和权限如何做

这篇文章来记录下和脚手架相关的改造,首先其实就是上了vue-cli来做,可是呢?由于预计项目会有很多页面,这些页面其实是分模块的,不同模块的页面之前其实关系不大。所以我觉得一个用户其实大部分时候只会用到其中一个模块的页面,如果把所有页面做成一个单页应用很多资源加载就不是很必要了,所以第一个改造就是:做成多入口打包,也就是做成多个单页应用,每个模块一个入口。

/build/utils

exports.getEntries = function (globPath) { 
 var entries = {}
 glob.sync(globPath).forEach(function (entry) {
 var basename = path.basename(entry, path.extname(entry))
 entries[basename] = entry
 })
 return entries
}

/build/webpack.base.conf

module.exports = { 
 entry: utils.getEntries('./src/modules/*/*.js'),

/build/webpack.dev.conf

/build/weback.prod.conf

var modules = utils.getEntries('./src/modules/*/*.html') 
Object.keys(modules).forEach(function (moduleName) { 
 var config = {
 filename: moduleName + '/index.html',
 template: modules[moduleName],
 inject: true,
 excludeChunks: Object.keys(modules).filter(function (name) {
  return name != moduleName
 })
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(config))
})

这样就完成了多页面的入口配置,其核心就是两点:1. 入口配置成数组。2. plugins里面添加多个HtmlWebpackPlugin分别对应每一个页面,完成js打包后路径的自动注入功能。

这里还有个地方需要注意,就是抽取公用的js和css代码出来,这里做了一下改造,就是echarts指定提取出来,而不是按引用次数那种自动提取, 这里还踩了个坑,详细见注释。

在webpack.prod.conf的plugins里面加入:

entry: { 
 vendor: ['vue', 'vue-router', 'vuex', 'element-ui'],
 echarts: ['vue-echarts']
 },

// 这个地方天坑啊~~~死人了。。。:(
 // vendor是echarts的父模块,顺序不能反:https://github.com/webpack/webpack/issues/1943
 // 包括声明CommonsChunkPlugin的顺序也是有关系的,不是随意的,后声明的是顶级模块,先声明的是依赖顶级模块的模块
 // HtmlWebpackPlugin注入模块链接的时候的顺序也是由此保证的
 new webpack.optimize.CommonsChunkPlugin({
  names: ['echarts', 'vendor'],
  minChunks: function (module, count) { // 抽取公用vendor.css
  // console.log(module.resource)
  return (
   module.resource &&
   /\.css$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0
  )
  } 
 }),

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 #Javascript
关于使用axios的一些心得技巧分享
Jul 02 #Javascript
React服务端渲染(总结)
Jul 01 #Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 #Javascript
详解node-ccap模块生成captcha验证码
Jul 01 #Javascript
vue元素实现动画过渡效果
Jul 01 #Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 #Javascript
You might like
PHP输出缓存ob系列函数详解
2014/03/11 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
javascript new fun的执行过程
2010/08/05 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
python去除扩展名的实例讲解
2018/04/23 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
详解Python yaml模块
2020/09/23 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
中学生爱国演讲稿
2014/09/05 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
绿色校园广播稿
2014/10/13 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2015选调生工作总结
2015/07/24 职场文书