背景：

当有多个前端项目，每个项目共用头部，底部或者弹框之类的时候，之前的方式是复制粘贴，这样组件固定不变还可以，要是组件有改动，每次就需要复制粘贴很多次，这样效率太低，所以使用公共组件，每次只需要更新版本即可。

1.创建项目

先创建3个项目common、test1、test2,具体创建方式可根据vue脚手架去创建（https://cli.vuejs.org/guide/creating-a-project.html#vue-create）。 2.打开项目common，删除一些没用的文件，修改package.json,增加一行

"main": "index.js",

这表明index.js就是common包的入口文件，然后创建index.js文件。 3.添加依赖，因为公共头部需要有数据返回，所以需要axios,进行接口调用。其实在父组件中有axios即可，例如在test1中已经引入了axios，则公共组件中就不必再引入，直接使用即可。 如果父组件中不需要某个依赖，直接只在公共组件中引入即可。 若是以npm本地file引入common包，common包引入了第三方组件，则父组件中必须也引入第三方包，并在main.js中初始化。 父组件引入依赖(有需要其他的直接在官网安装即可)： npm install axios 子组件引入依赖 需要在index.js中初始化

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

2.创建组件

公共组件中的index.js 例如公共头部和底部

import header from './src/components/header'
import footer from './src/components/footer'
export {
  header,footer
}

components中header，footer根据业务写即可。

3.引入组件

方式1：npm本地file引用。（spa项目推荐）

此方式试用于spa项目、不适用于ssr项目，spa打包直接把本地包可以打成静态文件，而ssr需要在node端进行打包，node端并没有公共组件的文件。 分别进入test1和test2，在控制台输入命令： npm install ../common/ 其中…/common/是common的相对路径，这里也可以输入绝对路径。 这样就将common这个工程以node_module的方式引入到test1和test2项目中了。可以正常使用common在index.js中导出的组件了。 命令执行完后，package.json里会多一条记录

    "axios": "^0.21.1",
    "common": "file:../common",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.1",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

也可以在package.json里加上"common": "file:../common", 这一行再执行npm install命令。 同样这时修改common项目下面的任意代码都会实时生效，不用打包，不用更新引入包，也不用重启。而且在package.json中有引入记录。

方式2：link方式。

首先进入common包，在控制台输入 npm link 这会创建一个软连接，并保存到目录C:\Users\Administrator\AppData\Roaming\npm\node_modules下面。 然后进入test1和test2，在控制台输入 npm link common 这就将这个公共的项目通过软连接的方式引入到项目里面来了。可以看到在node_modules中common包和其他的包文件夹样式是不一样的，common文件夹只是一个软链接。 这时修改common项目下面的任意代码都会实时生效，不用打包，不用更新引入包，也不用重启。

需要注意的是，当项目包依赖更新后，也就是执行了 npm install xxx 之后，需要重新link common项目。而且使用npm link后本地package.json里没有记录，无法直观的查看本地包的引用。

方式3：npm发布引用（ssr开放项目推荐）

我们可以采取专人维护common包的方式，common的组件编写完成后，将其发布到npm。 发布流程如下：

在注http://www.npmjs.com册一个账号 进入common的控制台，输入命令npm login，按照提示输入刚注册的账号密码 输入命令 npm publish 即可 当然common这个名字肯定被注册了，这里只做示例，真正使用时需使用一个未在npm中注册的包名。需要注意的是，若报错你没有权限发布该项目，那应该就是你的这个项目名被别人用过了，在package.json中修改下项目名再发布吧。

开发test1和test2的程序猿通过npm install命令将common以node_module的方式引入

npm install common --save

另外，每次改动代码再次发布时，需要修改package.json文件中的版本号，不然发布不成功。

这样开发test1和test2的程序猿只需关注自己项目的业务功能，公共的common有更新时，执行命令npm install common就可以了。

不过这个方案的问题，频繁改动common包时，test1和test2需要频繁更新common包的引入。

方式4：本地服务器打包（ssr私有项目推荐）

在写好的common中的package.json修改版本号例如：

  "version": "0.2.2",

然后进行打包： npm pack 然后会生成一个tgz的压缩文件，将这个文件放到自己服务器。 在test1和test2中引入即可

"common": "服务器地址/gcj-common-web-0.2.2.tgz",

4.使用组件

在需要的地方引入组件

<header></header>
content
<footer></footer>
import { header,footer } from 'common'
export default {
  name: 'Home',
  components: {
    header,footer
  }
}