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的一种模块模式
Mar 22 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
jquery $("#variable") 循环改变variable的值示例
Feb 23 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 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
thinkPHP模型初始化实例分析
2015/12/03 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
基于jquery的页面划词搜索JS
2010/09/14 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
电视节目策划方案
2014/05/16 职场文书
优秀班组长事迹
2014/05/31 职场文书
食品安全处置方案
2014/06/14 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
班主任寄语2016
2015/12/04 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
对Keras自带Loss Function的深入研究
2021/05/25 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
VUE递归树形实现多级列表
2022/07/15 Vue.js