手动按需使用组件比较麻烦,需要先导入。配置函数自动按需导入后直接使用即可。
安装:
通过 npm 安装
npm i unplugin-vue-components -D
通过 yarn 安装
yarn add unplugin-vue-components -D
通过 pnpm 安装
pnpm add unplugin-vue-components -D
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// 解析单文件组件的插件
vue(),
// 自动导入的插件,解析器可以是 vant element and-vue
Components({
dts: false,
// 原因:Toast Confirm 这类组件的样式还是需要单独引入,样式全局引入了,关闭自动引入
resolvers: [VantResolver({ importStyle: false })]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})