乐趣区

关于前端:创建一个UI组件库以及生成组件文档

jiezi

自己技术不精，轻易玩玩，仅供参考，文章开端提供残缺源码。

集体认为，当初市面上的组件库太多了，其实是不须要咱们本人去建的，轻易拿进去一个都能够满足根本开发需要，如果想要玩一玩的能够试着本人搭建一个。

首先简略一点，应用 Vue-cli 搭建一个我的项目构造。
为了能随时看到成果，咱们默认将 src 作为援用组件的入口，用来调试组件成果；还须要创立一个 components（名字随便）文件夹用来寄存组件。目录构造如下

├─node_modules
├─public
├─components // 寄存组件
├─src  // 援用组件
    ├─components
    ├─assets
    ├─App.vue
    ├─router.js
    ├─index.js  // 自建文件，引入组件库
    └─main.js
├─babel.config
├─package.json
└─README.md

接下来，就正式进入搭建组件环节

1. 创立组件目录
咱们以 button 组件为例，为了款式能够按需引入，以及使用者能够不便批改款式，咱们把 css 拿进去独自编写，当然如果你只是为了编写一个组件供多数人应用，也能够间接写在.vue 里，一个组件蕴含以下文件:

├─components 
  ├─style  // 款式文件
      ├─index.scss  // 全局款式
      ├─base.scss  // 共用款式
      └─button.scss  // 独自组件款式
  └─button // 组件文件
      ├─index.js // 独自打包文件
      └─src
        ├─main.vue  // 编写组件
        └─myBtn.md // 显示示例

2. 编写组件
在 main.vue 写一个组件，代码如下

<template>
  <button @click="btnClick" :class="['btn',`btn-${type}`]">
    <!-- 插槽 -->
    <slot></slot>
  </button>
</template>
<script>
export default {
  name:'myBtn',
  props:{
    // `medium` / `small` / `mini`
    size:{
      type:String,
      default:'medium'
    },
    // `primary` / `success`
    type:{
      type:String,
      default:'primary'
    }
  },
  methods:{btnClick(){
      // 这是点击事件
      this.$emit('点击')
    }
  }
}
</script>

通过 :class=”[‘btn’,btn-${type}]” 对传入的不同类型的按钮进行款式更改

在 style 文件夹对应的 scss 里写一些款式，代码如下：

.btn{
    width:150px;
    height: 40px;
    border:none;
    font-size:16px;
    color:#fff;
}
.btn-primary{background:blue;}
.btn-success{background:green;}

在 index.js 里对组件进行注册，代码如下：

import Mybtn from "./src/main.vue"

Mybtn.install = function(Vue) {Vue.component(Mybtn.name, Mybtn);
};

export default Mybtn;

3. 应用组件
当初一个组件就实现了，咱们来应用一下看看成果
在 main.js 引入组件及款式（我这里全局引入，也能够按需引入）

import Vue from 'vue'
import App from './App.vue'


import {Mybtn} from "./index.js"
import "../components/style/index.scss";

Vue.use(Mybtn)

Vue.config.productionTip = false

new Vue({render: h => h(App),
}).$mount('#app')

能够在 App.vue 应用一下

<template>
  <div id="app">
   <Mybtn > 惯例按钮 </Mybtn>
   <Mybtn type='success'> 胜利按钮 </Mybtn>
  </div>
</template>

<script>
export default {name: 'App',}
</script>

<style>

</style>

一个按钮组件就进去了

4. 生成组件库文档

组件实现后，为了用户能够更直观的应用，就须要创立组件文档了，我应用的是 @Vuese/cli, 很简略易用，具体装置教程参考文档 @vuese/cli
装置实现后，执行 vuese gen
此时，根目录就会呈现【website】目录，你的组件文档就生成了，目录如下
website
├── index.html
├── components
├──├── myBtn.md
├──├── HelloWorld.md

这里要标记重点了！！其实我只建了一个 myBtn 的组件，然而目录却进去了两个，这是因为 vuese 会自动识别.vue 后缀文件, 咱们能够规定一下他的生成门路

官网：vuese 会在命令的运行目录搜寻 vuese.config.js 或 .vueserc 或者是 package.json 文件的 vuese 属性

所以咱们在根目录下新建一个.vueserc，给它配置一下

{
  "include": ["./components/**/*.vue" // 指定被生成的.vue 文件],
  "title": "组件文档",  // 组件题目
  "genType": "docute"  // 组件类型
}

删掉 website（目录下已有文件从新打包的时候不会主动删除，所以倡议删掉从新生成一份）, 执行 vuese gen，这个时候就只有一个 myBtn 了，重新启动后，组件文档就进去啦，太不便了，页面如下：

还有一个问题须要留神：生成的文档是没有首页的，如果你点击题目，能够看到路由变成了’/‘，页面显示 404，这个时候，就须要咱们手动加一个首页了，很简略，咱们在 website 目录下手动写一个 README.md 文件，（文件名肯定是 README！），打包文档的时候会自动识别为路由’/’，目录如下：
website
├── index.html
├── README.md
├── components
├──├── myBtn.md

README.md 就轻易写

# 文档阐明
这是首页

这个时候再看一下

5. 实现组件文档可预览, 并且对整个组件进行打包
vuese 只能生成一个纯文档，只有大片大片的文字，没有组件预览成果，以及应用示例，咱们只能手动增加了，还记得咱们一开始留了一个放组件预览的中央!

预览实现过程：

  • 因为文档每次打包的时候，内容都会从新生成一遍，即便给它手动增加了预览代码以及事件动作，它也会在从新打包后回到原来的内容，这种形式显然不可取 ×
  • 所以咱们预留一个独自写预览性能的 md 文件，在执行 vuese gen 文档打包的时候，利用 gulp 将两个 md 文件合并，这个时候，就是既有预览，又有组件了。

因为一开始没有找到很全的参考资料，不是短少预览，就是打包太随便，所以我在做打包和预览的时候，参考交融了这两篇文章的内容，组件预览性能、打包性能（大家能够点进去看看，作者的打包过程写的很具体）造成了一个比拟全面的组件全流程，因为文章里都很具体，我这里就不多介绍实现过程了，至于交融怎么做，能够戳文章底部的我的 github 看看。

  • 事件和款式一起增加到文档里
    咱们能够在 website 目录外，新建一个 index.html, 引入款式及 js，再把这个新建的 index.html 将 website 文件夹里的 index.html 替换掉（同样 gulp），这个时候，文档性能就曾经很全了。
    此时的目录构造
    根目录
    ├── website
    ├── gulpfile.js // 新增
    ├── document // 新增目录
    ├──├── index.html // 新建文件

此时启动文档页面

到当初，一个残缺的组件性能流程就进去了
打包和公布我会从新写一篇文章

残缺示例戳 github
github 地址

退出移动版