仿 ElementUI 搭建自己的 vue 组件库
- 一、创建 my-ui-can 项目
- 1. 新建项目
- 2. 自定义组件
- 3. 创建 MyButton 组件
- 4. 导出组件
- 5. package.json
- 二、发布到 npm 仓库
- 1. npm 账号注册（忽略）
- 2. 发布 my-ui-can
- 二、项目引用 my-ui-can 依赖包
- 方式一：全局引入
- 方式二：局部引入
功能描述：仿 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 组件
<!-- button.vue -->
<template><buttonclass="my-button"@click="handleClick":disabled="disabled":autofocus="autofocus":type="nativeType"><span v-if="$slots.default"><slot></slot></span></button>
</template>
<script>export default {name: 'MyButton',inject: {},props: {size: String,nativeType: {type: String,default: 'button'},loading: Boolean,disabled: Boolean,autofocus: Boolean},methods: {handleClick(evt) {this.$emit('click', evt);}}};
</script>
// 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)
方式二：局部引入
<template><MyButton>222</MyButton>
</template>
<script>
import MyButton from 'my-ui-can/lib/button'
export default {name: 'App',components: {MyButton}
}
</script>
