From 05f60fe401892ce89e570b098bfaf1e239f48c55 Mon Sep 17 00:00:00 2001 From: qiang Date: Fri, 17 Feb 2023 13:02:21 +0800 Subject: [PATCH] docs: add an introduction to van-nuxt (#11588) * docs: add an introduction to van-nuxt * fix: typo --- README.md | 1 + README.zh-CN.md | 1 + packages/vant/docs/markdown/home.en-US.md | 1 + packages/vant/docs/markdown/home.zh-CN.md | 1 + .../vant/docs/markdown/quickstart.en-US.md | 38 ++++++++++++++----- .../vant/docs/markdown/quickstart.zh-CN.md | 38 ++++++++++++++----- 6 files changed, 62 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 6f69d51e2..be435db76 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3) | [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library | | [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons | | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers | +| [vant-nuxt](https://github.com/vant-ui/vant-nuxt) | Vant module for Nuxt | ## Community Ecosystem diff --git a/README.zh-CN.md b/README.zh-CN.md index c6ba1460f..f6b6a1209 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -105,6 +105,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一 | [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 | | [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 | | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 | +| [vant-nuxt](https://github.com/vant-ui/vant-nuxt) | 为 Nuxt 准备的模块 | ## 社区生态 diff --git a/packages/vant/docs/markdown/home.en-US.md b/packages/vant/docs/markdown/home.en-US.md index 30c6f423f..babc732e8 100644 --- a/packages/vant/docs/markdown/home.en-US.md +++ b/packages/vant/docs/markdown/home.en-US.md @@ -56,6 +56,7 @@ The current maintenance status of each version of Vant is as follows: | [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library | | [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons | | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers | +| [vant-nuxt](https://github.com/vant-ui/vant-nuxt) | Vant module for Nuxt | ### Community Ecosystem diff --git a/packages/vant/docs/markdown/home.zh-CN.md b/packages/vant/docs/markdown/home.zh-CN.md index 69d5e7434..b5a83d8ce 100644 --- a/packages/vant/docs/markdown/home.zh-CN.md +++ b/packages/vant/docs/markdown/home.zh-CN.md @@ -68,6 +68,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一 | [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 | | [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 | | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 | +| [vant-nuxt](https://github.com/vant-ui/vant-nuxt) | 为 Nuxt 准备的模块 | ### 社区生态 diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index 7fe25be36..68a2fd0c2 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -222,19 +222,39 @@ import 'vant/es/image-preview/style'; ### Use Vant in Nuxt 3 -When using Vant in Nuxt 3, you should add `/vant/` to the `build.transpile`: +When using Vant in Nuxt 3, you can use [vant-nuxt](https://github.com/vant-ui/vant-nuxt), this module can help you to auto importing components and reduce CSS file size. -```ts -import { defineNuxtConfig } from 'nuxt'; +#### 1. Install Module +```bash +# with npm +npm i @vant/nuxt -D + +# with yarn +yarn add @vant/nuxt -D + +# with pnpm +pnpm add @vant/nuxt -D +``` + +#### 2. Add Module + +add the module in the `nuxt.config.js` file: + +```js export default defineNuxtConfig({ - experimental: { - externalVue: true, - }, + modules: ['@vant/nuxt'], }); ``` -Reference: +#### 3. Using Components -- [nuxt/framework#6761](https://github.com/nuxt/framework/issues/6761) -- [nuxt/framework#4084](https://github.com/nuxt/framework/issues/4084) +Then you can using components from Vant in the template, Go to the [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/components) to learn more. + +```html + +``` diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index c5b3c9ba7..de317dbfc 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -226,22 +226,42 @@ import 'vant/es/image-preview/style'; ### 在 Nuxt 3 中使用 -在 Nuxt 3 中使用 Vant 时，由于 Nuxt 3 框架本身的限制，需要在 `nuxt.config.ts` 中添加以下配置： +在 Nuxt 3 中使用 Vant 时，可以使用 [vant-nuxt](https://github.com/vant-ui/vant-nuxt) 模块，它可以自动引入组件，并按需引入的样式（包括函数组件）。 -```ts -import { defineNuxtConfig } from 'nuxt'; +#### 1. 安装模块 +```bash +# 通过 npm 安装 +npm i @vant/nuxt -D + +# 通过 yarn 安装 +yarn add @vant/nuxt -D + +# 通过 pnpm 安装 +pnpm add @vant/nuxt -D +``` + +#### 2. 增加模块 + +在 `nuxt.config.js` 文件中增加模块： + +```js export default defineNuxtConfig({ - experimental: { - externalVue: true, - }, + modules: ['@vant/nuxt'], }); ``` -关于该问题的背景，可以参考以下 issue： +#### 3. 使用组件 -- [nuxt/framework#6761](https://github.com/nuxt/framework/issues/6761) -- [nuxt/framework#4084](https://github.com/nuxt/framework/issues/4084) +完成以上两步，就可以直接在模板中使用 Vant 组件了。前往 [Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/components) 了解更多。 + +```html + +``` ## 迁移提示