V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
irvinghua
V2EX  ›  程序员

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

  •  
  •   irvinghua · 2019-06-13 09:34:00 +08:00 · 3610 次点击
    这是一个创建于 1772 天前的主题,其中的信息可能已经有所发展或是发生改变。

    场景是这样的:

     公司产品基本上都是 toB 的,所以一般思路都是工程能公用复用的,都是想做成一个大组件,被其他类似产品项目引用。所以搞了个 vue+elementUI 的基础工程,都是写的一些登录,权限,用户管理,角色管理页面。初步构想是把这个 vue 工程作为一个父工程,其他项目都依赖这个工程,只关注业务页面的编写,进行快速开发。
    
     原本想法是看能不能把这个基础 vue 工程,打个包放到私有仓库,npm 构建时引用这个包。如果基础工程有什么改动,比如改个登录样式啥的,只需打个更新版本包到私有仓库,把其他工程对这个基础工程的引用版本号改下重新构建就可以把所有工程都更新。就像 java 引用一个工程打包的 jar 包一样。但是仔细研究了下 vue 打包和引用原理,貌似 vue 只支持组件打包和依赖,并不支持整个工程打包并依赖引用。不知各位大神有没有好的方案解决工程依赖问题?
    
    基础工程单独作为一个 web 页面服务的微服务的方案也想过,因为并不像互联网生产环境都隶属一个网络,项目部署环境都是客户内网。一个客户对应一个生产环境。而且微服务运维成本太高,团队比较小玩不转。所以这个方案也不太可行
    

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

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

    参考 https://github.com/PanJiaChen/vue-element-admin
    darrenfang
        8
    darrenfang  
       2019-06-13 10:31:24 +08:00
    同后端, 目前用的 vue init 来生成项目, 仍然感觉很不方便
    fengzilong
        9
    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
        10
    NasirQ  
       2019-06-13 11:04:36 +08:00
    前端:
    NasirQ
        11
    NasirQ  
       2019-06-13 11:07:39 +08:00
    1、技术够的话,把公用功能抽象成 vue cli 插件,
    2、觉得麻烦的话,仓库建一个纯净的 vue 模板项目,每次新建项目就从这里拉取,然后本地安装依赖并增加业务,再打包发布。
    panda12
        12
    panda12  
       2019-06-13 11:24:16 +08:00
    同 6l 的说法
    我的做法是登录、权限、角色这块可以做成独立的项目,作为父项目,只提供 token 之类的用户信息给各个功能子项目。

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


    仅供参考
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1112 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 18:30 · PVG 02:30 · LAX 11:30 · JFK 14:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.