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 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
js实现索引图片切换效果
Nov 21 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 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作的文本留言本的例子(一)
2006/10/09 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
javascript 函数调用规则
2009/08/26 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
React中的refs的使用教程
2018/02/13 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
经典c++面试题六
2012/01/18 面试题
物流管理应届生求职信
2013/11/07 职场文书
营业员实习自我鉴定
2013/12/07 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
严以用权学习心得体会
2016/01/12 职场文书