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

初始化目录结构调整

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

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

集成 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配置项内。


感谢阅读,敬请斧正!

相关推荐
returnShitBoy3 小时前
前端面试:如何实现预览 PDF 文件?
前端·pdf
烂蜻蜓4 小时前
HTML 表格的详细介绍与应用
开发语言·前端·css·html·html5
圣京都6 小时前
react和vue 基础使用对比
javascript·vue.js·react.js
returnShitBoy6 小时前
前端面试:axios 是否可以取消请求?
前端
u0103754566 小时前
fiddler+雷电模拟器(安卓9)+https配置
前端·测试工具·fiddler
海上彼尚6 小时前
Vue3中全局使用Sass变量方法
前端·css·sass
ᥬ 小月亮6 小时前
TypeScript基础
前端·javascript·typescript
鱼樱前端6 小时前
Vue3+TS 视频播放器组件封装(Video.js + Hls.js 最佳组合)
前端·javascript·vue.js
烛阴7 小时前
JavaScript 函数进阶之:Rest 参数与 Spread 语法(二)
前端·javascript
GISer_Jing7 小时前
ES6回顾:闭包->(优点:实现工厂函数、记忆化和异步实现)、(应用场景:Promise的then与catch的回调、async/await、柯里化函数)
前端·ecmascript·es6