基于Vue-cli3 的多页脚手架

原创 tianxiaofeng747 随笔 技术 165阅读 2018-12-24 10:38:08 举报

公司最近要做一个新项目,项目分为a,b,c...n 个模块, 这些模块需要单独开发,部署,最后来个d项目, d项目就是个壳子,里面有很多后端返回的菜单,这些菜单是用户的可用权限,他们可能来自于a,b,c 任意一个模块, 需求就是这样,让我出解决方案。
说实话,有点懵逼,我们之前的项目都是一个spa应用,也就是vue默认那套脚手架,Vue+vue-router+vuex+elmentui 还有其他一些第三方插件。最后打包成懒加载的很多js文件。 那么假如是这种需求, 我想单页是满足不了的。只能另外想办法。
然后我就想到了多页应用,vue其实也可以做成多页的,只是每个页面所有的资源都需要重新加载一遍,性能不太好, vue-router 也不能用了。Vuex 到是可以结合 ’vuex-persistedstate’ 这种插件勉强使用,说白了就是间接用localStorage ,然后共用部分用一个Layout ,其他业务功能继承与这个layout。
配置部分的话,cli-3做的蛮好, 看官方api ,其实可以有多个入口的。

然后,我们可以遍历我们的文件夹,约定固定入口名字比如app.js , 然后加上其他sass之类的配置, 最后如下:

这样打包完后,就是固定多页的应用了。

然后因为有好几个项目, 那么公共的组件是否可以抽取出来呢,当然了, 然后我们又抽取了公共组件和方法, 放到了 npm包上,由于这些东西还不稳定,所以用起来比较麻烦,每次提交完公共的代码后,要发布, 然后单个项目再update。
发布npm包也简单, 配置好项目名字, npm login npm publish 就搞定了, 这里不展开讲。 公共组件打包到是有点折腾,下次讲把。
最后安利下杭州前端开发群: 475255852 ,有意思的东西一起分享。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复