Vant组件库的使用

Vant的导入与使用

Vant 全部导入

目标：阅读文档，，掌握全部导入的基本使用

官网：Vant 2 - Mobile UI Components built on Vue

1.安装vant-ui

 yarn add vant@latest-v2

2.main.js中注册

import Vant from 'vant'
import 'vant/lib/index.css'
//把vant中所有的组件都导入
Vue.use(Vant)

3.使用测试

<vant-button type="primary">注意按钮</vant-button>
<vant-button type="info">信息按钮</vant-button>

vant按需导入（配合模块化管理）

目标：阅读文档，掌握按需导入的基本使用

按需导入：

1.安装vant-ui(已安装)

 yarn add vant@latest-v2

2.安装插件

 yarn add babel-plugin-import -D

3.babel.config.js中配置

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

4.main.js按需导入注册

 import Vue from 'vue'
 import {Button} from 'vant'
 ​
 Vue.use(Button);

5.测试使用

<van-button type="primary">主要按钮</van-button>
 <van-button type="info">信息按钮</van-button>

注意：这边样式没显示，需要项目重启

模块化开发

1.在src下创建utils文件存放vant-ui.js用于存放导入的vant组件

src/utils/vant-ui.js

import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);

2.在main.js中导入vant-ui.js全局注册

//mian.js
import  '@/utils/vant-ui'