前言

对于一个成熟的公司而言（前端组人数大于5人），一个成熟的前端架构必然需要一个私有的组件库，并不是为了替代第三方，比如我司在用的iview，而是相辅相成；第三方优点在于零成本+无需关心维护问题；而私人库在于两点：

具有特色的组件封装以提升开发效率：类似功能开箱即用，不存在但通用功能封装上传；
项目组织内部的信息互通以节省时间成本（不止前端）：前端可以快速查询而不是去询问相关编写人员，产品可以查阅文档以统一网站风格；

其作用不言而喻，而实现主要在于两点：

组件库文档的公开性和易操作性
要文档，得先有个公共基础组件库

本文将记录组件库搭建构架的全过程，实现结果：一个类element易扩展的组件库及配套文档；那就让我们开始吧

构建篇

公共基础组件库的开发

通过`Vue-Cli`初始化项目

目录结构配置

│  .browserslistrc # 兼容版本
│  .gitignore
│  babel.config.js # babel的配置文件
│  package-lock.json
│  package.json
│  README.md      
├─public
│      favicon.ico
│      index.html 
├─src
│  │  App.vue 
│  │  main.js
│  │  
│  ├─packages # 需要打包的组件
│  │      button.vue
│  │      icon.vue
│  │      index.js # 所有组件的入口
│  │       
│  └─styles # 公共样式
│          _var.scss      
└─tests # 单元测试
    └─unit
            button.spec.js

编写插件入口

开发组件文档

组件文档采用vuepress进行开发，跟着官网一步步走就好（也可以跟着我下文的步骤来，以免踩坑），强调一下，iview那种上预览下代码的效果需要自己实现，本人已经实现，不介意可以直接食用；

(1).安装

npm install vuepress -D

(2).配置scripts

{
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
}

(3).初始化docs

增加入口页面README.MD

---
home: true
actionText: 欢迎 →
actionLink: /components/button
features:
- title: 搭建自己的组件库
  details: 从0搭建自己的组件库
---

(4).配置导航

增加config.js

module.exports = {
    title: 'zhu-ui', // 设置网站标题
    description: 'ui 库', //描述
    dest: './build', // 设置输出目录
    port: 1234, //端口
    themeConfig: { //主题配置
        nav: [{
                text: '主页',
                link: '/'
            }, // 导航条
        ],
        // 为以下路由添加侧边栏
        sidebar: {
            '/components/': [{
                    collapsable: true,
                    children: [
                        'button'
                    ]
                }
            ]
        }
    }
}

(5).初始化配置文件 `.vuepress`

enhanceApp.js

安装包

npm install element-ui highlight.js node-sass sass-loader --save

link组件库
```
npm link zhu-ui
```

import Vue from 'vue';
import Element from 'element-ui'; // 引入elementUi
import 'element-ui/lib/theme-chalk/index.css'

import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css' //样式文件

import zhuUi from 'zhu-ui' // 要编写对应的文档的包
import 'zhu-ui/dist/zhu-ui.css'
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})
export default ({
  Vue,
  options, 
  router,
  siteData
}) => {
  Vue.use(Element);
  Vue.use(zhuUi)
}

使用篇

上文讲的是基本结构构建，那么作为一个项目组内的前端，我该怎么上传自己日常封装的组件呢？

1. 新建组件：在components下新建组件.vue文件

接下来是不是要进行import引入呢？明确告诉你，不需要，这里本人做了一层优化，采用webpack的新语法require.context进行批量注册，components下的所有.vue文件都会被安装为全局组件（cool!），组件名就是我们在组件内定义的name属性

简言之，新建组件两步走

新建文件
文件内name属性赋值，其值为全局组件名

2. 进行自测（chai）test文件下可进行自测（自行决定写不写）

这个就自行决定要不要写啦，毕竟写是情分，不写是本分，前端日常开发还是很忙的撒

3. 撰写文档

【本地由文档仓库为前提】

以button为例

在.vueoress文件夹下新建预览组件，编写预览代码

<template>
  <div>
        <h1>按钮类型</h1>
        <dj-button iconPosition="left" type="warning">默认按钮</dj-button>
        <dj-button iconPosition="right" type="primary">默认按钮</dj-button>
        <dj-button iconPosition="right" type="danger">默认按钮</dj-button>
        <dj-button iconPosition="right" type="default">默认按钮</dj-button>
        <dj-button iconPosition="right" type="success">默认按钮</dj-button>
  </div>
</template>

在components文件夹下新建md文档，此文档相当于组件对应页面，编写页面展示内容

slot source内写组件展示内容
slot highlight内写源码

# Button组件
常用的操作按钮。
## 基础用法
基础的按钮用法。

<demo-block>
::: slot source
<button-test1></button-test1>
:::

使用type属性来定义 Button 的样式。

::: slot highlight
```html
<div>
    <dj-button>默认按钮</dj-button>
    <dj-button type="primary">主要按钮</dj-button>
    <dj-button type="success">成功按钮</dj-button>
    <dj-button type="info">信息按钮</dj-button>
    <dj-button type="warning">警告按钮</dj-button>
    <dj-button type="danger">危险按钮</dj-button>
</div>
```
:::
</demo-block>

到此，就可以查看效果啦

一个UI组件库的诞生：DUOJI-UI

前言

构建篇