VUE 大型项目前端框架构建实践

2020-02-28  本文已影响0人  saashang

这里先定义一下什么是大型项目:
1.项目涵盖的内容和模块比较多,开发周期长;
2.参与的人员多,并且每个模块的开发、测试以及用户群都不一样;
3.每个模块有不同的迭代周期。

假设架构是这样的,SPA页面:
整体框架分三部分
1.工具栏
2.菜单栏,从数据库动态渲染
3.根据菜单渲染页面内容,页面内容来源于不同的业务域

为什么用SPA页面:
1.在各个域打包的时候不需要重复打包相同的JS库和公用JS包,打包体积压缩到最小;
2.不需要重复加载JS包

这样就可以在框架层次上把JS库和公用的功能挂载到 VUE上,通过this.$来进行引用

3.用SPA那么远程的JS如何加载到当前框架里,VUE本身可以异步加载模块,既然是异步加载那么无论JS在
本地还是远程其实都无所谓;通过URL把JS加载到内存然后通过以下语句执行:
(new Fn(`return ${res.data}`)()) 当然这个方式比较粗暴,但是简单;

开发框架 分为两套:
1.框架,假如叫 @frame   需要发布到内部npm私有源上
2.各个子域开发框架,需要引用框架的库 npm install @frame
3.在子域的开发主页上 直接引用 框架 main.js
4.开发模式分为四种:mock 本地开发,dev 与本地服务开发联调,stage 测试联调,prod 预发布和上线版本
通过不同的代理执行对应的URL 这个地方有点复杂

以上只是零散列出框架构建的思路,内部系统已经上线,并且已经接入6个模块;有时间整理一个样例,但是真正要部署还是需要很多细节和服务,小项目不建议采用。

上一篇下一篇

猜你喜欢

热点阅读