ElementPlus組件與圖標(biāo)按需自動引入的實現(xiàn)方法

更新時間：2024年06月26日 10:03:32 作者：小輝吖～

這篇文章主要介紹了ElementPlus組件與圖標(biāo)按需自動引入的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

按需自動引入組件

1. 安裝ElementPlus和自動導(dǎo)入ElementPlus組件的插件

pnpm install element-plus

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

2. vite.config.ts進(jìn)行修改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自動導(dǎo)入
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(),
    // 自動導(dǎo)入ElementPlus組件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    // 自動注冊ElementPlus組件
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

然后就可以進(jìn)行測試了

<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的組件就會自動在根目錄下生成下面兩個文件

如果想更改這兩個文件的位置，可以傳入第二個參數(shù)，里面指定文件的位置。由于用到了node的東西，所以最好安裝下node的ts類型插件，這樣編譯器不爆紅

pnpm i -D @types/node

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自動導(dǎo)入
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(),
    // 自動導(dǎo)入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)),
    }),
  ],
})

現(xiàn)在文件就生成在了types文件夾內(nèi)了

按需自動引入圖標(biāo)

1. 首先安裝依賴

pnpm install @element-plus/icons-vue

pnpm i -D unplugin-icons unplugin-auto-import

2. vite.config.ts進(jìn)行修改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自動導(dǎo)入
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自動導(dǎo)入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自動導(dǎo)入ElementPlus組件
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        // 自動導(dǎo)入圖標(biāo)組件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
      // 指定ts類型文件位置
      dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url)),
    }),
    // 自動注冊ElementPlus組件
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 自動注冊圖標(biāo)組件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
      ],
      // 指定ts類型文件位置
      dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url)),
    }),
    // 自動安裝圖標(biāo)
    Icons({
      autoInstall: true,
    }),
  ],
})

然后就可以進(jìn)行測試了

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

會發(fā)現(xiàn)圖標(biāo)并沒有顯示出來

其實是換組件名了，可以看下下面的文件，改成對應(yīng)的組件名就可以顯示了

但是有時候，其他組件想用圖標(biāo)，應(yīng)該怎么寫呢？其實正常引入就可以了

<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>

到此這篇關(guān)于ElementPlus組件與圖標(biāo)按需自動引入的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)ElementPlus按需自動引入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: