vue3按需引入vaut ui
1 安装vant
npm i vant
2 安装 unplugin-vue-components 插件
npm i unplugin-vue-components -D
3 修改配置, 如果是基于 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()], }), ], }, };
修改我的配置
const { defineConfig } = require('@vue/cli-service') //引入vant ui配置 const { VantResolver } = require('unplugin-vue-components/resolvers'); const ComponentsPlugin = require('unplugin-vue-components/webpack'); module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false,//关闭语法检查 configureWebpack: { plugins: [ ComponentsPlugin({ resolvers: [VantResolver()], }), ], }, })
4 自定义新建 /src/vant.config.js 配置文件
import { Button, List, Cell, CellGroup } from 'vant'; export function vant(app) { app.use(Button); app.use(List) app.use(Cell); app.use(CellGroup); }
5 main.js引入我的vant.config.js 配置文件
import { vant } from '@/config/vant.config.js' //引入我自定义vant配置 vant(app) //引入vant