博客

第一步：使用vue脚手架初始化项目

第二步：创建package文件夹，我们之后写的自定义组件就放在package下，并且提供一个统一的入口。

第三步：编写组件库入口文件的代码。

根据使用element-ui的经验，组件的引入有两种方式

一、在main.js中导入组件库,并且使用Vue.use()方法将组件挂载在全局对象上。

import ElementUI from "element-ui";

Vue.use(ElementUI);

vue.use方法会调用install方法（这个方法的第一个参数是

Vue

构造器，第二个参数是一个可选的选项对象）。所以我们需要在入口文件中导出一个install方法，在install方法中将组件注册到Vue上。

package/index.js

import Button from "./Button.vue";

const install = (Vue) => {
  Vue.component(Button.name, Button); // 注册组件
};

export default {
  install,
};

二、直接使用<script></script>标签引入组件。为了兼容这种写法，我们还需要加上一下代码。

package/index.js

if (window.Vue !== undefined) {
  install(window.Vue);
}

package/index.js完整代码

import Button from "./Button.vue";

const install = (Vue) => {
  Vue.component(Button.name, Button); // 注册组件
};

if (window.Vue !== undefined) {
  install(window.Vue);
}
export default {
  install,
};

第四步：使用组件库

main.js

import Vue from 'vue'
import App from './App.vue'
import djUI from "./package";

Vue.config.productionTip = false;

Vue.use(djUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <dj-button></dj-button>
  </div>
</template>

效果