Vite按需匯入element-plus元件和icon

sybkl發表於2024-07-06
Vite元件

Vue3-Vite專案中使用element-plus，按需匯入element-plus元件和el-icon，以及自動匯入Vue相關函式。

如果你對打包後的檔案大小不是很在乎，那麼使用完整匯入會更方便。配置也更加簡單，可以直接參考element-plus的官網。

安裝依賴

npm i element-plus @element-plus/icons-vue
npm i unplugin-auto-import unplugin-vue-components unplugin-icons unplugin-element-plus -D

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 自動匯入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 自動匯入圖示
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import ElementPlus from 'unplugin-element-plus/vite'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 按需匯入，自動匯入
    AutoImport({
      // 自動匯入 Vue 相關函式，如：ref, reactive, toRef 等
      imports: ['vue'],
      // 自動匯入 Element Plus 相關函式，如：ElMessage, ElMessageBox... (帶樣式)
      resolvers: [
        ElementPlusResolver(),
        // 自動匯入圖示元件
        IconsResolver({
          prefix: 'Icon',
        })
      ],
    }),
    Components({
      resolvers: [
        // 自動註冊圖示元件
        IconsResolver({
          // 字首（經測試，該選項無作用，圖示依然只能透過 i-ep-xxx 呼叫）
          // <el-icon><Lock /></el-icon>  這樣按需引入的話，這種形式的el-icon code就用不了了
          // 只能 <el-icon><i-ep-lock /></el-icon>
          enabledCollections: ['ep'],
        }),
        // 自動匯入 Element Plus 元件
        ElementPlusResolver({
          importStyle: 'sass'
        })
      ],
    }),
    Icons({
      autoInstall: true,
    }),
    // 手動匯入 el 元件，會自動新增對應的 css
    // 替換預設語言
    ElementPlus({
      defaultLocale: 'zh-cn',
      useSource: true
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

element-plus官網所使用的el-icon格式化為

而採用以上按需匯入icon的方法則需要使用以下圖示格式

本文章參考內容：

  • ice-cream-admin
  • [vue3 vue.config.js配置Element-plus元件和Icon圖示實現按需自動引入](https://blog.csdn.net/qq_34569497/article/details/130411712?ops_request_misc={"request_id"%3A"170273200116800180629771"%2C"scm"%3A"20140713.130102334.."}&request_id=170273200116800180629771&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-2-130411712-null-null.142v96pc_search_result_base8&utm_term=element-plus icon自動匯入&spm=1018.2226.3001.4187)

相關文章