我是个人开发者,一个人在开发很多个产品。如下是我目前维护的VUE项目有4个,相比较公司高大上的架构设计和严谨的项目管理,个人开发追求的就是简单高效。
本片文章讲下我是如何在4个Vue项目之间,本地化共用自定义组件。 自定义组件包括登录注册页面、支付页面(支付宝+stripe)、小的共用utils(按钮,logo)等等。
websread,网页阅读器https://websread.com
onetools,桌面端工具集https://onetools.vip
we4221,我们的马拉松https://we4221.com
复盘神器,dviewdiewhttps://dviewdview.com
遇到的问题
1 效率低下:我不太可能每个项目都去copy需要的vue文件,随后项目变多,copy成本随之变大。
2 维护成本:遇到共用的组件需要维护更新逻辑,不太可能每个项目都去更新一遍文件。
参考网上一些资料,加上亲自实验成功。
我通过在项目同层级新建一个共用的项目,把共用的组件都塞入到这个项目里,来解决这个问题的。分享如下
解决方案
1 在同层级,新建共用组件项目plug_libs。我是通过vite来新建vue项目的。图中黄色标注是要设置的内容,下面会讲到。
2 plug_libs-src-index.ts文件中导出需要共用的组件,开放给其他项目使用
plug_libs-package.json文件,正常安装公共组件库需要的依赖即可。
3 在其他项目(例如websread.com)里,需要安装本地共享组件库。
cd ./websread.com
npm install ../plug_libs
这样,本地组件库就被安装到应用项目的packjson.json配置中了
4 此时,已经可以在其他项目 (例如websread.com)引用公共组件了
5 如果编辑器有引用的报错提示,我是在tsconfig.app.json配置文件里加了这句引用。
总结
关于vue项目引用公共组件,网上教程最多的是推荐发布到npm,再npm install安装;
但我个人觉得稍稍复杂,个人开发者精力有限。这种本地化引用的方式,更适合我的现状。
码字不易,欢迎评论区点赞交流。
-----------
后面准备把我是如何从产品转开发,到现在成为六边形战士的经验分享一下。感谢关注!