element-plus的自動匯入和按需匯入方式詳解

2022-08-09 18:00:31

element-plus根據官網檔案，推薦使用者採用按需匯入的方式進行匯入。

我的專案是使用vite進行構建的，根據官網的檔案，利用unplugin-vue-components外掛進行自動按需匯入。

當我們使用element的標籤時，無需再使用import對元件進行匯入。

例如：

<el-button>test</el-button>

會自動引入ElButton元件。

不過當我們想要使用命令的方式建立element元件時，樣式會無法自動引入。

我們以ElMessage為例。

import { ElMessage } from 'element-plus'

ElMessage.warning('warning')

如果不採用import的方式引入，會直接報錯：ElMessage沒有定義。所以這個import是省不了了。但是import了之後，訊息彈窗是出來了，但是卻沒有樣式。這該怎麼辦呢？

仔細閱讀檔案，我們可以發現在手動匯入裡，使用了一個叫unplugin-element-plus的外掛。該外掛的官方檔案有詳細的使用說明，外掛的主要功能如下：

import { ElButton } from 'element-plus'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

我們可以看出，這個外掛其實就是把你需要的元件的css或者sass檔案自動引入進來，剛好彌補了上面的問題。

最後我們如下設定專案：

首先我們要安裝unplugin-vue-components和unplugin-element-plus。

npm i unplugin-vue-components unplugin-element-plus -D

之後設定一下vite.config.js檔案。

import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ElementPlus({
      importStyle: 'sass',
      useSource: true
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

這樣設定之後，我們就可以享用element-plus的自動匯入了。當然使用命令的元件還是需要你手動匯入一下的。

補充：elementPlus圖示自動引入

首先安裝外掛

npm i -D unplugin-icons unplugin-vue-components

下載圖示庫

npm i @element-plus/icons-vue

設定vite.config.js

import path from 'path'
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 Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import {
  ElementPlusResolver
} from 'unplugin-vue-components/resolvers'
const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig({
  esolve: {
    alias: {
      '@': pathSrc,
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ['ep'],
        })
      ],
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
    Icons({
      autoInstall: true,
    }),
  ]
})

總結

到此這篇關於element-plus自動匯入和按需匯入的文章就介紹到這了,更多相關element-plus自動匯入和按需匯入內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

element-plus的自動匯入和按需匯入方式詳解

總結

熱門文章