#Vue

在这篇文档中，你可以了解到如何基于 Rsbuild 构建 Vue 应用，以及如何支持 Vue 2。

#创建 Vue 应用

使用 create-rsbuild 来创建一个基于 Rsbuild 的 Vue 应用，运行以下命令：

npm create rsbuild@latest

yarn create rsbuild

pnpm create rsbuild@latest

bun create rsbuild@latest

然后在 Select framework 时选择 Vue 即可。

#Vue 3

#在已有项目中使用 Vue

为了能够编译 Vue 的 SFC（单文件组件），你需要注册 Rsbuild 的 Vue 插件，插件会自动添加 Vue 构建所需的配置。

例如，在 rsbuild.config.ts 中注册：

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

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

#使用 Vue JSX 语法

如果你需要使用 Vue 的 JSX 语法，还需要注册 Rsbuild 的 Vue JSX 插件。

#TypeScript 支持

Rsbuild 默认支持编译 TypeScript。

请参考 Vue 官方文档的 TypeScript - IDE 支持 小节，了解如何在 IDE 中设置 Vue TypeScript 支持。

#Vue 2

#在已有项目中使用 Vue 2

为了能够编译 Vue 的 SFC（单文件组件），你需要注册 Rsbuild 的 Vue 2 插件，插件会自动添加 Vue 构建所需的配置。

例如，在 rsbuild.config.ts 中注册：

import { defineConfig } from '@rsbuild/core';
import { pluginVue2 } from '@rsbuild/plugin-vue2';

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

#使用 Vue JSX 语法

如果你需要使用 Vue 的 JSX 语法，还需要注册 Rsbuild 的 Vue 2 JSX 插件。

#类型声明

在 TypeScript 项目中，你需要为 *.vue 文件添加类型定义，使 TypeScript 能够正确识别它。

请在 src 目录下创建 env.d.ts，并添加以下内容：

declare module '*.vue' {
  import Vue from 'vue';

  export default Vue;
}