如何实现一个vue的element ui库?

一、教你如何实现一个UI库： uab-ui

本 UI 库参考了线上活跃度与使用频率较高的一些成熟 UI 框架 如： Element UI 、 Ant Design 、iView UI 、Bootstrap 可学习更高层次的代码原理与规范。

GitHub地址	npm地址
uab-ui	uab-ui

二、UI库代码实现逻辑

1.uab-ui库目录介绍

.
├── dist                      打包后的UI库压缩代码 用于npm安装引入使用
│   ├── uab-ui.css            UI库的所有 css 样式 
│   └── uab-ui.umd.min.js     UI库打包后的 js 代码
├── docs                      UI库说明文档使用 vueperss 运行：yarn run docs:dev
│
├── src                       开发目录
│   ├── button                button 组件样式代码
│   │   └── button.vue        单个 button 组件样式代码
│   │   └── button-group.vue  button 组样式代码
│   ├── ...                   各组件样式代码
│   ├── demo.vue              开发测试时效果展示 运行：yarn run serve 
│   ├── main.js               开发测试时 vue 入口文件
│   └── index.js              UI库打包入口文件 支持全局引入与部分引入
|
├── tests                     项目测试用例文件夹 运行： yarn run test
├── .npmignore                npm提交忽略文件
├── .travis.yml               travis-ci 自动化部署配置文件
├── deploy.sh                 自动化打包 vueperss 文档分支gh-pages的 Shell 脚本 运行：yarn run deploy
├── karma.conf.js             测试用例配置
├── package.json              项目依赖管理
├── vue.config.js             项目打包配置文件 运行：npm run build
└── README.md                 项目 GitHub 首页说明文档

2.模仿编写一个button组件

<template
<!-- 通过传入的属性 iconPosition 改变class样式达到不同的效果 -->
<button class="u-button" :class="`icon-${iconPosition}`" @click="$emit('click')">
  <!-- 通过传入的属性 loading 设置button按钮的加载中状态 -->
  <u-icon v-if="loading" class="icon loading" :name="icon"></u-icon>
  <!-- 通过传入的属性 icon 给button设置不同的icon图标 -->
  <u-icon v-if="icon && !loading" color="dark" class="icon" :name="icon"></u-icon>
  <div class="u-button-content">
    <!-- 通过插槽 给button设置不同的内容 -->
    <slot/>
  </div>
</button>
</template>

<script>
import Icon from '../icon/icon.vue' //引入icon图标

export default {
  name: 'UButton',                  //作用于引入组件名：Vue.component(Button.name, Button)
  components: {
    'u-icon': Icon
  },
  props: {
    icon: {},
    loading: {
      type: Boolean,
      default: false
    },
    iconPosition: {
      type: String,
      default: 'left',
      validator(value) {
        return value === 'left' || value === 'right'
      }
    }
  }
}
</script>

使用:

<u-button icon="dynamic-filling" class="bg-gray" iconPosition="right" loading>按钮</u-button>

3.组件的全局引入与部分引入

import { default as Button } from "./button/button.vue"
const components = [ Button ]          //存放多个组件
export const version = "1.0.0"         //版本号通过：import { version } from "uab-ui" 获取
export { Button }                      //此导出通过：import { Button } from "uab-ui" 引入

export default function install(vue) { //此导出通过：import uab from "uab-ui" 引入
  components.forEach((component) => {  //forEach循环将所有组件挂载到vue全局组件
    vue.component(component.name, component)
  })
}

三、发布到 https://用户名.github.io/库名

发布到 https://用户名.github.io/库名其实给ui库项目创建GitHub Pages官方文档网页

1. 通过vuepress打包项目文档发布到gh-pages分支上 (gh-pages分支名随便)
2. 进入GitHub 进入该项目的settings 设置github pages 需要展示的文档Branch为gh-pages分支， 入口文件选中root，最后save保存项目文档即可成功上线！
   创建 GitHub Pages 详情在我的另一篇文章中

四、发布到npm

1. 首先在 npm官网 注册npm用户
2. 将本地npm源设置为https://registry.npmjs.org

   npm config set registry https://registry.npmjs.org  //使用官方镜像 (若为淘宝源则登陆不成功)
   npm config get registry                             //查看npm源地址
   

3. 进入项目根目录执行命令npm publish将打包后的文件发布到npm官网

   npm publish  //每次publish之前需要更新pakage.json中的版本号，否则版本相同则报错
   

   若没登入执行npm login输入用户名、密码和邮箱登入，成功后即可前往npm官网查看