多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

Question

请教，多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

比如：project1,project2项目的所有页面都是一样的，project1/src/a.vue和project2/src/a.vue只有几行代码不一样，可以通过判断处理，a.vue的其他代码怎么复用？

Answer 1

一个主分支作为公共部分，比如叫 main
从主分支新建分支作为实际的项目分支，比如 project1，project2
所有项目都要修改的部分在主分支上修改，然后再合入项目分支
某个项目内部的更改就在那个项目所在的分支修改

Answer 2

对于只有小部分代码不同的页面，可以使用条件渲染和配置来处理不同的逻辑

<!-- 公共组件 a.vue -->
<template>
  <div>
    <!-- 公共部分 -->
    <p>这是公共部分</p>
    <!-- 条件渲染 -->
    <div v-if="isProject1">
      <!-- Project1 特有的部分 -->
      <p>这是 Project1 特有的部分</p>
    </div>
    <div v-else>
      <!-- Project2 特有的部分 -->
      <p>这是 Project2 特有的部分</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['isProject1']
};
</script>

在各个项目中传递 isProject1 prop：

<!-- Project1 中的使用 -->
<template>
  <a-vue :isProject1="true"></a-vue>
</template>

<!-- Project2 中的使用 -->
<template>
  <a-vue :isProject1="false"></a-vue>
</template>

Answer 3

把公共的部分提取出来，封装成一个npm包，开放不同的部分的api接口自定义，就像二次封装组件库一样。这样每个项目都可以安装这个npm包，然后引入包使用即可。如果要开放成公共的npm包，建议编写完善的单元测试，如果只是公司私用，可以发私有npm包，单元测试建议也可以写上（方便后续其它用户使用，当然也可以不写），不过最好写上该包的使用方式。

至于具体的业务页面/组件的封装，那就要视你的具体需求而定了，比如用到的工具函数，可以写成lodash那样的包，组件写成组件包。