import{_ as s,c as a,o as n,a as p}from"./app.3b30a875.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-vantui-\u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D"}],"relativePath":"guide/vue2/vant.md","lastUpdated":1660905131000}'),l={name:"guide/vue2/vant.md"},o=p(`

\u2705 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 n(),a("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};