> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# Vue

在本文档中，你将学习如何使用 Rslib 构建 Vue 组件库，你可在 [示例](https://github.com/rstackjs/rstack-examples/tree/main/rslib) 中查看 Vue 相关演示项目。

::: note

1. 仅支持 Vue3 版本，Vue2 版本不支持。

2. Vue 的类型声明文件由 [vue-tsc](https://www.npmjs.com/package/vue-tsc) 生成，所以 [lib.dts](/zh/config/lib/dts.md) / [lib.redirect.dts](/zh/config/lib/redirect.md#redirectdts) / [lib.banner.dts](/zh/config/lib/banner.md#bannerdts) / [lib.footer.dts](/zh/config/lib/footer.md#footerdts) 在 Vue 项目中不生效。

:::

## 创建 Vue 项目

你可以使用 `create-rslib` 创建 Rslib + Vue 项目。只需执行以下命令：


```sh [npm]
npm create rslib@latest
```

```sh [yarn]
yarn create rslib
```

```sh [pnpm]
pnpm create rslib@latest
```

```sh [bun]
bun create rslib@latest
```

然后，当提示 "Select template" 选择 `Vue`。

## 在现有 Rslib 项目中使用

开发 Vue 组件，需要在 `rslib.config.ts` 中设置 [target](/zh/config/rsbuild/output.md#outputtarget) 为 `"web"`。 这一点至关重要，因为 Rslib 默认将 `target` 设置为 `"node"`，这与 Rsbuild 的 target 默认值不同。

要编译 Vue（.vue 单文件组件），你需要注册 [@rsbuild/plugin-vue](https://rsbuild.rs/zh/plugins/list/plugin-vue) 插件。该插件将自动添加 Vue 构建所需的配置。

例如，在 `rslib.config.ts` 中注册:

```ts title="rslib.config.ts"
import { defineConfig } from '@rslib/core';
import { pluginVue } from '@rsbuild/plugin-vue'; // [!code highlight]

export default defineConfig({
  lib: [
    // ...
  ],
  // [!code highlight:4]
  output: {
    target: 'web',
  },
  plugins: [pluginVue(/** options here */)],
});
```

更多配置可以参考 [@rsbuild/plugin-vue](https://rsbuild.rs/zh/plugins/list/plugin-vue) 插件文档。