Vue组件打包成库和使用库的方法

一、开发组件
开发组件的过程并无特殊之处，跟平时在Vue项目里定义component是一样的。有一点需要注意的是，平时在Vue项目里，组件的name可以不写，但如果要打包成库，组件的name必须写。为了描述方便，我们把将要打包的组件定义为MyCom1、MyCom2。其示例代码如下：

<template>
  <div>
  </div>
</template>
 
<script>
export default {
  name: "MyCom1",
};
</script>

二、定义install方法
Vue引用组件使用Vue.use方法，此方法会调用组件的install方法，所以需要定义组件的install方法。可以在项目中新建一个文件夹，例如命名为lib，然后在此文件夹中添加各个组件的install方法定义。例如，新建MyCom1Install.js，内容如下：

import MyCom1 from "../src/MyCom1.vue";
function install(Vue) {
    Vue.component(MyCom1.name, MyCom1);
}
export default install;

三、定义打包入口文件
当有多个组件时，需要有一个入口文件引用这些组件。例如，同样在lib文件夹下，添加一个lib.js，内容如下：

export { default as MyCom1 } from "./MyCom1Install";
export { default as MyCom2 } from "./MyCom2Install";

四、package配置
package配置需要做两件事件，但首先，我们要确定这个包的名称，例如为mycom。生成lib的脚本如下所示：

vue-cli-service build --target lib --name mycom lib/lib.js
完成之后，在工程的dist文件夹下，将生成以下文件：

 这些文件有不同的应用场合，我们需要用到的，其实就只有.umd.min.js和.css两个文件。由于有多个文件，需要在package中指明我们要用的是哪个，所以需要在package中加入：

"main": "dist/mycom.umd.min.js",
package完整修改内容如下：

{
  "name": "mycom",
  "version": "0.1.0",
  "private": true, //如果要上传npm，就为false
  "main": "dist/mycom.umd.min.js",
  "scripts": {
    "build:lib": "vue-cli-service build --target lib --name mycom lib/lib.js"
  },
  ...其他无关内容
}

五、打包
打包的话就没什么好说的了，

yarn build:lib 或者

npm run build:lib

结束之后，可以上传到npm，也可以复制相关内容到需要引用组件项目的node_modules文件夹中。如果要复制，需要复制以下内容：

mycom
  package.json
  dist
    mycom.umd.min.js
    mycom.css

六、使用组件库
在main.js中，加入对组件的引用：

import { MyCom1,MyCom2 } from "mycom";
import "mycom/dist/mycom.css";
 
Vue.use(MyCom1);
Vue.use(MyCom2);

然后在Vue页面中，像其他组件一样引用即可：

<template>
  <div id="app">
    <MyCom1 />
    <MyCom2 />
  </div>
</template>
 
<script>
export default {
  name: "App",
};
</script>

————————————————
版权声明：本文为CSDN博主「还是叫明」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lweiyue/article/details/120064122