element-plus的自動(dòng)導(dǎo)入和按需導(dǎo)入方式詳解

更新時(shí)間：2022年08月09日 15:04:50 作者：acgCode

之前使用 ElementPlus 做項(xiàng)目的時(shí)候,由于不會(huì)使用按需引入耽誤了不少時(shí)間,這篇文章主要給大家介紹了關(guān)于element-plus自動(dòng)導(dǎo)入和按需導(dǎo)入的相關(guān)資料,需要的朋友可以參考下

element-plus根據(jù)官網(wǎng)文檔，推薦用戶采用按需導(dǎo)入的方式進(jìn)行導(dǎo)入。

我的項(xiàng)目是使用vite進(jìn)行構(gòu)建的，根據(jù)官網(wǎng)的文檔，利用unplugin-vue-components插件進(jìn)行自動(dòng)按需導(dǎo)入。

當(dāng)我們使用element的標(biāo)簽時(shí)，無需再使用import對(duì)組件進(jìn)行導(dǎo)入。

例如：

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

會(huì)自動(dòng)引入ElButton組件。

不過當(dāng)我們想要使用命令的方式創(chuàng)建element組件時(shí)，樣式會(huì)無法自動(dòng)引入。

我們以ElMessage為例。

import { ElMessage } from 'element-plus'

ElMessage.warning('warning')

如果不采用import的方式引入，會(huì)直接報(bào)錯(cuò)：ElMessage沒有定義。所以這個(gè)import是省不了了。但是import了之后，消息彈窗是出來了，但是卻沒有樣式。這該怎么辦呢？

仔細(xì)閱讀文檔，我們可以發(fā)現(xiàn)在手動(dòng)導(dǎo)入里，使用了一個(gè)叫unplugin-element-plus的插件。該插件的官方文檔有詳細(xì)的使用說明，插件的主要功能如下：

import { ElButton } from 'element-plus'

//    ↓ ↓ ↓ ↓ ↓ ↓

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

我們可以看出，這個(gè)插件其實(shí)就是把你需要的組件的css或者sass文件自動(dòng)引入進(jìn)來，剛好彌補(bǔ)了上面的問題。

最后我們?nèi)缦屡渲庙?xiàng)目：

首先我們要安裝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的自動(dòng)導(dǎo)入了。當(dāng)然使用命令的組件還是需要你手動(dòng)導(dǎo)入一下的。

補(bǔ)充：elementPlus圖標(biāo)自動(dòng)引入

首先安裝插件

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

下載圖標(biāo)庫

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,
    }),
  ]
})

總結(jié)

到此這篇關(guān)于element-plus自動(dòng)導(dǎo)入和按需導(dǎo)入的文章就介紹到這了,更多相關(guān)element-plus自動(dòng)導(dǎo)入和按需導(dǎo)入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: