docs: update framework guides (#3772)

website/docs/en/guide/framework/_meta.json

@@ -1 +1 @@
-["react", "vue3", "vue2", "preact", "svelte", "solid"]
+["react", "vue", "preact", "svelte", "solid"]

website/docs/en/guide/framework/svelte.mdx

@@ -1,6 +1,6 @@
 # Svelte
 
-In this document, you will learn how to build a Svelte application using Rsbuild.
+In this document, you will learn how to build a Svelte 5 or Svelte 4 application using Rsbuild.
 
 ## Create Svelte Project
 
@@ -17,7 +17,7 @@ import { PackageManagerTabs } from '@theme';
   }}
 />
 
-Then select `Svelte` when prompted to "Select framework".
+Then select `Svelte 5` or `Svelte 4` when prompted to "Select framework".
 
 ## Use Svelte in an existing project
 

website/docs/en/guide/framework/vue2.mdx → website/docs/en/guide/framework/vue.mdx

@@ -1,10 +1,10 @@
-# Vue 2
+# Vue
 
-In this document, you will learn how to build a Vue 2 application using Rsbuild.
+In this document, you will learn how to build a Vue 3 or Vue 2 application using Rsbuild.
 
-## Create Vue 2 Project
+### Create Vue Project
 
-You can use `create-rsbuild` to create a project with Rsbuild + Vue 2. Just execute the following command:
+You can use `create-rsbuild` to create a project with Rsbuild + Vue. Just execute the following command:
 
 import { PackageManagerTabs } from '@theme';
 
@@ -17,9 +17,42 @@ import { PackageManagerTabs } from '@theme';
   }}
 />
 
-Then select `Vue 2` when prompted to "Select framework".
+Then select `Vue 3` or `Vue 2` when prompted to "Select framework".
 
-## Use Vue2 in an existing project
+## Vue 3
+
+### Use Vue in an existing project
+
+To compile Vue SFC (Single File Components), you need to register the Rsbuild [Vue plugin](/plugins/list/plugin-vue). The plugin will automatically add the necessary configuration for Vue builds.
+
+For example, register in `rsbuild.config.ts`:
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+
+export default defineConfig({
+  plugins: [pluginVue()],
+});
+```
+
+:::tip
+For projects using Vue CLI, you can refer to the [Vue CLI Migration Guide](/guide/migration/vue-cli).
+:::
+
+### Use the JSX syntax of Vue
+
+If you need to use the JSX syntax of Vue, you also need to register the [@rsbuild/plugin-vue-jsx](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx).
+
+### TypeScript Support
+
+Rsbuild supports compiling TypeScript by default.
+
+Please refer to the [TypeScript - IDE Support](https://vuejs.org/guide/typescript/overview.html#ide-support) section of the Vue documentation to learn how to set up Vue TypeScript support in your IDE.
+
+## Vue 2
+
+### Use Vue 2 in an existing project
 
 To compile Vue SFC (Single File Components), you need to register the Rsbuild [Vue 2 plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2). The plugin will automatically add the necessary configuration for Vue builds.
 
@@ -41,11 +74,11 @@ export default defineConfig({
 
 :::
 
-## Use the JSX syntax of Vue
+### Use the JSX syntax of Vue
 
 If you need to use the JSX syntax of Vue, you also need to register the [@rsbuild/plugin-vue2-jsx](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx).
 
-## Type Declarations
+### Type Declarations
 
 In a TypeScript project, you need to add type definitions for `*.vue` files so that TypeScript can recognize them correctly.
 

website/docs/zh/guide/framework/_meta.json

@@ -1 +1 @@
-["react", "vue3", "vue2", "preact", "svelte", "solid"]
+["react", "vue", "preact", "svelte", "solid"]

website/docs/zh/guide/framework/svelte.mdx

@@ -1,6 +1,6 @@
 # Svelte
 
-在这篇文档中，你可以了解到如何基于 Rsbuild 来构建一个 Svelte 应用。
+在这篇文档中，你可以了解到如何基于 Rsbuild 来构建一个 Svelte 5 或 Svelte 4 应用。
 
 ## 创建 Svelte 项目
 
@@ -17,7 +17,7 @@ import { PackageManagerTabs } from '@theme';
   }}
 />
 
-然后在 `Select framework` 时选择 `Svelte` 即可。
+然后在 `Select framework` 时选择 `Svelte 5` 或 `Svelte 4` 即可。
 
 ## 在已有项目中使用 Svelte
 

website/docs/zh/guide/framework/vue2.mdx → website/docs/zh/guide/framework/vue.mdx

@@ -1,10 +1,10 @@
-# Vue 2
+# Vue
 
-在这篇文档中，你可以了解到如何基于 Rsbuild 来构建一个 Vue 2 应用。
+在这篇文档中，你可以了解到如何基于 Rsbuild 来构建一个 Vue 3 或 Vue 2 应用。
 
-## 创建 Vue 2 项目
+## 创建 Vue 项目
 
-你可以使用 `create-rsbuild` 来创建一个 Rsbuild + Vue 2 的项目，调用以下命令：
+你可以使用 `create-rsbuild` 来创建一个 Rsbuild + Vue 的项目，调用以下命令：
 
 import { PackageManagerTabs } from '@theme';
 
@@ -17,9 +17,42 @@ import { PackageManagerTabs } from '@theme';
   }}
 />
 
-然后在 `Select framework` 时选择 `Vue 2` 即可。
+然后在 `Select framework` 时选择 `Vue 3` 或 `Vue 2` 即可。
 
-## 在已有项目中使用 Vue2
+## Vue 3
+
+### 在已有项目中使用 Vue 3
+
+为了能够编译 Vue 的 SFC（单文件组件），你需要注册 Rsbuild 的 [Vue 插件](/plugins/list/plugin-vue)，插件会自动添加 Vue 构建所需的配置。
+
+例如，在 `rsbuild.config.ts` 中注册：
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+
+export default defineConfig({
+  plugins: [pluginVue()],
+});
+```
+
+:::tip
+对于使用 Vue CLI 的项目，可以参考 [Vue CLI 迁移指南](/guide/migration/vue-cli)。
+:::
+
+### 使用 Vue JSX 语法
+
+如果你需要使用 Vue 的 JSX 语法，还需要注册 Rsbuild 的 [Vue 3 JSX 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx)。
+
+### TypeScript 支持
+
+Rsbuild 默认支持编译 TypeScript。
+
+请参考 Vue 官方文档的 [TypeScript - IDE 支持](https://cn.vuejs.org/guide/typescript/overview.html#ide-support) 小节，了解如何在 IDE 中设置 Vue TypeScript 支持。
+
+## Vue 2
+
+### 在已有项目中使用 Vue 2
 
 为了能够编译 Vue 的 SFC（单文件组件），你需要注册 Rsbuild 的 [Vue 2 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue2)，插件会自动添加 Vue 构建所需的配置。
 
@@ -41,11 +74,11 @@ export default defineConfig({
 
 :::
 
-## 使用 Vue JSX 语法
+### 使用 Vue JSX 语法
 
 如果你需要使用 Vue 的 JSX 语法，还需要注册 Rsbuild 的 [Vue 2 JSX 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx)。
 
-## 类型声明
+### 类型声明
 
 在 TypeScript 项目中，你需要为 `*.vue` 文件添加类型定义，使 TypeScript 能够正确识别它。