脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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双向数据绑定原理

     面试问题Vue双向数据绑定原理

    这篇文章主要介绍了 面试问题Vue双向数据绑定原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • element UI 2.15.13与vue2.0表格勾选回显关键demo

    element UI 2.15.13与vue2.0表格勾选回显关键demo

    这篇文章主要为大家介绍了element UI 2.15.13与vue2.0表格勾选回显关键demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • vue+vuecli+webpack中使用mockjs模拟后端数据的示例

    vue+vuecli+webpack中使用mockjs模拟后端数据的示例

    本篇文章主要介绍了vue+vuecli+webpack中使用mockjs模拟后端数据的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-10-10
  • 使用Vue CLI配置代码压缩、加密和混淆功能示例代码

    使用Vue CLI配置代码压缩、加密和混淆功能示例代码

    这篇文章主要介绍了使用Vue CLI配置代码压缩、加密和混淆功能,通过配置 vue.config.js 文件，我们可以使用 Vue CLI 轻松实现对 Vue 应用程序代码的压缩、加密和混淆，需要的朋友可以参考下
    2023-06-06
  • vue2升级vue3问题bug解决分析整理

    vue2升级vue3问题bug解决分析整理

    这篇文章主要介绍了vue2升级vue3遇到的问题bug解决分析整理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 如何使用Vue3+Vite+TS快速搭建一套实用的脚手架

    如何使用Vue3+Vite+TS快速搭建一套实用的脚手架

    Vite是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具,下面这篇文章主要给大家介绍了关于如何使用Vue3+Vite+TS快速搭建一套实用脚手架的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Vue打包优化之生产环境删除console日志配置

    Vue打包优化之生产环境删除console日志配置

    这篇文章主要为大家介绍了Vue打包优化之生产环境删除console日志配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • 详解Vue之计算属性

    详解Vue之计算属性

    这篇文章主要介绍了Vue之计算属性的相关知识，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-06-06
  • vue实现路由监听和参数监听

    vue实现路由监听和参数监听

    今天小编就为大家分享一篇vue实现路由监听和参数监听，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue-cli如何添加less 以及sass

    vue-cli如何添加less 以及sass

    本篇文章主要介绍了vue-cli如何添加less 以及sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论