脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → ElementPlus按需自动引入

ElementPlus组件与图标按需自动引入的实现方法

 更新时间：2024年06月26日 10:03:32   作者：小辉吖～  
这篇文章主要介绍了ElementPlus组件与图标按需自动引入的实现方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

按需自动引入组件

1. 安装ElementPlus和自动导入ElementPlus组件的插件

pnpm install element-plus
pnpm install -D unplugin-vue-components unplugin-auto-import

2. vite.config.ts进行修改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入ElementPlus组件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    // 自动注册ElementPlus组件
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

然后就可以进行测试了

<template>
  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger" @click="click">Danger</el-button>
  </div>
</template>
<script lang="ts" setup>
const click = () => {
  ElMessage.error('Error Message')
}
</script>

使用ElementPlus的组件就会自动在根目录下生成下面两个文件

如果想更改这两个文件的位置，可以传入第二个参数，里面指定文件的位置。由于用到了node的东西，所以最好安装下node的ts类型插件，这样编译器不爆红

pnpm i -D @types/node
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 引入node的url模块
import { fileURLToPath } from 'node:url'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入ElementPlus组件
    AutoImport({
      resolvers: [ElementPlusResolver()],
      // 指定ts类型文件位置
      dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url)),
    }),
    // 自动注册ElementPlus组件
    Components({
      resolvers: [ElementPlusResolver()],
      // 指定ts类型文件位置
      dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url)),
    }),
  ],
})

现在文件就生成在了types文件夹内了

按需自动引入图标

1. 首先安装依赖

pnpm install @element-plus/icons-vue
pnpm i -D unplugin-icons unplugin-auto-import

2.  vite.config.ts进行修改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 引入node的url模块
import { fileURLToPath } from 'node:url'
//  ElementPlus的Icon自动导入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入ElementPlus组件
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
      // 指定ts类型文件位置
      dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url)),
    }),
    // 自动注册ElementPlus组件
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
      ],
      // 指定ts类型文件位置
      dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url)),
    }),
    // 自动安装图标
    Icons({
      autoInstall: true,
    }),
  ],
})

然后就可以进行测试了

<template>
  <div>
    <el-icon color="pink">
      <Edit />
    </el-icon>
  </div>
</template>

会发现图标并没有显示出来

其实是换组件名了，可以看下下面的文件，改成对应的组件名就可以显示了

但是有时候，其他组件想用图标，应该怎么写呢？其实正常引入就可以了

<template>
  <div>
    <el-icon color="pink">
      <IEpEdit />
    </el-icon>
    <el-button type="primary" :icon="Edit" circle />
  </div>
</template>
<script lang="ts" setup>
import { Edit } from '@element-plus/icons-vue'
</script>

到此这篇关于ElementPlus组件与图标按需自动引入的实现方法的文章就介绍到这了,更多相关ElementPlus按需自动引入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 手写Vue弹窗Modal的实现代码

    手写Vue弹窗Modal的实现代码

    这篇文章主要介绍了手写Vue弹窗Modal的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 如何通过shell脚本自动生成vue文件详解

    如何通过shell脚本自动生成vue文件详解

    这篇文章主要给大家介绍了关于如何通过shell脚本自动生成vue文件的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-09-09
  • vue如何使用swiper插件修改左右箭头的默认样式

    vue如何使用swiper插件修改左右箭头的默认样式

    这篇文章主要介绍了vue如何使用swiper插件修改左右箭头的默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • 关于vant的时间选择器使用方式

    关于vant的时间选择器使用方式

    这篇文章主要介绍了关于vant的时间选择器使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue.js中的下载和调用方式

    Vue.js中的下载和调用方式

    这篇文章主要介绍了Vue.js中的下载和调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-11-11
  • vue3实现多层级列表的项目实践

    vue3实现多层级列表的项目实践

    本文主要介绍了vue3实现多层级列表的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue项目中使用bpmn为节点添加颜色的方法

    vue项目中使用bpmn为节点添加颜色的方法

    这篇文章主要介绍了vue项目中使用bpmn为节点添加颜色的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Vue3 计算属性的用法详解

    Vue3 计算属性的用法详解

    学过 vue2 的宝子们应该都清楚，计算属性这个东西在项目开发过程中使用的还是比较频繁的，使用频率相对来说比较高。本文就来为大家介绍一下Vue3中计算属性的用法，需要的可以参考一下
    2022-07-07
  • vue如何使用element组件自定义v-loading

    vue如何使用element组件自定义v-loading

    这篇文章主要介绍了vue如何使用element组件自定义v-loading问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 讨论vue中混入mixin的应用

    讨论vue中混入mixin的应用

    这篇文章主要介绍了vue中混入mixin的理解和应用，对vue感兴趣的同学，可以参考下
    2021-05-05

最新评论