The use of automatic import in vite+vue3+ts
Please follow my above article (vite+ vue3 +ts novice tutorial) to install vite+vue3+ts.
1. Install the required libraries
pnpm install -D unplugin-vue-components unplugin-auto-import //安装unplugin-vue-components 和 unplugin-auto-import
pnpm install --save element-plus ant-design-vue//所用的组件element和ant给以演示
The following is used according to Element Plus
and UI component libraryAnt Design Vue
2. Configure the root directory vite.config.ts
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue element-plus等
import Components from 'unplugin-vue-components/vite'
//Ant
import {
AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
//element
import {
ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
Components({
//自定义的模块
dirs: ['src/components'],
extensions: ['vue', 'ts'],
resolvers: [AntDesignVueResolver(), ElementPlusResolver()],//所自动导入的element和Ant
}),
AutoImport({
// 插件进行自动导入相关的依赖库
//安装两行后你会发现在组件中不用再导入ref,reactive等
imports: ['vue', 'vue-router'],
// 可选,用于自动导入组件类型
dts: 'src/components.d.ts',
}),
],
})
3. tsconfig.json
Add the following compilerOptions and include attributes in
{
"compilerOptions": {
...
"plugins": [{
"name": "typescript-plugin-css-modules" }],
},
"include": ["./src/**/*"]
}
4.Use
Use it directly in the project without citing it
<template>
<div>
ant
<a-button type="primary">Primary Button</a-button>
__
<a-button type="primary" loading>Loading</a-button>
el
<el-button>element-plus</el-button>
__
<el-button type="warning">Warning</el-button>
</div>
</template>