vue 工程之间如何依赖和引用

2019-06-13 09:34:00 +08:00
 irvinghua

场景是这样的:

 公司产品基本上都是 toB 的,所以一般思路都是工程能公用复用的,都是想做成一个大组件,被其他类似产品项目引用。所以搞了个 vue+elementUI 的基础工程,都是写的一些登录,权限,用户管理,角色管理页面。初步构想是把这个 vue 工程作为一个父工程,其他项目都依赖这个工程,只关注业务页面的编写,进行快速开发。

 原本想法是看能不能把这个基础 vue 工程,打个包放到私有仓库,npm 构建时引用这个包。如果基础工程有什么改动,比如改个登录样式啥的,只需打个更新版本包到私有仓库,把其他工程对这个基础工程的引用版本号改下重新构建就可以把所有工程都更新。就像 java 引用一个工程打包的 jar 包一样。但是仔细研究了下 vue 打包和引用原理,貌似 vue 只支持组件打包和依赖,并不支持整个工程打包并依赖引用。不知各位大神有没有好的方案解决工程依赖问题?

基础工程单独作为一个 web 页面服务的微服务的方案也想过,因为并不像互联网生产环境都隶属一个网络,项目部署环境都是客户内网。一个客户对应一个生产环境。而且微服务运维成本太高,团队比较小玩不转。所以这个方案也不太可行

本人主攻后端开发,前端比较渣。或许整体方案就不可行,有更好的方案,也帮忙指点下

3810 次点击
所在节点    程序员
12 条回复
jin5354
2019-06-13 09:41:47 +08:00
何为整个工程打包并依赖?听起来好像用 git submodule 就行
或者试试把工程抽象成 Vue 插件,跟 ElementUI 一样,通过 Vue.use 引入
1ffree
2019-06-13 09:48:53 +08:00
同后端 刚学 vue 挺菜的倒是。 感觉主要还是组件级别的依赖。一个可行的方式是, 基础组件单独维护,版本号控制, 基础工程的话做一个 maven archetype 代码模板生成, 每个子工程的话从 archetype 创建。 这样的话基础组件有改动,子工程修改组件版本号。
oe52920
2019-06-13 09:49:30 +08:00
写个 vue cli 插件就行了,https://eick.gitbook.io/notes/vue/vue-cli3-generator-cha-jian-ru-he-bian-xie,这是我的 gitbook,可以参考一下,我公司也有这样的需求,就直接写了个 vue cli 插件
irvinghua
2019-06-13 09:51:59 +08:00
@jin5354 基础工程页面有好几十个。对 vue 不是特别懂,全部抽象成插件比较费时间吧 [ 笑哭脸]。整个工程打包并依赖比较快捷一点吧。。。所以想这样做也是图省事
zqx
2019-06-13 10:09:06 +08:00
感觉需求和飞冰类似
dongsuo
2019-06-13 10:13:54 +08:00
可以参考我司的做法:登录、权限、用户管理是在一个项目里做的,其他项目只负责管理自身的路由权限,登录授权什么的通过跳转到第一个项目那里拿到 token 来验证(有点类似微博 qq 之类的第三方认证的流程)
luob
2019-06-13 10:18:46 +08:00
如果再做一层抽象比较难的话,可以直接建个示例代码的 repo,把登录,权限,用户管理这些所有通用业务的代码写一遍,然后每次写新项目需要什么功能都从示例 repo 里复制一份。

参考 https://github.com/PanJiaChen/vue-element-admin
darrenfang
2019-06-13 10:31:24 +08:00
同后端, 目前用的 vue init 来生成项目, 仍然感觉很不方便
fengzilong
2019-06-13 11:02:21 +08:00
https://github.com/nut-project/nut

文档: https://nut.js.org/

里面的插件机制应该满足你的需求了,包括页面、layout、鉴权都可以抽成一个独立的插件

更进一步,如果使用微前端模式,可以把 layout、鉴权 等全部放到主应用里面,子应用只要专注业务开发即可,父应用和子应用都可以使用独立的仓库发布

这里有个 slides: https://docs.google.com/presentation/d/1lz-SoMj7-dXQtPj0uEu7wganKOaG3XAQ2fB0own_ADw/edit?usp=sharing

附带的 bonus: 多框架支持(在一个单页应用中使用不同框架,对技术栈平滑迁移友好)

思路可以参考下
NasirQ
2019-06-13 11:04:36 +08:00
前端:
NasirQ
2019-06-13 11:07:39 +08:00
1、技术够的话,把公用功能抽象成 vue cli 插件,
2、觉得麻烦的话,仓库建一个纯净的 vue 模板项目,每次新建项目就从这里拉取,然后本地安装依赖并增加业务,再打包发布。
panda12
2019-06-13 11:24:16 +08:00
同 6l 的说法
我的做法是登录、权限、角色这块可以做成独立的项目,作为父项目,只提供 token 之类的用户信息给各个功能子项目。

这样你改一个登录页,只需要修改发布这个父项目的工程,其他项目不会受到影响。


仅供参考

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/573433

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX