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 可以拖动的DIV(二)
Jun 26 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP自动生成月历代码
2006/10/09 PHP
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php学习之流程控制实现代码
2011/06/09 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
php实现的SESSION类
2014/12/02 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python制作微博图片爬取工具
2021/01/16 Python
高中自我评价分享
2013/12/05 职场文书
高一英语教学反思
2014/01/22 职场文书
厕所文明标语
2014/06/11 职场文书
企业口号大全
2014/06/12 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
公司承诺函范文
2015/01/21 职场文书