关于vue多项目一体的解决方案的讨论 – 初始篇[架构篇]

一、背景

背景:现阶段很多公司都会做各种各样的活动,以及一个项目部需要做多个项目,但是这里就会存在一些问题。
- 项目过多,分散在不同git上,随着项目过多,每次查找搜索都会很麻烦
- 各项目大小不同,如果都做在打包在一个项目里面,随着迭代项目会越来越大
- 组件之间的公用,只能从一个项目复制到另外一个项目
- 每次都需要创建新的项目,插件也需要重新安装,或者去旧的复制
- 如果开发人员较多的情况,不同的项目会有不同的风格以及插件
- 插件升级,需要一个一个去升级
- …类似的问题会越来越多

二、解决方案

首先说一下‘微前端的概念’:
微前端借鉴了微服务的架构理念,将一个庞大的前端应用拆分为多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用联合为一个完整的应用。
基于上述的概念,我会手把手的搭建2套可用的完整vue的企业前端架构。
- 方案一: 基于vue2,vue-router,vuex,vant , vuese , eslint , amfe-flexible ,axios 等构建的框架
- 方案二 : 基于pnpm + vue3 +vite + ts +pina +eslint 所实现的 momorepo 方案

两者的目的都是一致的,为了解决多项目维护,开发升级的问题。

基于vue2的方案一 (博主自己已经搭建使用过,有兴趣可以使用vue3按照这个思路搭建一套)

目标: 实现多项目依赖一体,构建公共的组件库,样式,插件等;但业务代码运行,打包隔离,互不干扰,减少因为某一部分子项目的问题,导致全部模块出问题。
适用的场景:项目零散,要求打包体积较小,或者项目需要各个模块进行单独隔离,业务和打包都隔离的情况。

基于vue3的方案

目标:实现多项目集成,代码统一,减少重复依赖项,可构建公共的组件库,样式,业务都进行隔离,互补干扰,跨项目开发。
适用的场景:项目较大,需要各单独隔离,业务和打包都隔离,或者多个相似项目需要统一管理。

三、架构的思考

搭建一个完整的前端架构我们需要考虑那些方面,然后再去入手搭建。(属于个人思考,遗漏部分后面的篇幅过程中再加上)

基础

一个项目至少需要能跑起来,以及能访问到响应的接口
- 基础cli项目创建
- 路由的设置和封装
- 请求的设置和封装
- 打包的入口文件以及出口文件

公共

我这里把公共分为组件,方法,样式
- 公共的项目组件库,以及组件文档
- 公众的指令,过滤器等
- 公共的样式,以及公共的方法

配置

项目的配置包括各个方面
- 环境变量 ,包括不同环境的css 以及参数,代理等等(如果需要多项目一体就需要进行参数的提取,建立专属的配置文件,进行配置)
- 建立静态文件夹,区分一些不用打包的资源
- 代码的压缩打包
- 不同环境的调试代码删除
- 图片的处理
- 代码的规范检查
- 等等 ,后面具体的时候再补充

测试部分

项目集成测试(这个不讨论,一般根据公司情况自己增加)

本章为架构篇的第一篇,主要是思考项目搭建前的一些目标。接下来会先从方案一开始,一步一步进行项目的搭建和规划。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
受多重因素影响,2022年证券职业全体成绩承压。不过,到3月29日晚记者发稿时,从已发表的7家上市券商2022年年报来看,券商在两融事务方面不乏亮点。

)">
下一篇>>