vite 自动导入组件、API，包括element |
您所在的位置：网站首页 › vue项目导入icon › vite 自动导入组件、API，包括element |
vite 自动导入组件、API，包括element
|
一、下载 npm i unplugin-auto-import unplugin-element-plus unplugin-vue-components -D 复制代码 1. 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为Vue自动按需导入组件，不再需要手动导入再声明 支持： Vite, Webpack, Vue CLI, Rollup, esbuild等 使用： // import HelloWorld from './src/components/HelloWorld.vue' export default { name: 'App', // components: { // HelloWorld // } } 复制代码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(声明)。 内容： 复制代码
作用：鼠标放在自动导入的组件上面时给出提示： 复制代码
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 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 官方的另外一个写法 // 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') 复制代码 |
【本文地址】
今日新闻 |
推荐新闻 |