从零打造 Vue3 组件库全攻略 | 支持按需引入

青山依旧
2,458 阅读3分钟

概述

soul-plus 是一个基于 Vue3 的移动端UI组件库，开发模式类似 vantUI 和 elementUI，支持按需引入。

组件代码简单易懂。想学习编写组件库的同学们记得往这里康康，喜欢的 gitee 给个小星星鼓励鼓励 ~

组件库官网
组件库Git地址

WeChat534c2256a951f77251f78cb997235b1a.png

项目结构

packages 目录中开发各项组件，在 src 页面引入组件查看页面效果。docs 为使用 vuepress 生成的文档项目，使用 markdown 编写组件文档。

├─docs                  // vuepress 文档
├─packages              // 组件库源码目录
│  ├─Button
│  ├─Cell
│  ├─Overlay
│  ├─Popup
│  ├─Popup
│  ├─Toast
│  ├─Icon
│  ├─Tabs
│  ├─TabPane
│  ├─Dialog
│  ├─Field
│  ├─ActionSheet  
│  ├─hooks              // 组合式
│  ├─theme-chalk        // 样式文件目录
│  └─index.js           // 组件库入口文件
├─src                   // 在这里引入组件查看页面效果
├─package.json

开发流程

  • 组件设计与开发
  • 发布NPM包
  • 编写组件文档

组件设计

  • 组件单文件 .vue 与 css样式文件分开写，有利于 rollup 打包，按需引入
  • 使用 vue3 <script setup> 语法糖，使代码层次清晰简洁
  • 编写组合式API，将单独功能逻辑独立成一个函数，并在vue中使用。
  • 基础组件中，如会在另一个组件使用到的，将 props 单独编写，便于高阶组件使用
  • 支持函数调用和组件调用两种方式的组件，先编写正常单文件组件，再编写函数式

组件技术攻克

支持函数调用的组件，需要在正常编写完组件后，再编写函数式调用方法。

大概思路是：（以 dialog 组件为例）

  • 编写外壳注册 dialog 组件，使用 h 函数 返回 vNode
  • 使用 createApp 获得上下文实例，使用 mount 渲染
  • 编写 dialog Function 传入参数
// 获取组件上下文，并挂载到 DOM
export function mountComponent(RootComponent) {
  const app = createApp(RootComponent);
  const root = document.createElement('div');

  document.body.appendChild(root);

  return {
    instance: app.mount(root),
    unmount() {
      app.unmount();
      document.body.removeChild(root);
    }
  };
}

发布到 NPM

  1. rollup 简单配置后，分包打包组件js，具体查看 根目录 rollup.config.js

  2. 进入 packages/theme-chalk 打包组件样式文件。为了简易操作，将操作写在 package.json

{
  "lib:theme": "cd packages/theme-chalk && yarn clean && yarn build",
  "lib": "rm -rf es && rm -rf lib && rollup -c && yarn run lib:theme",
}
  1. 填入 package.json 模块入口
{
  "main": "lib/soul-plus.js",
  "module": "es/soul-plus.js",
}
  1. 注册 NPM 账号后，发布组件。发布的组件以 package.json 属性 name 为名 若是配置了淘宝镜像，先设置回npm镜像：$ npm config set registry http://registry.npmjs.org
# 项目根目录下，执行命令行
npm publish

编写组件官方文档

使用 vuepress，在项目根目录下执行命令行。VuePress 使用很简单，在这里查看 vuepress 快速上手

# 安装 vuepress
npm install -D vuepress

# 创建你的第一篇文档
mkdir docs
echo '# Hello VuePress' > docs/README.md

值得注意的是，在 md 文件中使用 vue组件需要在配置 docs/.vuepress/config.js 中设置。使用到的vue组件放在 docs/.vuepress/components 目录中

// docs/.vuepress/config.js
plugins: [
    [
      '@vuepress/register-components',
      {
        componentsDir: path.resolve(__dirname, './components')
      }
    ]
  ],

举个栗子，在 button.md 文档中这样写

---
title: Button 按钮
sidebarDepth: 0
---

## Button 按钮

<ClientOnly>
  <doc-button/>
</ClientOnly>

### 组件属性

| 名称       | 类型      | 描述                                                |
| ---------- | --------- | --------------------------------------------------- |
| `loading`  | `Boolean` | 加载状态                                            |
| `disabled` | `Boolean` | 禁用状态                                            |
| `type`     | `String`  | 类型，可选值 `primary` `success` `warning` `danger` |

将文档部署到 github

部署打github pages的操作，查看 vuepress 部署

结语

很荣幸你能看到这里。写这个组件的初衷很简单，为了熟悉企业级业务组件库的设计模式，学习组件库开发细节。如何你也一样，加入 soul-plus 一起学习吧

转载声明： 请注明作者，注明原文链接，有疑问致邮 kingwyh1993@163.com

avatar
文章
阅读
粉丝