基于vue的ui组件库开发—— 01

前言

随着重复项目的增多，通用组件在前端开发中越来越重要了，开发者更细分、聚焦于组件层面的开发，然后像搭积木一样完成应用功能。组件库可以统一管理组件，输出文档，能提升组件复用性、避免重复造轮子。

背景

为什么要搭建属于团队自己的组件库？

每个公司或者细化到团队都有属于自己的ui特性，例如（华为习惯用红色，平安习惯用橙色）。我们在利用开源的ui库的时候，免不了需要二次开发。正好团队最近在一些通用的机器人会话相关的产品，需要提供给集团下各个系列公司统一的样式、布局规范以接入，还需要统一扩展基础组件的能力。于是组件库的需求的就这么出来了！目前是以 vue2+webpack 的为基本框架来开发，后期我们将升级到vue3+vite的框架。

1. 项目基础架构搭建

刚开始开发组件库，我们肯定是要建起项目的基础架构，既然是vue2 为基本框架，那自然是通过vue-cli 来构建项目了。

// 全局安装@vue/cli
npm install -g @vue/cli

// 创建基础项目,并选择vue2模板
vue create llz-ui

此时停笔思考：基础的vue脚手架搭建完成，接下来我应该干什么？我们的目的是要构建一个组件库，并且这个组件库需要提供给我们自己的前端工程项目引用，并且可以全局生效，此时脑海中大概有了一个思路：通过一个目录文件管理所有的ui组件，然后将这些组件统一提供一个出口，使之可以全局注册到前端项目中。这不就是我们平时引用第三方组件库时候的做法吗？OK，可以先看下我的项目目录结构：

llz-ui
├─ .browserslistrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ README.md
├─ babel.config.js
├─ components
│  ├─ button
│  │  ├─ button.vue
│  │  ├─ index.js
│  │  └─ index.less
│  ├─ icon
│  │  ├─ fonts
│  │  │  ├─ wbs-icon.svg
│  │  │  ├─ wbs-icon.ttf
│  │  │  ├─ wbs-icon.woff
│  │  │  └─ wbs-icon.woff2
│  │  ├─ icon.vue
│  │  ├─ index.js
│  │  └─ index.less
│  ├─ index.js
│  ├─ index.less
│  ├─ nav-bar
│  │  ├─ index.js
│  │  ├─ index.less
│  │  └─ nav-bar.vue
│  └─ style
│     ├─ base.less
│     ├─ hairline.less
│     ├─ theme.less
│     └─ utils.less
├─ demo
│  ├─ App.vue
│  ├─ assets
│  │  └─ logo.png
│  ├─ main.js
│  └─ modifiyStyle.less
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ index.html
└─ vue.config.js