Vue3 + Vite + TS 基础组件库发布 npm 及使用教程（含 Volar 类型提示）

本教程详细介绍了如何将自己封装的 Vue3 基础组件库发布到 npm，并如何在 Vue3 + Vite + TS 项目中使用，同时提供 Volar 插件支持的 TS 类型提示功能，并生成 global.d.ts 文件以增强代码可读性和安全性。

1. 创建基础组件库

在本地创建一个新的项目文件夹，作为基础组件库的代码仓库。

2. 初始化项目

在项目文件夹中打开终端，运行以下命令初始化项目：

npm init

根据提示填写项目信息。

3. 安装所需依赖

在项目文件夹中运行以下命令安装所需依赖：

npm install vue@next
npm install vite
npm install typescript

4. 创建组件

在项目文件夹中创建一个 src 文件夹，并在其中创建你的组件文件。

mkdir src
touch src/YourComponent.vue

在 YourComponent.vue 文件中编写你的组件代码。

5. 配置打包和构建

在项目文件夹中创建一个 vite.config.ts 文件，并配置打包和构建的相关设置。

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/YourComponent.vue',
      name: 'YourComponent',
    },
  },
});

6. 构建组件库

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

npx vite build

构建完成后，将生成的构建文件放到一个独立的文件夹中，例如 dist。

7. 发布到 npm

在命令行中登录你的 npm 账号，并发布你的组件库。

npm login
npm publish

发布完成后，你的组件库将可以通过 npm 安装和使用。

8. 在 Vue3 + Vite + TS 项目中使用

在你的 Vue3 + Vite + TS 项目中，通过以下步骤安装和使用你的组件库：

在项目文件夹中运行以下命令安装你的组件库：

npm install YourComponent


- 在项目中引入你的组件，并使用它：

```typescript
import { createApp } from 'vue';
import YourComponent from 'YourComponent';

const app = createApp(App);
app.component('YourComponent', YourComponent);
app.mount('#app');

9. 配置 Volar 支持 TS 类型提示

在 Vue3 + Vite + TS 项目中，可以使用 Volar 插件提供的 TS 类型提示功能。在项目根目录下创建一个 volar.d.ts 文件，并在其中编写类型声明。

// volar.d.ts
declare module 'YourComponent' {
  import { ComponentOptions } from 'vue';

  const YourComponent: ComponentOptions;

  export default YourComponent;
}

这样，你在项目中使用你的组件时，将会有相应的 TS 类型提示。

总结

以上就是发布自己封装的基础组件库到 npm，并在 Vue3 + Vite + TS 项目中使用的步骤。希望本教程能帮助你顺利完成组件库的发布和使用。

Vue3 + Vite + TS 基础组件库发布 npm 及使用教程（含 Volar 类型提示）