From 1a6f14d7fdd23e1816fe81511fd08579ac832359 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 20 Oct 2024 20:57:58 +0800 Subject: [PATCH] docs: update framework guides (#3772) --- website/docs/en/guide/framework/_meta.json | 2 +- website/docs/en/guide/framework/svelte.mdx | 4 +- .../en/guide/framework/{vue2.mdx => vue.mdx} | 49 ++++++++++++++++--- website/docs/en/guide/framework/vue3.mdx | 49 ------------------- website/docs/zh/guide/framework/_meta.json | 2 +- website/docs/zh/guide/framework/svelte.mdx | 4 +- .../zh/guide/framework/{vue2.mdx => vue.mdx} | 49 ++++++++++++++++--- website/docs/zh/guide/framework/vue3.mdx | 49 ------------------- 8 files changed, 88 insertions(+), 120 deletions(-) rename website/docs/en/guide/framework/{vue2.mdx => vue.mdx} (50%) delete mode 100644 website/docs/en/guide/framework/vue3.mdx rename website/docs/zh/guide/framework/{vue2.mdx => vue.mdx} (50%) delete mode 100644 website/docs/zh/guide/framework/vue3.mdx diff --git a/website/docs/en/guide/framework/_meta.json b/website/docs/en/guide/framework/_meta.json index 962e27e34a..87bcdee42d 100644 --- a/website/docs/en/guide/framework/_meta.json +++ b/website/docs/en/guide/framework/_meta.json @@ -1 +1 @@ -["react", "vue3", "vue2", "preact", "svelte", "solid"] +["react", "vue", "preact", "svelte", "solid"] diff --git a/website/docs/en/guide/framework/svelte.mdx b/website/docs/en/guide/framework/svelte.mdx index 0ffd827a6d..ce8ea50445 100644 --- a/website/docs/en/guide/framework/svelte.mdx +++ b/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 diff --git a/website/docs/en/guide/framework/vue2.mdx b/website/docs/en/guide/framework/vue.mdx similarity index 50% rename from website/docs/en/guide/framework/vue2.mdx rename to website/docs/en/guide/framework/vue.mdx index 391e76bb8a..e421051e95 100644 --- a/website/docs/en/guide/framework/vue2.mdx +++ b/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. diff --git a/website/docs/en/guide/framework/vue3.mdx b/website/docs/en/guide/framework/vue3.mdx deleted file mode 100644 index d35fa7633f..0000000000 --- a/website/docs/en/guide/framework/vue3.mdx +++ /dev/null @@ -1,49 +0,0 @@ -# Vue 3 - -In this document, you will learn how to build a Vue 3 application using Rsbuild. - -## Create Vue 3 Project - -You can use `create-rsbuild` to create a project with Rsbuild + Vue 3. Just execute the following command: - -import { PackageManagerTabs } from '@theme'; - - - -Then select `Vue 3` when prompted to "Select framework". - -## 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. diff --git a/website/docs/zh/guide/framework/_meta.json b/website/docs/zh/guide/framework/_meta.json index 962e27e34a..87bcdee42d 100644 --- a/website/docs/zh/guide/framework/_meta.json +++ b/website/docs/zh/guide/framework/_meta.json @@ -1 +1 @@ -["react", "vue3", "vue2", "preact", "svelte", "solid"] +["react", "vue", "preact", "svelte", "solid"] diff --git a/website/docs/zh/guide/framework/svelte.mdx b/website/docs/zh/guide/framework/svelte.mdx index 72eb82fec2..a1bd317747 100644 --- a/website/docs/zh/guide/framework/svelte.mdx +++ b/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 diff --git a/website/docs/zh/guide/framework/vue2.mdx b/website/docs/zh/guide/framework/vue.mdx similarity index 50% rename from website/docs/zh/guide/framework/vue2.mdx rename to website/docs/zh/guide/framework/vue.mdx index 87538d2f0f..a005c600f9 100644 --- a/website/docs/zh/guide/framework/vue2.mdx +++ b/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 能够正确识别它。 diff --git a/website/docs/zh/guide/framework/vue3.mdx b/website/docs/zh/guide/framework/vue3.mdx deleted file mode 100644 index be819d5d55..0000000000 --- a/website/docs/zh/guide/framework/vue3.mdx +++ /dev/null @@ -1,49 +0,0 @@ -# Vue 3 - -在这篇文档中，你可以了解到如何基于 Rsbuild 来构建一个 Vue 3 应用。 - -## 创建 Vue 3 项目 - -你可以使用 `create-rsbuild` 来创建一个 Rsbuild + Vue 3 的项目，调用以下命令： - -import { PackageManagerTabs } from '@theme'; - - - -然后在 `Select framework` 时选择 `Vue 3` 即可。 - -## 在已有项目中使用 Vue - -为了能够编译 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 支持。