欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年08月09日 15:04:50   作者:acgCode  
之前使用 ElementPlus 做項目的時候,由于不會使用按需引入耽誤了不少時間,這篇文章主要給大家介紹了關(guān)于element-plus自動導入和按需導入的相關(guān)資料,需要的朋友可以參考下

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

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

當我們使用element的標簽時,無需再使用import對組件進行導入。

例如:

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

會自動引入ElButton組件。

不過當我們想要使用命令的方式創(chuàng)建element組件時,樣式會無法自動引入。

我們以ElMessage為例。

import { ElMessage } from 'element-plus'

ElMessage.warning('warning')

如果不采用import的方式引入,會直接報錯:ElMessage沒有定義。所以這個import是省不了了。但是import了之后,消息彈窗是出來了,但是卻沒有樣式。這該怎么辦呢?

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

import { ElButton } from 'element-plus'

//    ↓ ↓ ↓ ↓ ↓ ↓

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

我們可以看出,這個插件其實就是把你需要的組件的css或者sass文件自動引入進來,剛好彌補了上面的問題。

最后我們?nèi)缦屡渲庙椖浚?/p>

首先我們要安裝unplugin-vue-componentsunplugin-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,
    }),
  ]
})

總結(jié)

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

相關(guān)文章

  • vue中可編輯樹狀表格的實現(xiàn)代碼

    vue中可編輯樹狀表格的實現(xiàn)代碼

    這篇文章主要介紹了vue中可編輯樹狀表格的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-10-10
  • vue實現(xiàn)div拖拽互換位置

    vue實現(xiàn)div拖拽互換位置

    這篇文章主要為大家詳細介紹了vue實現(xiàn)div拖拽互換位置的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • Element PageHeader頁頭的使用方法

    Element PageHeader頁頭的使用方法

    這篇文章主要介紹了Element PageHeader頁頭的使用方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • vue組件 非單文件組件的使用步驟

    vue組件 非單文件組件的使用步驟

    組件又分為非單文件組件和單文件組件,一般常用的就是單文件組件,這篇文章主要介紹了vue組件非單文件組件的使用步驟,需要的朋友可以參考下
    2023-01-01
  • Vue3封裝hooks實現(xiàn)實時獲取麥克風音量

    Vue3封裝hooks實現(xiàn)實時獲取麥克風音量

    這篇文章主要為大家詳細介紹了Vue3如何通過封裝一個hooks實現(xiàn)實時獲取麥克風音量功能,文中的示例代碼講解詳細,需要的小伙伴可以參考一下
    2024-03-03
  • 基于element-ui表格的二次封裝實現(xiàn)

    基于element-ui表格的二次封裝實現(xiàn)

    本文主要介紹了基于element-ui表格的二次封裝實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • vuex新手進階篇之a(chǎn)ctions的使用方法

    vuex新手進階篇之a(chǎn)ctions的使用方法

    actions用來處理mutations中的異步操作,觸發(fā)mutations中的函數(shù),下面這篇文章主要給大家介紹了關(guān)于vuex新手進階篇之a(chǎn)ctions的使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-10-10
  • vue中this.$refs有值,但無法獲取ref的值問題及解決

    vue中this.$refs有值,但無法獲取ref的值問題及解決

    這篇文章主要介紹了vue中this.$refs有值,但無法獲取ref的值問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue使用echarts實現(xiàn)柱狀圖動態(tài)排序效果

    vue使用echarts實現(xiàn)柱狀圖動態(tài)排序效果

    echarts在前端開發(fā)中實屬必不可缺的大數(shù)據(jù)可視化工具,這篇文章主要為大家詳細介紹了vue如何使用echarts實現(xiàn)柱狀圖動態(tài)排序效果,感興趣的可以了解下
    2023-10-10
  • 解決vue 使用setTimeout,離開當前路由setTimeout未銷毀的問題

    解決vue 使用setTimeout,離開當前路由setTimeout未銷毀的問題

    這篇文章主要介紹了解決vue 使用setTimeout,離開當前路由setTimeout未銷毀的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07

最新評論