一、开发组件

开发组件的过程并无特殊之处,跟平时在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>

Logo

前往低代码交流专区

更多推荐