vue3 vite配置按需自动引入

按需自动引入

为了避免在多个页面重复引入 API 或 组件，由此而产生的自动导入插件来节省重复代码和提高开发效率。

插件	说明	自动导入对象
unplugin-auto-import	按需自动导入API	ref，reactive,watch,computed 等API
unplugin-vue-components	按需自动导入组件	自动UI组件或者自定义组件

未使用和使用自动导入插件的区别：

插件名	未使用	使用
unplugin-auto-import
unplugin-vue-components

安装依赖

pnpm install unplugin-auto-import -D  //自动引入API
pnpm install unplugin-vue-components -D //自动引入组件
//同时安装
pnpm install -D unplugin-auto-import unplugin-vue-components

vite.config.ts - 自动导入配置

import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import {AntDesignVueResolver} from 'unplugin-vue-components/resolvers' //antdesign

// pulgins下新增
// 自动引入
        AutoImport({
            imports: ['vue', 'vue-router']
        }),
        // 自动加载组件 默认自动注册src/components下的组件，可使用dts指定自动注册组件路径
        Components({
            resolvers: [
                AntDesignVueResolver({
                    importStyle: false, // css in js
                }),
            ],
            //dts:["src/components"]
        })

OK，大功告成！