Vant组件库安装和使用-支持VUE、微信小程序

在github.com中 搜索 Vant 查看组件库的信息
https://vant-contrib.gitee.io/vant/#/zh-CN/ 组件文档
安装Vant

步骤一：下载两个模块

npm i vant@next -S
和
npm i babel-plugin-import -D

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

步骤二：对于使用 babel的用户，在 babel.config.js 中配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

步骤三：在main.js主入口文件中导入需要使用的组件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vant/lib/index.css'
import {PullRefresh,List,Popup,Grid,GridItem,AddressEdit,AddressList, Icon,SubmitBar,CheckboxGroup,SwipeCell,Stepper,Checkbox,Field,Form,Tag, Button, Image as VanImage, Card,Tab, Tabs, Swipe, SwipeItem,Lazyload,Badge,Sidebar, SidebarItem, Collapse, CollapseItem } from 'vant';
createApp(App).use(Lazyload,{loading:require('./assets/images/default.png')})
.use(Swipe)
.use(SwipeItem)
.use(Badge)
.use(Sidebar)
.use(SidebarItem)
.use(Collapse)
.use(CollapseItem) .use(Tab)
.use(Tabs)
.use(Card)
.use(VanImage)
.use(Tag)
.use(Button)
.use(Form)
.use(Field)
.use(Checkbox)
.use(Stepper)
.use(SwipeCell)
.use(CheckboxGroup)
.use(SubmitBar)
.use(Icon)
.use(AddressList)
.use(AddressEdit)
.use(GridItem)
.use(Grid)
.use(Popup)
.use(List)
.use(PullRefresh)
.use(store)
.use(router)
.mount('#app')

也可以使用简易的全局导入

import { createApp } from 'vue'
import App from './App.vue'    
import router from './router'
import store from './store'
import vant from 'vant';
import 'vant/lib/index.css'
createApp(App).use(vant).use(store).use(router).mount('#app')
//自己写的组件全局导入
import tabBar from './components/tabBar/index.vue'
const app = createApp(App)
app.use(store).use(router)
// 对组件挂载到app上，就不用每个页面单独引入了
// 使用app.component 对组件进行注册
// 第一个参数是 在页面使用的组件名称，第二个参数是引入的组件
app.component('tabBar', tabBar)

导入时候有个坑，一定不要写到.mount(‘#app’)的后面，不然一定不能用，一定会报错。