/*! For license information please see 5892.5215f2cd.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["5892"],{8362:function(s,n,a){"use strict";a.r(n);var l=a("80681");let t=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,l.wg)(),(0,l.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

\u5FEB\u901F\u4E0A\u624B

\n

\u4ECB\u7ECD

\n

\u901A\u8FC7\u672C\u7AE0\u8282\u4F60\u53EF\u4EE5\u4E86\u89E3\u5230 Vant \u7684\u5B89\u88C5\u65B9\u6CD5\u548C\u57FA\u672C\u4F7F\u7528\u59FF\u52BF\u3002

\n

\u5B89\u88C5

\n

\u901A\u8FC7 npm \u5B89\u88C5

\n

\u5728\u73B0\u6709\u9879\u76EE\u4E2D\u4F7F\u7528 Vant \u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 npm \u8FDB\u884C\u5B89\u88C5\uFF1A

\n
# Vue 3 \u9879\u76EE\uFF0C\u5B89\u88C5\u6700\u65B0\u7248 Vant\nnpm i vant\n\n# Vue 2 \u9879\u76EE\uFF0C\u5B89\u88C5 Vant 2\nnpm i vant@latest-v2\n
\n

\u5F53\u7136\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u901A\u8FC7 yarn\u3001pnpm \u6216 bun \u8FDB\u884C\u5B89\u88C5\uFF1A

\n
# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add vant\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add vant\n\n# \u901A\u8FC7 Bun \u5B89\u88C5\nbun add vant\n
\n

\u5728\u65B0\u9879\u76EE\u4E2D\u4F7F\u7528

\n

\u5982\u679C\u4F60\u9700\u8981\u65B0\u5EFA\u4E00\u4E2A\u9879\u76EE\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 Rsbuild\uFF0CVite \u6216 Nuxt \u6846\u67B6\u3002

\n

Rsbuild

\n

Rsbuild \u662F\u57FA\u4E8E Rspack \u7684\u6784\u5EFA\u5DE5\u5177\uFF0C\u7531 Vant \u4F5C\u8005\u5F00\u53D1\uFF0C\u5177\u5907\u4E00\u6D41\u7684\u6784\u5EFA\u901F\u5EA6\u548C\u5F00\u53D1\u4F53\u9A8C\uFF0C\u5BF9 Vant \u63D0\u4F9B\u7B2C\u4E00\u4F18\u5148\u7EA7\u652F\u6301\u3002

\n

\u4F60\u53EF\u4EE5\u901A\u8FC7\u4EE5\u4E0B\u547D\u4EE4\u521B\u5EFA\u4E00\u4E2A Rsbuild \u9879\u76EE\uFF1A

\n
npm create rsbuild@latest\n
\n

\u8BF7\u8BBF\u95EE Rsbuild \u4ED3\u5E93 \u4E86\u89E3\u66F4\u591A\u4FE1\u606F\u3002

\n

\u793A\u4F8B\u9879\u76EE

\n

\u4EE5\u4E0B\u662F Vant \u5B98\u65B9\u63D0\u4F9B\u7684\u4E00\u4E9B\u793A\u4F8B\u9879\u76EE\uFF0C\u4F60\u53EF\u4EE5\u514B\u9686\u8BE5\u9879\u76EE\uFF0C\u5E76\u76F4\u63A5\u62F7\u8D1D\u4EE3\u7801\u6765\u4F7F\u7528\u3002

\n\n

\u901A\u8FC7 CDN \u5B89\u88C5

\n

\u5982\u679C\u4F60\u53EA\u9700\u8981\u5F00\u53D1\u4E00\u4E2A\u7B80\u5355\u7684 HTML \u9875\u9762\uFF0C\u90A3\u4E48\u53EF\u4EE5\u76F4\u63A5\u5728 HTML \u6587\u4EF6\u4E2D\u5F15\u5165 CDN \u94FE\u63A5\uFF0C\u4E4B\u540E\u4F60\u53EF\u4EE5\u901A\u8FC7\u5168\u5C40\u53D8\u91CF vant \u8BBF\u95EE\u5230\u6240\u6709\u7EC4\u4EF6\u3002

\n
<!-- \u5F15\u5165\u6837\u5F0F\u6587\u4EF6 -->\n<link\n  rel="stylesheet"\n  href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"\n/>\n\n<!-- \u5F15\u5165 Vue \u548C Vant \u7684 JS \u6587\u4EF6 -->\n<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>\n<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>\n\n<script>\n  // \u5728 #app \u6807\u7B7E\u4E0B\u6E32\u67D3\u4E00\u4E2A\u6309\u94AE\u7EC4\u4EF6\n  const app = Vue.createApp({\n    template: `<van-button>\u6309\u94AE</van-button>`,\n  });\n  app.use(vant);\n\n  // \u901A\u8FC7 CDN \u5F15\u5165\u65F6\u4E0D\u4F1A\u81EA\u52A8\u6CE8\u518C Lazyload \u7EC4\u4EF6\n  // \u53EF\u4EE5\u901A\u8FC7\u4E0B\u9762\u7684\u65B9\u5F0F\u624B\u52A8\u6CE8\u518C\n  app.use(vant.Lazyload);\n\n  // \u8C03\u7528\u5DE5\u5177\u51FD\u6570\uFF0C\u5F39\u51FA\u4E00\u4E2A Toast\n  vant.showToast('\u63D0\u793A');\n\n  app.mount('#app');\n</script>\n
\n

\u514D\u8D39 CDN

\n

\u4F60\u53EF\u4EE5\u901A\u8FC7\u4EE5\u4E0B\u514D\u8D39 CDN \u670D\u52A1\u6765\u4F7F\u7528 Vant:

\n\n

\u6CE8\u610F\uFF1A\u514D\u8D39 CDN \u4E00\u822C\u7528\u4E8E\u5236\u4F5C\u539F\u578B\u6216\u4E2A\u4EBA\u5C0F\u578B\u9879\u76EE\uFF0C\u4E0D\u63A8\u8350\u5728\u4F01\u4E1A\u751F\u4EA7\u73AF\u5883\u4E2D\u4F7F\u7528\u514D\u8D39 CDN\u3002

\n

\u5BF9\u4E8E\u4F01\u4E1A\u5F00\u53D1\u8005\uFF0C\u5EFA\u8BAE\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\uFF1A

\n\n

\u793A\u4F8B

\n

\u793A\u4F8B\u5DE5\u7A0B

\n

\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E30\u5BCC\u7684\u793A\u4F8B\u5DE5\u7A0B\uFF0C\u901A\u8FC7\u793A\u4F8B\u5DE5\u7A0B\u4F60\u53EF\u4EE5\u4E86\u89E3\u5982\u4E0B\u5185\u5BB9\uFF1A

\n\n

\u5F15\u5165\u7EC4\u4EF6

\n

\u65B9\u6CD5\u4E00. \u5E38\u89C4\u7528\u6CD5

\n

\u4E0B\u9762\u662F\u4F7F\u7528 Vant \u7EC4\u4EF6\u7684\u7528\u6CD5\u793A\u4F8B\uFF1A

\n
import { createApp } from 'vue';\n// 1. \u5F15\u5165\u4F60\u9700\u8981\u7684\u7EC4\u4EF6\nimport { Button } from 'vant';\n// 2. \u5F15\u5165\u7EC4\u4EF6\u6837\u5F0F\nimport 'vant/lib/index.css';\n\nconst app = createApp();\n\n// 3. \u6CE8\u518C\u4F60\u9700\u8981\u7684\u7EC4\u4EF6\napp.use(Button);\n
\n

Vant \u652F\u6301\u591A\u79CD\u7EC4\u4EF6\u6CE8\u518C\u65B9\u5F0F\uFF0C\u9664\u4E86\u5728 app \u4E0A\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u9009\u62E9\u5176\u4ED6\u7684\u65B9\u5F0F\uFF0C\u6BD4\u5982\u5C40\u90E8\u6CE8\u518C\uFF0C\u8BE6\u89C1 \u7EC4\u4EF6\u6CE8\u518C \u7AE0\u8282\u3002

\n
\n

\u63D0\u793A\uFF1AVant \u9ED8\u8BA4\u652F\u6301 Tree Shaking\uFF0C\u56E0\u6B64\u4F60\u4E0D\u9700\u8981\u914D\u7F6E\u4EFB\u4F55\u63D2\u4EF6\uFF0C\u901A\u8FC7 Tree Shaking \u5373\u53EF\u79FB\u9664\u4E0D\u9700\u8981\u7684 JS \u4EE3\u7801\uFF0C\u4F46 CSS \u6837\u5F0F\u65E0\u6CD5\u901A\u8FC7\u8FD9\u79CD\u65B9\u5F0F\u4F18\u5316\uFF0C\u5982\u679C\u9700\u8981\u6309\u9700\u5F15\u5165 CSS \u6837\u5F0F\uFF0C\u8BF7\u53C2\u8003\u4E0B\u9762\u7684\u65B9\u6CD5\u4E8C\u3002

\n
\n

\u65B9\u6CD5\u4E8C. \u6309\u9700\u5F15\u5165\u7EC4\u4EF6\u6837\u5F0F

\n

\u5728\u57FA\u4E8E Rsbuild\u3001Vite\u3001webpack \u6216 vue-cli \u7684\u9879\u76EE\u4E2D\u4F7F\u7528 Vant \u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 unplugin-vue-components \u63D2\u4EF6\uFF0C\u5B83\u53EF\u4EE5\u81EA\u52A8\u5F15\u5165\u7EC4\u4EF6\u3002

\n

Vant \u5B98\u65B9\u57FA\u4E8E unplugin-vue-components \u63D0\u4F9B\u4E86\u81EA\u52A8\u5BFC\u5165\u6837\u5F0F\u7684\u89E3\u6790\u5668 @vant/auto-import-resolver\uFF0C\u4E24\u8005\u53EF\u4EE5\u914D\u5408\u4F7F\u7528\u3002

\n

\u76F8\u6BD4\u4E8E\u5E38\u89C4\u7528\u6CD5\uFF0C\u8FD9\u79CD\u65B9\u5F0F\u53EF\u4EE5\u6309\u9700\u5F15\u5165\u7EC4\u4EF6\u7684 CSS \u6837\u5F0F\uFF0C\u4ECE\u800C\u51CF\u5C11\u4E00\u90E8\u5206\u4EE3\u7801\u4F53\u79EF\uFF0C\u4F46\u4F7F\u7528\u8D77\u6765\u4F1A\u53D8\u5F97\u7E41\u7410\u4E00\u4E9B\u3002\u5982\u679C\u4E1A\u52A1\u5BF9 CSS \u7684\u4F53\u79EF\u8981\u6C42\u4E0D\u662F\u7279\u522B\u6781\u81F4\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528\u66F4\u7B80\u4FBF\u7684\u5E38\u89C4\u7528\u6CD5\u3002

\n

1. \u5B89\u88C5\u63D2\u4EF6

\n
# \u901A\u8FC7 npm \u5B89\u88C5\nnpm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# \u901A\u8FC7 bun \u5B89\u88C5\nbun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D\n
\n

2. \u914D\u7F6E\u63D2\u4EF6

\n

\u5982\u679C\u662F\u57FA\u4E8E Rsbuild \u7684\u9879\u76EE\uFF0C\u5728 rsbuild.config.js \u6587\u4EF6\u4E2D\u914D\u7F6E\u63D2\u4EF6\uFF1A

\n
import { defineConfig } from '@rsbuild/core';\nimport { pluginVue } from '@rsbuild/plugin-vue';\nimport AutoImport from 'unplugin-auto-import/rspack';\nimport Components from 'unplugin-vue-components/rspack';\nimport { VantResolver } from '@vant/auto-import-resolver';\n\nexport default defineConfig({\n  plugins: [pluginVue()],\n  tools: {\n    rspack: {\n      plugins: [\n        AutoImport({\n          resolvers: [VantResolver()],\n        }),\n        Components({\n          resolvers: [VantResolver()],\n        }),\n      ],\n    },\n  },\n});\n
\n

\u5982\u679C\u662F\u57FA\u4E8E Vite \u7684\u9879\u76EE\uFF0C\u5728 vite.config.js \u6587\u4EF6\u4E2D\u914D\u7F6E\u63D2\u4EF6\uFF1A

\n
import vue from '@vitejs/plugin-vue';\nimport AutoImport from 'unplugin-auto-import/vite';\nimport Components from 'unplugin-vue-components/vite';\nimport { VantResolver } from '@vant/auto-import-resolver';\n\nexport default {\n  plugins: [\n    vue(),\n    AutoImport({\n      resolvers: [VantResolver()],\n    }),\n    Components({\n      resolvers: [VantResolver()],\n    }),\n  ],\n};\n
\n

\u5982\u679C\u662F\u57FA\u4E8E vue-cli \u7684\u9879\u76EE\uFF0C\u5728 vue.config.js \u6587\u4EF6\u4E2D\u914D\u7F6E\u63D2\u4EF6\uFF1A

\n
const { VantResolver } = require('@vant/auto-import-resolver');\nconst AutoImport = require('unplugin-auto-import/webpack');\nconst Components = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      // \u5F53 unplugin-vue-components \u7248\u672C\u5C0F\u4E8E 0.26.0 \u65F6\uFF0C\u4F7F\u7528\u4EE5\u4E0B\u5199\u6CD5\n      AutoImport({ resolvers: [VantResolver()] }),\n      Components({ resolvers: [VantResolver()] }),\n      //\u5F53 unplugin-vue-components \u7248\u672C\u5927\u4E8E\u7B49\u4E8E 0.26.0 \u65F6\uFF0C\u4F7F\u7528\u4EE5\u4E0B\u5199\u6CD5\n      AutoImport.default({ resolvers: [VantResolver()] }),\n      Components.default({ resolvers: [VantResolver()] }),\n    ],\n  },\n};\n
\n

\u5982\u679C\u662F\u57FA\u4E8E webpack \u7684\u9879\u76EE\uFF0C\u5728 webpack.config.js \u6587\u4EF6\u4E2D\u914D\u7F6E\u63D2\u4EF6\uFF1A

\n
const { VantResolver } = require('@vant/auto-import-resolver');\nconst AutoImport = require('unplugin-auto-import/webpack');\nconst Components = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n  plugins: [\n    // \u5F53 unplugin-vue-components \u7248\u672C\u5C0F\u4E8E 0.26.0 \u65F6\uFF0C\u4F7F\u7528\u4EE5\u4E0B\u5199\u6CD5\n    AutoImport({ resolvers: [VantResolver()] }),\n    Components({ resolvers: [VantResolver()] }),\n    //\u5F53 unplugin-vue-components \u7248\u672C\u5927\u4E8E\u7B49\u4E8E 0.26.0 \u65F6\uFF0C\u4F7F\u7528\u4EE5\u4E0B\u5199\u6CD5\n    AutoImport.default({ resolvers: [VantResolver()] }),\n    Components.default({ resolvers: [VantResolver()] }),\n  ],\n};\n
\n

3. \u4F7F\u7528\u7EC4\u4EF6\u548C API

\n

\u5B8C\u6210\u4EE5\u4E0A\u4E24\u6B65\uFF0C\u5C31\u53EF\u4EE5\u76F4\u63A5\u5728\u6A21\u677F\u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\u4E86\uFF0Cunplugin-vue-components \u4F1A\u89E3\u6790\u6A21\u677F\u5E76\u81EA\u52A8\u6CE8\u518C\u5BF9\u5E94\u7684\u7EC4\u4EF6, @vant/auto-import-resolver \u4F1A\u81EA\u52A8\u5F15\u5165\u5BF9\u5E94\u7684\u7EC4\u4EF6\u6837\u5F0F\u3002

\n
<template>\n  <van-button type="primary" />\n</template>\n
\n

unplugin-auto-import \u4F1A\u81EA\u52A8\u5BFC\u5165\u5BF9\u5E94\u7684 Vant API \u4EE5\u53CA\u6837\u5F0F\u3002

\n
<script>\nshowToast('No need to import showToast')\n</script>\n
\n

\u4F7F\u7528\u63D0\u793A

\n\n

\u5728\u6846\u67B6\u4E2D\u4F7F\u7528

\n

\u5728 Nuxt 3 \u4E2D\u4F7F\u7528

\n

\u5728 Nuxt 3 \u4E2D\u4F7F\u7528 Vant \u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 vant-nuxt \u6A21\u5757\uFF0C\u5B83\u53EF\u4EE5\u81EA\u52A8\u5F15\u5165\u7EC4\u4EF6\uFF0C\u5E76\u6309\u9700\u5F15\u5165\u7684\u6837\u5F0F\uFF08\u5305\u62EC\u51FD\u6570\u7EC4\u4EF6\uFF09\u3002

\n

1. \u5B89\u88C5\u6A21\u5757

\n
# \u901A\u8FC7 npm \u5B89\u88C5\nnpm i @vant/nuxt -D\n\n# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add @vant/nuxt -D\n\n# \u901A\u8FC7 pnpm \u5B89\u88C5\npnpm add @vant/nuxt -D\n\n# \u901A\u8FC7 Bun \u5B89\u88C5\nbun add @vant/nuxt -D\n
\n

2. \u589E\u52A0\u6A21\u5757

\n

\u5728 nuxt.config.js \u6587\u4EF6\u4E2D\u589E\u52A0\u6A21\u5757\uFF1A

\n
export default defineNuxtConfig({\n  modules: ['@vant/nuxt'],\n});\n
\n

3. \u4F7F\u7528\u7EC4\u4EF6

\n

\u5B8C\u6210\u4EE5\u4E0A\u4E24\u6B65\uFF0C\u5C31\u53EF\u4EE5\u76F4\u63A5\u5728\u6A21\u677F\u4E2D\u4F7F\u7528 Vant \u7EC4\u4EF6\u4E86\u3002\u524D\u5F80 Nuxt \u6587\u6863 \u4E86\u89E3\u66F4\u591A\u3002

\n
<template>\n  <van-button type="primary" @click="showToast('toast')">button</van-button>\n  <VanButton type="success" @click="showNotify('notify')">button</VanButton>\n  <LazyVanButton type="default">lazy button</LazyVanButton>\n</template>\n
\n

\u8FC1\u79FB\u63D0\u793A

\n

\u79FB\u9664 babel-plugin-import

\n

\u4ECE Vant 4.0 \u7248\u672C\u5F00\u59CB\uFF0C\u5C06\u4E0D\u518D\u652F\u6301 babel-plugin-import\uFF0C\u8BF7\u79FB\u9664\u9879\u76EE\u4E2D\u4F9D\u8D56\u7684 babel-plugin-import \u63D2\u4EF6\u3002

\n

\u53EA\u9700\u8981\u5220\u9664 babel.config.js \u4E2D\u7684\u4EE5\u4E0B\u4EE3\u7801\u5373\u53EF\uFF1A

\n
module.exports = {\n  plugins: [\n-    ['import', {\n-      libraryName: 'vant',\n-      libraryDirectory: 'es',\n-      style: true\n-    }, 'vant']\n  ]\n};\n
\n

\u6536\u76CA

\n

\u79FB\u9664 babel-plugin-import \u6709\u4EE5\u4E0B\u6536\u76CA\uFF1A

\n\n
import { showToast, showDialog } from 'vant';\n
\n
'},null,8,t))}}}]);