使用 Vite + TypeScript 搭建 Vue3 组件库

在开始之前，确保你已经安装了 Node.js 和 npm。接下来，我们将使用 Vite 和 TypeScript 来搭建一个 Vue3 组件库。以下是详细的步骤：

步骤一：创建项目

打开终端，进入你想要创建项目的目录，然后运行以下命令：

npm init vite@latest my-component-lib -- --template vue-ts

这将创建一个名为 my-component-lib 的 Vite 项目，并使用 Vue3 和 TypeScript 作为模板。

步骤二：安装依赖

进入项目目录，然后安装所需的依赖：

cd my-component-lib
npm install

步骤三：配置 Vite

在项目根目录下创建一个名为 vite.config.ts 的文件，然后添加以下内容：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '/@': path.resolve(__dirname, './src')
    }
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, './src/index.ts'),
      name: 'MyComponentLib',
      formats: ['es']
    }
  }
})

这个配置文件将设置别名、指定入口文件和构建格式。

步骤四：编写组件

在 src 目录下创建一个名为 components 的文件夹，并在其中编写你的组件。例如，你可以创建一个名为 Button.vue 的文件，并在其中编写一个简单的按钮组件。确保每个组件都有相应的 TypeScript 类型定义。

步骤五：测试组件

在 src 目录下创建一个名为 tests 的文件夹，并在其中编写测试用例。你可以使用 Vue Test Utils 或 Jest 等测试框架来编写测试用例。确保为每个组件编写相应的测试用例，以确保其功能正常。

步骤六：构建和发布组件库

运行以下命令构建你的组件库：

npm run build

这将生成一个 lib 目录，其中包含构建后的组件库。你可以将这个目录发布到 npm 或其他包管理平台上，供其他人使用。注意，你需要为你的组件库创建一个 npm 账户，并在发布之前在 npm 上注册你的项目。关于如何发布到 npm，你可以查阅 npm 的官方文档。