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

超、凢脫俗 2023-01-02 04:20 107阅读 0赞

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

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

<table> 
 <thead> 
  <tr> 
   <th>GitHub地址</th> 
   <th>npm地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://github.com/shunyue1320/uab-ui" rel="nofollow">uab-ui</a></strong></td> 
   <td><strong><a href="https://www.npmjs.com/package/uab-ui" rel="nofollow">uab-ui</a></strong></td> 
  </tr> 
 </tbody> 
</table>

![7c9c95b03d01fd6d23151ec993d4d52b.png][]

# 二、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
    
    <button class="u-button" :class="`icon-${iconPosition}`" @click="$emit('click')">
      
      <u-icon v-if="loading" class="icon loading" :name="icon"></u-icon>
      
      <u-icon v-if="icon && !loading" color="dark" class="icon" :name="icon"></u-icon>
      <div class="u-button-content">
        
        <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/库名][uab-ui] #

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

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

# 四、发布到npm #

1.  首先在 **[npm官网][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官网查看  
    ![0bb69cd60ea244845e3f70a20c149b5a.png][]

[uab-ui]: https://shunyue1320.github.io/uab-ui/
[7c9c95b03d01fd6d23151ec993d4d52b.png]: /images/20221120/871a641c1af74852984a61fc43b1632b.png
[GitHub Pages]: https://juejin.cn/post/6897511240143699975
[npm]: https://www.npmjs.com/
[0bb69cd60ea244845e3f70a20c149b5a.png]: /images/20221120/8031eeaa44a24ce480cfcaa16f3de3c8.png