从0开始搭建个人组件库站点（全流程）

一、简述

在前端开发工作中，我们最常用到的UI组件库有elementui、ngzorro等等，这些组件库的特点是易学好用，但是基于公司的业务实际需要，总有不能完全满足需求的场景，那如果我们能够自己写一套UI组件库，不仅仅是日常工作的积累，能够满足工作需要，还能提高自己的技术水平。
在慕课网学了一遍玩转组件库搭建全流程的教程之后，将搭建过程记录一下，现在只是一个card卡片示例，可以不断补充开发新组件，不断完善组件库站点。
内容较多，耐心一点，按照步骤搭建，相信会有收获。
1、搭建过程主要包括以下4个步骤：

• 组件设计开发；
• 组件打包；
• 组件发布至npm；
• 搭建组件库文档站点以供查阅使用；

2、涉及到的技术点包括以下几个方面：

vue、webpack、gulp、npm、vuepress、github、github pages、github.io

二、组件开发过程

1、创建vue项目

vue create iray-ui

2、修改项目结构

由于组件是项目重点，因此将components移至根目录下，src目录为避免用户引起重要性的误解，重命名为examples

3、新建vue.config.js

新建vue.config.js，修改入口配置，如下：

4、components文件夹设计

• 建立css文件夹和lib文件夹
• css文件夹用于存放样式文件
  
• lib文件夹用于存放各个组件，并建立主index.js导出全部组件
  
  components/lib/index.js代码如下：

import Demo from './demo'
import Card from './card'

const components = {
   
    Demo,
    Card
}
const install = function (Vue) {
   
    if(install.installed) return;
    Object.keys(components).forEach(key => {
   
        Vue.component(components[key].name,components[key])
    })
}
const API = {
   
    install
}
export default API;

5、卡片组件开发

每建立一个组件，在components/lib下建立相应文件夹，以card为例：
建立card/src/main.vue和card/index.js两个文件，
card目录如下：

/components/lib/card/main.vue内容如下：

<template>
  <div class="m-card" :style="width ? {width: width + 'px'} : {}">
    <div class="m-card-img" :style="imgHeight? {height:imgHeight+'px'}:{}">
        <img :src="imgSrc" alt="img" />
    </div>
    <div class="m-card-summary" v-if="summary">
      {
   {
   summary}}
    </div>
    <div v-else class="m-card-summary">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
   
    name:'m-card',
    props: {
   
      width: {
    //卡片宽度
        type:Number,
        default:0
      },
      imgSrc: {
    //卡片图片资源
        type:String,
        default: