用 Vite 提升 Vue3 组件库开发体验

在组件库开发中，文档展示与组件本身同等重要。然而，许多开发框架在组件库开发时会忽视这一点，导致开发过程出现诸多不便。本文将提供一套基于 Vite 搭建的组件库开发框架，让开发变得优雅而丝滑。

1. 初始化项目

首先，使用 Vite CLI 初始化一个新的 Vue3 项目。

vue create vue-component-library

选择好特性后，进入项目文件夹。

cd vue-component-library

2. 安装 Vite 插件

接下来，安装 Vite 插件，以便支持组件库开发。

npm install --save-dev @vitejs/plugin-vue

3. 配置 Vite

在 vite.config.js 文件中添加以下配置：

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

export default defineConfig({
  plugins: [
    vue(),
  ],
})

4. 创建组件库

在 src 文件夹下创建一个名为 components 的文件夹，用于存放组件库代码。

5. 创建第一个组件

在 components 文件夹下创建一个名为 Button.vue 的文件，用于创建第一个组件。

<template>
  <button>
    <slot />
  </button>
</template>

<script>
export default {
  name: 'Button',
}
</script>

6. 注册组件

在 main.js 文件中，注册刚刚创建的组件。

import { createApp } from 'vue'
import Button from './components/Button.vue'

const app = createApp({})

app.component('Button', Button)

app.mount('#app')

7. 运行开发服务器

运行以下命令启动开发服务器：

npm run dev

8. 文档展示

为了让组件库更容易使用，我们需要创建一个文档展示页面。

在 src 文件夹下创建一个名为 docs 的文件夹，用于存放文档展示代码。

在 docs 文件夹下创建一个名为 index.vue 的文件，用于创建文档展示页面。

<template>
  <div>
    <h1>组件库文档</h1>
    <Button>这是一个按钮</Button>
  </div>
</template>

<script>
import Button from '../components/Button.vue'

export default {
  components: {
    Button,
  },
}
</script>

9. 配置 Vite

在 vite.config.js 文件中添加以下配置：

export default defineConfig({
  // ...
  server: {
    // ...
    hmr: {
      port: 443,
    },
  },
})

10. 运行文档展示服务器

运行以下命令启动文档展示服务器：

npm run dev:docs

11. 总结

本文介绍了一套基于 Vite 搭建的组件库开发框架。通过使用该框架，开发者可以轻松创建组件库并快速进行开发。此外，该框架还提供了文档展示功能，方便开发者查看组件的使用方法。