Vant 是一款基于 Vue.js 的移动端组件库,它提供了丰富的组件,可以帮助开发者快速构建移动端应用。Vant 教程是一个非常有用的资源,它可以帮助开发者快速学习 Vant 的使用方法,并能够更好地利用 Vant 快速开发出优质的移动端应用。
Vant 教程主要包含三部分内容:安装、使用和进阶。首先,在安装部分中,教程会详细介绍如何使用 npm 和 yarn 安装 Vant 以及如何在不同的项目中使用 Vant。其次,在使用部分中,教程会详细介绍 Vant 中各个组件的使用方法、API 以及常见问题的解决方法。最后,在进阶部分中,教程会详细介绍如何扩展 Vant 的样式、如何自定义主题、如何扩展新的 UI 等内容。
// 安装 vue-cli 3.0+ npm install -g @vue/cli // 创建一个新项目 vue create my-project // 进入新项目目录并安装 vant 依赖包 cd my-project && npm install vant --save
通过本章节你可以了解到 Vant 的安装方法和基本使用姿势。
在现有项目中使用 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
使用 Vant 最简单的方法是直接在 HTML 文件中引入 CDN 链接,之后你可以通过全局变量 vant
访问到所有组件。
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" rel="external nofollow" target="_blank"
/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://fastly.jsdelivr.net/npm/vue@3" rel="external nofollow" ></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js" rel="external nofollow" ></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>
你可以通过以下免费 CDN 服务来使用 Vant:
注意:免费 CDN 一般用于制作原型或个人小型项目,不推荐在企业生产环境中使用免费 CDN。
对于企业开发者,建议使用以下方式:
我们提供了丰富的示例工程,通过示例工程你可以了解如下内容:
下面是使用 Vant 组件的用法示例:
import { createApp } from "vue";
// 1. 引入你需要的组件
import { Button } from "vant";
// 2. 引入组件样式
import "vant/lib/index.css";
const app = createApp();
// 3. 注册你需要的组件
app.use(Button);
Vant 支持多种组件注册方式,除了在 app 上全局注册组件,你也可以选择其他的方式,比如局部注册,详见 组件注册 章节。
提示:Vant 默认支持 Tree Shaking,因此你不需要配置任何插件,通过 Tree Shaking 即可移除不需要的 JS 代码,但 CSS 样式无法通过这种方式优化,如果需要按需引入 CSS 样式,请参考下面的方法二。
在基于 vite
、webpack
或 vue-cli
的项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式。
相比于常规用法,这种方式可以按需引入组件的 CSS 样式,从而减少一部分代码体积,但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致,我们推荐使用更简便的常规用法。
# 通过 npm 安装
npm i unplugin-vue-components -D
# 通过 yarn 安装
yarn add unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add unplugin-vue-components -D
如果是基于 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()],
}),
],
};
完成以上两步,就可以直接在模板中使用 Vant 组件了,unplugin-vue-components
会解析模板并自动注册对应的组件。
<template>
<van-button type="primary" />
</template>
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";
你可以在项目的入口文件或公共模块中引入以上组件的样式,这样在业务代码中使用组件时,便不再需要重复引入样式了。
在 Nuxt 3 中使用 Vant 时,由于 Nuxt 3 框架本身的限制,需要在 nuxt.config.ts
中添加以下配置:
import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
experimental: {
externalVue: true,
},
});
关于该问题的背景,可以参考以下 issue:
从 Vant 4.0 版本开始,将不再支持 babel-plugin-import
,请移除项目中依赖的 babel-plugin-import
插件。
只需要删除 babel.config.js
中的以下代码即可:
module.exports = {
plugins: [
- ["import", {
- libraryName: "vant",
- libraryDirectory: "es",
- style: true
- }, "vant"]
]
};
移除 babel-plugin-import
有以下收益:
babel-plugin-import
的 import 写法限制,可以从 vant 中导入除了组件以外的其他内容,比如 Vant 4 中新增的 showToast
等方法:import { showToast, showDialog } from "vant";
介绍本页面提供 Vant 的设计资源下载。设计稿组件设计稿(Sketch)包含 Sketch 格式的色彩规范、字体规范、组件设计规范。色彩规...
介绍Layout 提供了van-row和van-col两个组件来进行行列布局。引入通过以下方式来全局注册组件,更多注册方式请参考组件...
介绍日期选择器,用于选择年、月、日,通常与弹出层组件配合使用。引入通过以下方式来全局注册组件,更多注册方式请参考组件注册...
介绍在右上角展示徽标数字或小红点。引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp } from ...
介绍用于标记关键词和概括主要内容。引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp } from ...
介绍Vant 是基于有赞Zan Design System视觉规范实现的组件库,在这里可以下载 Vant 的设计资源。设计稿组件设计稿(Sketch)包含...