模仿 element-UI 搭建 Vue UI组件库（一）

实例目的

1. 掌握组件封装的语法和技巧
2. 学会造轮子，了解组件库实现原理
3. 搭建和积累自己的组件库

实例内容

封装常见的功能性组件（button、Modal、Form相关）。把组件封装成 UI 组件库，并发布到 npm 上。

涉及知识

• vue 基础语法
• 组件基本语法
• 组件通讯（sync，provide，inject）
• 插槽的使用
• props 校验
• 过渡与动画的处理
• 计算属性、监听属性
• v-model 语法糖
• vue 插件机制
• npm 的发布

使用 vue cli 初始化一个项目

使用 vue created wyh-ui，创建一个名为wyh-ui的项目。

按照自己的习惯设置脚手架风格.

脚手架搭建完毕后，将 App.vue 文件下的自带内容清理一下，为后续开发做准备。

封装、注册及使用组件

在 component 下创建 Button.vue 放置相关代码，并且指定其 name 属性。

<template>
  <button class="one-button">
   按钮组件
  </button>
</template>
<script>
export default {
  name: 'wyhButton'
}
 
</script>
<style lang="scss">
</style>

创建组件完成后，到 main.js 中进行注册。

// 第一步：导入button组件
import wyhButton from './components/button.vue'
// 第二步：注册组件并配置
Vue.component(wyhButton.name, wyhButton)

注册完成，在项目中使用：

<template>
  <div>
    <wyh-button></wyh-button>
  </div>
</template>

至此，组件简单的封装、注册和使用介绍完毕。