[ Day 09 vant快速入门 | 青训营笔记]

这是我参与「第五届青训营」伴学笔记创作活动的第 9 天

vant2官网vant-contrib.gitee.io/vant/v2/#/z…

1.安装

Vue 3 项目，安装最新版 Vant：

npm i vant -S

Vue 2 项目，安装 Vant 2：

npm i vant@latest-v2 -S

2.引入组件

方式一. 自动按需引入组件 (推荐)

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

安装插件

npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
Tips: 如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入。

方式二. 手动按需引入组件

在不使用插件的情况下，可以手动引入需要的组件。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

方式三. 导入所有组件

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
Tips: 配置按需引入后，将不允许直接导入所有组件。

3.全局注册

import Vue from'vue';

import { Button } from'vant';

// 方式一. 通过 Vue.use 注册

// 注册完成后，在模板中通过或标签来使用按钮组件

Vue.use(Button);

// 方式二. 通过 Vue.component 注册

// 注册完成后，在模板中通过标签来使用按钮组件

Vue.component(Button.name, Button);

组件注册

Vant 支持多种组件注册方式，请根据实际业务需要进行选择。

全局注册

全局注册后，你可以在 app 下的任意子组件中使用注册的 Vant 组件。

import Vue from 'vue';
import { Button } from 'vant';

// 方式一. 通过 Vue.use 注册
// 注册完成后，在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件
Vue.use(Button);

// 方式二. 通过 Vue.component 注册
// 注册完成后，在模板中通过 <van-button> 标签来使用按钮组件
Vue.component(Button.name, Button);

局部注册

局部注册后，你可以在当前组件中使用注册的 Vant 组件。

import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button,
  },
};