仿 ElementUI 搭建自己的 vue 组件库

功能描述：仿 ElementUI 组件库的方式创建 一个 my-ui-can 的组件库（简单版，支持按需加载，只有 MyButton 组件）。

一、创建 my-ui-can 项目

1. 新建项目

vue create my-ui-can

2. 自定义组件

项目目录如下：

my-ui-can/
├── dist/
├── lib/
│ ├── button/
│ │ ├── src/
│ │ │ └── button.vue
│ │ └── index.js
│ └── index.js
│── package.json
└── vue.config.js

3. 创建 MyButton 组件

// lib/button/index.js
import MyButton from './src/button';

/* istanbul ignore next */
MyButton.install = function(Vue) {
  Vue.component(MyButton.name, MyButton);
};

export default MyButton;

4. 导出组件

// my-ui-can/lib/index.js
import Button from './button/index.js';

const components = [
  Button
];

const install = function(Vue, opts = {}) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};

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

export default {
  version: '0.1.0',
  install,
  Button
};

5. package.json

{
  ....
  "name": "my-ui-can",
  "version": "0.1.0",
  "main": "lib/index.js",
  ...
}

二、发布到 npm 仓库

1. npm 账号注册（忽略）

不知道怎么操作的，可以参考 npm 账户注册

2. 发布 my-ui-can

npm config set registry https://registry.npmjs.org/
npm login
npm pulish

二、项目引用 my-ui-can 依赖包

npm install my-ui-can

方式一：全局引入

// main.js
import MyUI from 'my-ui-can'
Vue.use(MyUI)

方式二：局部引入