vite+vue3+ts中自动导入的使用
请按照我的上述文章(vite+vue3+ts新手使用教程)安装vite+vue3+ts.
1.安装需要的库
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给以演示
以下根据Element Plus
和 Ant Design Vue
UI 组件库来使用
2.配置根目录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
中添加以下 compilerOptions 和 include 属性
{
"compilerOptions": {
...
"plugins": [{
"name": "typescript-plugin-css-modules" }],
},
"include": ["./src/**/*"]
}
4.使用
直接在项目中使用无需在引用
<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>