基于 vue3.0 从 0-1 搭建组件库（一）

2022-12-07 22:41:21

初衷

其实之前使用 vue2 的时候就想写个开源组件库，学习交流使用。如果公司有自己的需求也可以快速上手。开始想的是能在网上找到好的教程，环境搭建 - 组件编写 - 单元测试 - 文档编写 - 打包发布，但是没有很完善的，慕课网有个 react 组件库的教程，storybook 编写文档的，vue3 的有个组件库教程是写配置表单的。实在网上找不到资料了，没办法就自己写嘛，没有困难制造困难也要上。网上也是找了一些资料指导，再配合开源的 element-plus 和 element3 组件库，想把自己的学习经验和大家分享下，不一定全对，也会有一些问题，主要是和大家一起学习，大家有什么好的意见我也会融合进来，对自己也是提升。

day-ui

目前就简单写了两个组件，样式没有自己写，使用的 element-plus 的 scss 文件。内部逻辑都是参考一点点写的，更好的理解组建的实现和 vue3 的语法，因为我在公司英文名叫 day，就叫 day-ui 了。

npm（不知道为什么会有下载量????，我的名难道误导别人了？）

github地址

文档github地址

文档在线访问

如果您感兴趣的话，欢迎给个 star 关注哈，后面计划把每个组件的实现原理都写出来，知其所以然。

环境搭建

我们直接使用 vue-cli 搭建项目框架，因为要用到 vue3 ，得先把 vue-cli 的版本升级到 vue-cli@4.5 以上。

npm install -g @vue/cli

创建新项目

vue create xxx

为什么使用dart-scss

按照提示可以启动项目，如果报依赖问题，可以删除 node_modules，重新安装

配置 `prettier`

在项目根目录创建 .prettierrc.json 文件

{
  "singleQuote": true, // 使用单引号
  "semi": false, // 不用分号
  "trailingComma": "none" // 最后一个元素不加逗号
}

我们打开 vscode 的设置，配置保存格式化。如果想 vscode 所有项目都有这个功能，可以选用户，我这里选择工作区，当前项目，不影响其他项目结构格式化

根目录会创建一个 .vscode/setting.json 文件,

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode" // 添加
}

如果发现有如下异常：

参考文章

环境搭建

我们不是做 vue 项目，可以把 src 目录删除，创建 examples 目录，用来测试写的组件；创建 packages 目录存放我们自己写的组件。

main.js 和 App.vue 代码和之前 src 目录下的一致

根目录新建 vue.config.js 修改配置

const path = require('path')
const join = path.join

function resolve(dir) {
  return path.resolve(__dirname, dir)
}
module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js', // 运行入口
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        packages: resolve('packages'),
        assets: resolve('examples/assets'),
        views: resolve('examples/views')
      }
    }
  },
  chainWebpack: (config) => {
    config.module.rule('js').include.add('/packages').end()
  }
}

npm run sreve 正常启动项目

引入全局样式文件

可以直接把 element-plus 的项目下载下来，样式文件放在 element-plus/packages/theme-chalk/src/ 目录下。在根目录创建 styles 目录，把样式文件拷贝进去。

因为我们组件库叫 day-ui，所以样式文件也是使用 d- 开头，修改 styles/mixins/config.scss

$namespace: 'd';
...

得到的目录结构如下：

- examples
   - example // 组件使用demo
      - button.vue
   - App.vue
   - main.js
- packages // 组件包源码
   - button
      - __tests__ 组件的单元测试
         - button.spec.js
      - src
         - index.vue
      - index.js // 单组件入口
   - index.js // 入口
- styles // 组件样式
- typings // 组件的类型

文档初始化

开始想使用 vitepress 搭建文档，在 GitHub 找到了现成的脚手架工具 vitepress-for-component，地址, 大家也可以直接看官网快速上手

安装脚手架

yarn create vlib

安装依赖

npm i 或者 yarn

可能遇到以下问题

可能作者的开发平台不同，当然这个包对项目的启动，打包没有影响，所以我们可以忽略，在依赖中删除，在执行安装。

启动项目

使用 github 访问

在 github 上创建一个和文档项目名一致的仓库名，会有静态资源访问

把文档项目上传

仓库中找到 settings 菜单找到如下：

我们直接点击 choose a theme 选中随便一个主题，github 会自动创建 gh-pages 分支

配置网站

前面的换成你自己的名字，格式是 name.github.io/仓库名

点击网址成功打开