一、下载 ``` npm i unplugin-auto-import unplugin-element-plus unplugin-vue-components -D ``` ### 1. [unplugin-auto-import](https://www.npmjs.com/package/unplugin-auto-import): 自动导入Api,支持Vite, Webpack, Rollup and esbuild。使用： ``` // import { computed, ref } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2) ``` 即不再需要手动引入Api。 ### 2.[unplugin-vue-components](https://www.npmjs.com/package/unplugin-vue-components) 为Vue自动按需导入组件，不再需要手动导入再声明支持： Vite, Webpack, Vue CLI, Rollup, esbuild等使用： ``` ``` ### 3.在Vite中配置实现自动导入组件，如element plus ``` // vite.config.ts import { defineConfig } from 'vite' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ // ... plugins: [ // ... AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], }) ``` ### 4.自动导入components下的自定义组件在上面代码里加入 ``` // vite.config.js Components({ // dirs 指定组件所在位置，默认为 src/components // 可以让我们使用自己定义组件的时候免去 import 的麻烦 dirs: ['src/components/', 'src/pages/lauch/components/'], // 配置需要将哪些后缀类型的文件进行自动按需引入，'vue'为默认值 extensions: ['vue'], // 解析组件，这里以 Element Plus 为例 resolvers: [ElementPlusResolver()], // 生成components.d.ts dts: true, // 遍历子目录 deep: true }), ``` ``` dts：true 或者为 'src/components.d.ts'时，则会自动生成components.d.ts ``` ``` components.d.ts：含义：**.d.ts为全局声明文件，只包含声明类型，并不包括功能实现。其中d的意思就是declare(声明)。内容： ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d947e96251448c6b33d38102f08b188~tplv-k3u1fbpfcp-zoom-1.image) ``` 作用：鼠标放在自动导入的组件上面时给出提示： ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/611ad575d4504d569de10fa4928e39ff~tplv-k3u1fbpfcp-zoom-1.image) ### 5.自动导入API ``` AutoImport({ // 自动导入vue相关的Api imports: [ 'vue', 'vue-router', '@vueuse/core', /* 自定义 */ { 　　　　 // onBeforeRouteLeave 'vue-router’的这个Api未被自动导入，在这里补充 'vue-router': ['onBeforeRouteLeave'], 'lodash/isUndefined': [['default', 'isUndefined']], /* 自定义模块 */ api: [['default', 'api']], hooks: [['default', 'hooks']], store: [['default', 'store']] } ], // 生成auto-import.d.ts声明文件 dts: 'src/auto-import.d.ts', 　　　 // 解析Api resolvers: [ElementPlusResolver()] }), ``` ### 6.难点：自动导入element plus的icon （1）先安装 ``` npm install @element-plus/icons-vue unplugin-icons -D ``` 参考[element-plus-best-practices](https://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts#L21-L58) ``` import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import IconResolver from 'unplugin-icons/resolver' import Icons from 'unplugin-icons/vite' ``` (2) 配置 ``` AutoImport({ // 自动导入vue相关的Api imports: [ 'vue', 'vue-router', ], dts: 'src/auto-import.d.ts', resolvers: [ElementPlusResolver(), IconResolver({ prefix: 'Icon' }) ] }), ``` ``` Components({ dirs: ['src/components/', 'src/pages/Dashboard/components/'], extensions: ['vue'], // 解析的 UI 组件库，这里以 Element Plus 为例 resolvers: [ElementPlusResolver(), IconResolver({ enabledCollections: ['ep'] })], dts: true, deep: true }), Icons({ scale: 1, defaultClass: 'inline-block', autoInstall: true }), ``` （3）使用 ``` // 或 ``` 一开始我是使用这种形式，发现不生效，最后使用了上述这种，生效！至于为什么这样写就能生效，希望知道的朋友指导一下~ ### 7.[element plus](https://element-plus.org/zh-CN/component/icon.html#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9B%B4%E6%8E%A5%E5%BC%95%E5%85%A5) 官方的另外一个写法 ``` // main.js import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App).use(i18n).use(pinia) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(router).mount('#app') ```