VantUI 手动按需引用组件

在开发一个复杂的单页面单应用时，有时候并不需要使用插件去做按需加载，可以手动加载组件，这样做的好处是更加直观易维护。

1.官网的介绍如下图，很简洁但是不太全面。

2. 比如我们要引用一个NavBar导航栏组件，官网上介绍是这样的，并没有写如何加载css，所以引用的组件是没有样式的。

这两种加载方式的功能是一样的，第二个更简洁一些

import Button from 'vant/lib/button'
import {Button} from 'vant'

如何按需引用

上面说了，官网的介绍只是缺少了如何手动按需加载css，我们只需要加载对应的css就可以了，但这里需要注意一点。

//错误的方式
import {NavBar} from 'vant' 
import 'vant/lib/NavBar/style'   //错误的引用

//正确的方式
import {NavBar} from 'vant' 
import 'vant/lib/nav-bar/style'   //正确的引用方式

//或者这样引用也是正确的
import NavBar from 'vant/lib/nav-bar' 
import 'vant/lib/nav-bar/style'   //正确的引用方式

可以看出，在引用组件的时候我们并不能使用驼峰命名，事实上vantUI承载组件的文件夹就不是驼峰式命名的，这是由于命名规范的问题，如下图

全局引用和单页面引用

1. 全局引用方式

import { 
    Dialog
    NavBar,
} from 'vant'

import 'vant/es/dialog/style'
import 'vant/es/nav-bar/style'

const app = createApp(App)

app.use(Dialog).use(NavBar)
.mount('#app')

2. 单组件引用方式

import { 
    Dialog
    NavBar,
} from 'vant'

import 'vant/es/dialog/style'
import 'vant/es/nav-bar/style'
export default {
    components:{
        [Dialog.name]:Dialog,
        [NavBar.name]:NavBar
    },
}