如何实现跨项目代码复用__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

通常我们前端不仅仅只有一个项目，而是有多个项目同时开发，但是往往这多个项目之间代码有一些可以公用的地方，比如说我们的一些组件啥的，一般我们遇到相同的地方都是会直接选择复制，但是这样的问题也很明显，就是一个地方改了，要同时去修改其它的地方，这样显然不太合理，没有达到复用的目的。所有关于这样的情况要想代码复用，我比较推荐使用npm的形式进行管理我们的代码。

首先我们创建两个项目project1和project2

vue create project1
vue create project2

然后我们需要在src目录下面建一个npm发包的目录叫做BaseUI即可，然后进入这个文件执行npm init 初始化一下包名称和版本等详细信息。然后我们通常会定义以下文件：

lib // 这个目录下面放组件文件
.npmignore // 这是忽略文件的
README.md // 这是项目说明文档
package.json // 这是包的信息描述

注意，我们的项目和npm发包的文件是写在一起，目的就是为了就近管理，因为通常我们的组件会进行多次的修改，通常我们写的是业务组件，并不像element-UI组件一样那么稳定，所以为了方便就没有相互独立开来，但是我们可以通过git subtree命令，通过分支来管理文件，这样同样可以达到我们的目的：

git subtree push --prefix src/BaseUI origin base-npm

上面这个命令就是把项目中的src/BaseUI目录下的所有文件推送到了base-npm分支，我是自master分支上直接把指定的文件夹推送到指定的分支，所以每次项目改了你只需要重新把代码推送到发包的分支就可以了。

然后切换到发包分支base-npm执行发包的命令，npm login登陆完成执行npm publish完成。你也可以不把发包的目录独立的抽离到单独的分支里面，而是直接每次进入到发包目录里面去执行发包的操作。

这个时候可以在项目2中安装我们的npm包，组件就可以导入进来使用了：

单独引入某个组件

import BaseButton from 'base-ui/lib/BaseButton'

我们组件都在lib里面，也可以配置按需加载，需要babel插件支持

import { BaseButton } from 'base-ui'

安装babel插件，npm install babel-plugin-import \--save-dev，然后修改 .babelrc 文件。

[
  "import",
    {
      "libraryName": "base-ui", // 指向你的组件库名称
      "camel2DashComponentName": false,  // default: true 取消大小写转化
    }
]

现在只共享来项目1的组件给项目2用，如果项目2的组件也想给项目1用，也需要和上面同样操作，在项目里面定义一个发包目录，把文件单独抽到一个分支里面，然后执行发包的操作。

那么为什么多个项目要定义成多个包呢？定义成一个包不行吗？放到一个git仓库管理也可以呀！这样确实可以，但是如果把发包目录独立于项目，最大的问题还是如果要改某个组件，需要在发包目录里面改，改完之后把包发上去，然后再到项目中把包安装上看下效果，然后再不行就再改再继续发包，这样是非常繁琐的。

所以建议的是一个项目里面使用的源文件，一个项目里面使用的是包，这样来达到共享的目的，而不是两个项目里面都同时去使用包。

我的测试项目地址：GitHub地址连接