目录
一、安装
1.1 通过npm安装
在现有项目中使用Vant时,可以通过npm进行安装:
# Vue 3 项目,安装最新版 Vant
npm i vant
# Vue 2 项目,安装 Vant 2
npm i vant@latest-v2
也可以通过 yarn 或 pnpm 进行安装:
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant
1.2 通过CDN安装
使用Vant最简单的方法是直接在HTML文件中引入CDN链接,之后你可以通过全局变量 vant 访问到所有组件:
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<script>
// 在 #app 标签下渲染一个按钮组件
const app = Vue.createApp({
template: `<van-button>按钮</van-button>`,
});
app.use(vant);
// 通过 CDN 引入时不会自动注册 Lazyload 组件
// 可以通过下面的方式手动注册
app.use(vant.Lazyload);
// 调用工具函数,弹出一个 Toast
vant.showToast('提示');
app.mount('#app');
</script>
二、引入组件
2.1 方法一:常规用法
下面是使用Vant组件的用法示例:
import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
const app = createApp();
// 3. 注册你需要的组件
app.use(Button);
2.2 方法二:按需引入组件样式
在基于 vite
、webpack
或 vue-cli
的项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式。
相比于常规用法,这种方式可以按需引入组件的 CSS 样式,从而减少一部分代码体积,但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致,我们推荐使用更简便的常规用法。
1.安装插件
# 通过 npm 安装
npm i unplugin-vue-components -D
# 通过 yarn 安装
yarn add unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add unplugin-vue-components -D
2.配置插件
如果是基于 vite
的项目,在 vite.config.js
文件中配置插件:
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
};
如果是基于 vue-cli
的项目,在 vue.config.js
文件中配置插件:
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
configureWebpack: {
plugins: [
ComponentsPlugin({
resolvers: [VantResolver()],
}),
],
},
};
如果是基于 webpack
的项目,在 webpack.config.js
文件中配置插件:
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
plugins: [
ComponentsPlugin({
resolvers: [VantResolver()],
}),
],
};
3.使用组件
完成以上两步,就可以直接在模板中使用 Vant 组件了,unplugin-vue-components
会解析模板并自动注册对应的组件。
<template>
<van-button type="primary" />
</template>
4.引入函数组件样式
Vant 中有个别组件是以函数的形式提供的,包括 Toast
,Dialog
,Notify
和 ImagePreview
组件。在使用函数组件时,unplugin-vue-components
无法自动引入对应的样式,因此需要手动引入样式。
// Toast
import { showToast } from 'vant';
import 'vant/es/toast/style';
// Dialog
import { showDialog } from 'vant';
import 'vant/es/dialog/style';
// Notify
import { showNotify } from 'vant';
import 'vant/es/notify/style';
// ImagePreview
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';
三、组件用法
3.1 全局注册
全局注册后,你可以在app下的任意子组件中使用注册的Vant组件
import { Button } from 'vant';
import { createApp } from 'vue';
const app = createApp();
// 方式一. 通过 app.use 注册
// 注册完成后,在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件
app.use(Button);
// 方式二. 通过 app.component 注册
// 注册完成后,在模板中通过 <van-button> 标签来使用按钮组件
app.component(Button.name, Button);
3.2 局部注册
局部注册后,你可以在当前组件中使用注册的Vant组件
import { Button } from 'vant';
export default {
components: {
[Button.name]: Button,
},
};
3.3 <script setup>
在<script setup >中可以直接使用Vant组件,不需要进行组件注册。
<script setup>
import { Button } from 'vant';
</script>
<template>
<Button />
</template>