制作一个简单的Vue组件库

模版结构：

build/                   // build
component/               // 组件
  |- index.js
  |- components.js       // 引入组件列表
  |- package/
     |- pa-input/        // 测试组件
        |- index.js         |- 导出组件
        |- src/             |- 组件模版
  |- ...
src/                     // 开发目录
  |- main.js
  |- assets/
  |- style/
  |- ui/
  |- page/
  |- main.js
package.json

组件基础结构解释

组件都存放于component/package/文件夹内，而组件文件夹内有src文件夹和index.js文件，index.js文件内容如下：

import PaInput from './src/index.vue';

// 读取同级 src/ 下的组件后，定义组件 install 方法

PaInput.install = function(Vue) {
    Vue.component(PaInput.name, PaInput);
};

export default PaInput;

组件文件夹下的src/文件夹内存放js、vue、scss三个文件，而vue文件则需要引入对应的js和scss文件，模版开发使用的则是Vue原生写法：

export default {
    name: 'PaInput',
    components: {
    },

    props: {
    },

    data() {
        return {}
    },

    created() {
    },
    ......
}

注册组件

当组件创建完毕，即可在component/components.js文件中引入并注册该组件：

import packages from '../package.json';
// components
import Input from './package/pa-input';

const version = packages.version;
const components = [
    Input
];

// 循环将组件(名字为component.name)注册到 Vue component 中
const install = function (Vue, opts = {}) {
    components.map(component => {
        Vue.component(component.name, component);
    });
};

// 判断window中是否有Vue，有则直接注册组件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
};

// 此方法导出的组件名字在js中单个注册时需要引入的名字是Input，而在html中组件名为Input.name 
//eg:import { Input } from '../packages';
//在html需要用Input.name作为组件名字
export {
    version,
    install,
    Input
};

---

开发并测试组件

该组件库模版中集成简易开发目录src/page/，在开发组件时，即可在页面中进行开发和测试，用法跟我们目前项目中的方式一样，进入开发：

yarn dev

---

发布组件库并在项目中安装

发布流程请参考之前的文章《私有Npm包发布流程》

---

项目中注册组件

在安装好发布的组件包后，可在各项目中的页面直接独立引用对应组件：

import { Input as PaInput } from 'component/index.js'
export default {
    name: 'PaInput',
    components: {
        PaInput
    }
    ......
}

全局注册组件

ui/文件夹下新建一个对应的库引用文件，然后按需进行全局引用(ui-test你的组件库名)：

import Vue from 'vue'
import {
    Input
} from 'ui-test'

Vue.use(Input)
// 或
// Vue.component('pa-input', Input)

全组件注册

如果组件库中的所有组件都需要使用，则可以简单地全组件注册，无需一个个组件进行注册，

import UiTest from 'ui-test'

Vue.use(UiTest)

// 注意：此方法会使用组件库内的原生组件名称

---

知识点与其他要注意的：

• install，具体可参考https://cn.vuejs.org/v2/guide/plugins.html#开发插件
• 额外学习点：试着去制作一个简单的UI组件库，并从中找到缺少的某些功能 (๑•̀ㅂ•́)و✧