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 高级篇之函数 (四)
Apr 07 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
js querySelector() 使用方法
Dec 21 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
JS forEach跳出循环2种实现方法
Jun 24 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开发工具有哪五款
2015/11/09 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
Python Queue模块详解
2014/11/30 Python
Python中的集合类型知识讲解
2015/08/19 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python实现飞机大战
2018/09/11 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
劳资人员岗位职责
2013/12/19 职场文书
水果超市创业计划书
2014/01/27 职场文书
校园广播稿500字
2014/02/04 职场文书
春节联欢会主持词
2014/03/24 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
python多次执行绘制条形图
2022/04/20 Python