年初的时候公司的老后台系统实在难以维护和继续在其上开发了,因为这个系统被很多人写过页面,有前端有后端,编写前端代码时都非常随意,加之没有模块化,复用性和可维护性都极低,便下定决定,重新搞一套。
经过一段时间的调研选择了vue全家桶+ elementUI来开发后台系统,让交互体验更好,让开发体验更好,让生产效率提高。
<强>从零搭建其实考虑的事情还挺多的,比如:强>
-
<李>如何管理代码仓库李>
<李>开发环境,测试环境搭建李>
<李>如何接入公司的打包上线流程李>
<李>如何目录划分李>
<李>如何划分模块李>
<李>登录和权限如何做
李>
这篇文章来记录下和脚手架相关的改造,首先其实就是上了vue-cli来做,可是呢?由于预计项目会有很多页面,这些页面其实是分模块的,不同模块的页面之前其实关系不大,所以我觉得一个用户其实大部分时候只会用到其中一个模块的页面,如果把所有页面做成一个单页应用很多资源加载就不是很必要了,所以第一个改造就是:做成多入口打包,也就是做成多个单页应用,每个模块一个入口。
<强>/构建/跑龙套强>
出口。方法=函数(globPath) { var条目={} glob.sync (globPath)。forEach(函数(条目){ var basename=路径。:条目,path.extname(条目)) [:]=条目的条目 }) 返回条目 }
<强>/构建/webpack.base.conf 强>
模块。出口={ 条目:utils.getEntries (’。/src/模块/*/* . js”),
<强>/构建/webpack.dev.conf 强>
<强>/构建/weback.prod.conf 强>
var模块=utils.getEntries (’。/src/模块/*/* . html”) 种(模块)。forEach(函数(moduleName) { var配置={ 文件名:moduleName +/index . html, 模板:模块(moduleName), 注射:没错, excludeChunks:种(模块)。过滤器(函数(名字){ 返回名字!=moduleName }) } module.exports.plugins。推动(新HtmlWebpackPlugin(配置) })
这样就完成了多页面的入口配置,其核心就是两点:1。入口配置成数组。2。插件里面添加多个HtmlWebpackPlugin分别对应每一个页面,完成js打包后路径的自动注入功能。
这里还有个地方需要注意,就是抽取公用的js和css代码出来,这里做了一下改造,就是echarts指定提取出来,而不是按引用次数那种自动提取,这里还踩了个坑,详细见注释。
<强>在webpack.prod.conf的插件里面加入:强>
条目:{ 供应商:[‘vue’,‘vue-router’,‘vuex’,‘element-ui’), echarts (“vue-echarts”): },//这个地方天坑啊~ ~ ~死人了……:(//供应商是echarts的父模块,顺序不能反:https://github.com/webpack/webpack/issues/1943//包括声明CommonsChunkPlugin的顺序也是有关系的,不是随意的,后声明的是顶级模块,先声明的是依赖顶级模块的模块//HtmlWebpackPlugin注入模块链接的时候的顺序也是由此保证的 新webpack.optimize.CommonsChunkPlugin ({ 的名字:“echarts”、“供应商”, minChunks:函数(模块、计数){//抽取公用vendor.css//console.log (module.resource) 回报( 模块。资源,, 美元/\ . css/test (module.resource),, module.resource.indexOf ( 路径。加入(__dirname“. ./node_modules”) )===0 ) } }),
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对的支持。