Vite 构建 Vue3 组件库之路：工程基础搭建与目录结构优化

引言

在前端开发的迅猛浪潮中，持续学习与实践是我们提升技能和打造高质量项目的坚实基石。LearnDoUI 它不仅只是一个Vue3组件库，更是 Steady Learning and Doing 理念的化身------将知识与实践紧密结合，在开发中不断积累和成长。

本文将详细阐述如何利用Vite构建 LearnDoUI ，从项目的初步搭建，到目录结构的精心设计，构建配置的优化，以及测试与文档工具的集成。我们将沿着 LearnDoUI 的成长轨迹，逐步揭示如何在实践中学习，在学习中完善，为您呈现一个充满活力与潜力的组件库开发之旅。这不仅是一次技术探索，更是一段助力您开启高效、探索式前端开发之路的旅程，让 LearnDoUI 成为您持续学习与实践的得力伙伴。

使用 Vite 创建工程

通过执行以下命令创建一个基于 Vue 和 TypeScript 的项目：

bash 复制代码

pnpm create vite
✔ Project name: learndo-ui
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

初始化目录结构调整

清理冗余代码和资源
- 为了构建一个简洁且专注于组件库开发的项目结构，首先删除public和src文件夹以及index.html文件，这些在组件库开发初期通常是不必要的，避免了冗余代码和资源的干扰。
新建核心目录
- 在项目根目录下新建packages文件夹作为核心目录，其中包含components用于存放 UI 组件，hooks用于存放自定义 Hooks 等，这种结构有助于清晰地组织和管理组件库的各个部分。
组件目录结构优化

bash 复制代码

learndo-ui/
├── packages/
│   ├── components/
│   │   ├── button/
│   │   │   ├── button.md         # 组件文档
│   │   │   ├── button.spec.ts   # 组件测试文件
│   │   │   ├── button.vue       # 组件源码
│   │   │   ├── button.scss      # 组件样式
│   │   │   └── index.ts         # 组件入口文件
│   │   ├── ...
│   │   └── index.ts            # 导出所有组件的入口文件
│   ├── hooks/
│   │   ├── useClickOutside/
│   │   │   ├── useClickOutside.ts
│   │   │   ├── useClickOutside.spec.ts
│   │   │   └── index.ts
│   │   ├── ...
│   │   └── index.ts            # 导出所有 Hooks 的入口文件
│   └── index.ts                 # 导出 components 和 hooks 的入口文件
├── vite.config.ts
└── package.json

在这个结构中，每个组件都有自己的子目录，该目录包含了该组件的所有相关文件。这样做的好处是，每个组件的相关内容都被组织在一起，便于管理和维护。

修改构建配置

在vite.config.ts文件中对build配置项进行修改，使其适配组件库的构建需求，将传统的应用构建模式转变为库模式：

typescript 复制代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

// https://vite.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'packages/index.ts'), // 修改此处以匹配您的项目结构
      name: 'LearnDoUI',
      fileName: 'learn-do-ui'
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  },
  plugins: [vue()]
});

同时，删除不必要的脚本命令，如dev和preview，因为在组件库开发中，这些命令可能并不适用。

集成 Vitest 进行单元测试

安装 Vitest 并添加测试脚本命令：

bash 复制代码

pnpm add -D vitest

在package.json中添加：

json 复制代码

"scripts": {
  "test": "vitest"
}

集成 VitePress 创建组件库文档

安装 VitePress 并使用vitepress init初始化配置：

bash 复制代码

pnpm add -D vitepress

运行vitepress init并根据提示完成配置。

ts 复制代码

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Site title:
│  LearnDo UI
│
◇  Site description:
│  Vue3 UI Library
│
◇  Theme:
│  Default Theme + Customization
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

FAQ🙋

在运行pnpm docs:dev时可能会遇到报错[plugin:vite:vue] At least one <template> or <script> is required in a single file component.，这是由于 VitePress 默认添加了@vitejs/plugin-vue插件，导致与项目中已有的插件重复加载。解决方案是在.vitepress/config.ts中添加以下内容：

typescript 复制代码

vite: {
  configFile: false
}

这一配置将在运行 VitePress 时阻止其自动加载vite.config.ts文件。如果在使用 VitePress 的过程中需要特定的 Vite 配置，应当将这些配置添加到.vitepress/config.ts文件中的vite配置项内。

感谢阅读,敬请斧正!