# Vue 3 项目,安装最新版
Vant npm i vant
vant按需引入- - -安装“unplugin-vue-components” 插件
Vite 中使用 Vant 的话,可以使用 “unplugin-vue-components” 插件,这个插件可以按需引入用到的Vant组件,使用Vant 组件时直接在 template模板 里使用就可以,不用手动 在 ts 脚本里 import导入
# 通过 npm 安装
npm i @vant/auto-import-resolver unplugin-vue-components -D# 通过 yarn 安装
yarn add @vant/auto-import-resolver unplugin-vue-components -D# 通过 pnpm 安装
pnpm add @vant/auto-import-resolver unplugin-vue-components -D# 通过 bun 安装
bun add @vant/auto-import-resolver unplugin-vue-components -D
1、如果是基于 vite 的项目,在 vite.config.js 文件中配置插件:
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
export default {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
};
2、如果是基于 vue-cli 的项目,在 vue.config.js 文件中配置插件:
const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
configureWebpack: {
plugins: [
ComponentsPlugin({
resolvers: [VantResolver()],
}),
],
},
};
3、如果是基于 webpack 的项目,在 webpack.config.js 文件中配置插件:
const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
plugins: [
ComponentsPlugin({
resolvers: [VantResolver()],
}),
],
};
按钮
Vant 中 Toast,Dialog,Notify 和 ImagePreview 组件是函数式组件,需要 import 引入后,再使用,且要引入组件样式,例如:
mian.ts 中引入组件样式:
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';
引用组件后,在浏览器中打开调试窗口,找到对应要修改样式的组件元素,查看组件元素的类名,重写该类名样式
有时不生效可能是权重不够,叠加类名或者样式添加 “ !important ”
示例:
.van-cell {
font-size: 28px!important;
background: transparent!important;
}
可能是被遮盖了,设置表单的右边margin 大于 清除图标的宽度:
示例:
.van-field__control {
margin-right: 15px!important;
}
1、安装模块
npm i @vant/touch-emulator -S
2、在 “ main.ts ” 文件中引入模块后自动生效
import ‘@vant/touch-emulator’
安装引入后如果没有立即生效,可以重启一下项目,再查看效果
查阅Vant 文档了解到 vant是针对移动端的,PC端下有些组件可能会失效,可以安装 “vant/touch-emulator” 模块解决。
Vant 有 Vue 2 版本、Vue 3 版本、微信小程序版本、 React 版本、支付宝小程序版本。
了解更多vant先关内容可以查阅Vant官方文档~