import{_ as s,o as a,c as n,d as l}from"./app.b03f2eea.js";const i=JSON.parse('{"title":"VantUI \u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5B89\u88C5\u63D2\u4EF6","slug":"\u5B89\u88C5\u63D2\u4EF6","link":"#\u5B89\u88C5\u63D2\u4EF6","children":[]},{"level":2,"title":"\u4F7F\u7528\u7EC4\u4EF6","slug":"\u4F7F\u7528\u7EC4\u4EF6","link":"#\u4F7F\u7528\u7EC4\u4EF6","children":[]}],"relativePath":"guide/vue2/vant.md","lastUpdated":1661959619000}'),p={name:"guide/vue2/vant.md"},o=l(`

VantUI \u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D

\u9879\u76EE\u91C7 \u7528Vant \u81EA\u52A8\u6309\u9700\u5F15\u5165\u7EC4\u4EF6 (\u63A8\u8350)\u4E0B \u9762\u5B89\u88C5\u63D2\u4EF6\u4ECB\u7ECD\uFF1A

babel-plugin-import \u662F\u4E00\u6B3E babel \u63D2\u4EF6\uFF0C\u5B83\u4F1A\u5728\u7F16\u8BD1\u8FC7\u7A0B\u4E2D\u5C06 import \u7684\u5199\u6CD5\u81EA\u52A8\u8F6C\u6362\u4E3A\u6309\u9700\u5F15\u5165\u7684\u65B9\u5F0F

\u5B89\u88C5\u63D2\u4EF6

bash
npm i babel-plugin-import -D

\u5728babel.config.js \u8BBE\u7F6E

javascript
// \u5BF9\u4E8E\u4F7F\u7528 babel7 \u7684\u7528\u6237\uFF0C\u53EF\u4EE5\u5728 babel.config.js \u4E2D\u914D\u7F6E
const plugins = [
  [
    "import",
    {
      libraryName: "vant",
      libraryDirectory: "es",
      style: true,
    },
    "vant",
  ],
];
module.exports = {
  presets: [
    ["@vue/cli-plugin-babel/preset", { useBuiltIns: "usage", corejs: 3 }],
  ],
  plugins,
};

\u4F7F\u7528\u7EC4\u4EF6

\u9879\u76EE\u5728 src/plugins/vant.js \u4E0B\u7EDF\u4E00\u7BA1\u7406\u7EC4\u4EF6\uFF0C\u7528\u54EA\u4E2A\u5F15\u5165\u54EA\u4E2A\uFF0C\u65E0\u9700\u5728\u9875\u9762\u91CC\u91CD\u590D\u5F15\u7528

javascript
// \u6309\u9700\u5168\u5C40\u5F15\u5165 vant\u7EC4\u4EF6
import Vue from "vue";
import { Button, List, Cell, Tabbar, TabbarItem } from "vant";
Vue.use(Button);
Vue.use(Cell);
Vue.use(List);
Vue.use(Tabbar).use(TabbarItem);
`,10),e=[o];function t(c,r,D,y,F,C){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};