vue3中vue.config.js配置Element-plus組件和Icon圖標實現(xiàn)按需自動引入實例代碼

更新時間：2024年02月03日 10:11:40 作者：Jyann~

這篇文章主要給大家介紹了關(guān)于vue3中vue.config.js配置Element-plus組件和Icon圖標實現(xiàn)按需自動引入的相關(guān)資料,在Vue 3中可以通過配置vue.config.js文件來進行按需自動引入,需要的朋友可以參考下

1.配置前包體積：
2.安裝插件：
3.vue.config.js中加入以下配置：
4.使用
5.在el-button中使用
6.按需引入后，ElMessageBox樣式錯亂
7.使用按需導入后,使用配置文件自動化生成表單中，配置得icon:'Edit'失效
8.其他打包警告
9.配置后包體積大小
總結(jié)

打包時，報警告，提示包太大會影響性能

1.配置前包體積：

2.安裝插件：

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

3.vue.config.js中加入以下配置：

const { defineConfig } = require('@vue/cli-service')

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')

module.exports = defineConfig({
   ...
    configureWebpack: {
        plugins: [
            //配置webpack自動按需引入element-plus，
            require('unplugin-element-plus/webpack')({
                libs: [{
                    libraryName: 'element-plus',
                    esModule: true,
                    resolveStyle: (name) => {
                        return `element-plus/theme-chalk/${name}.css`
                    },
                }, ]
            }),
            AutoImport({
                resolvers: [
                    // 自動導入圖標組件
                    IconsResolver({
                        prefix: 'Icon',
                    }),
                    ElementPlusResolver()
                ]
            }),
            Components({
                resolvers: [
                    // 自動注冊圖標組件
                    IconsResolver({
                        enabledCollections: ['ep'],
                    }),
                    ElementPlusResolver()
                ]
            }),
            Icons({
                autoInstall: true,
            }),
        ],
    },

})

4.使用

在頁面直接使用，直接使用 SVG 圖標，當做一般的 svg 使用
icon使用時需要用以下兩種方式方式：

<el-icon> 
    <i-ep-edit/> 
</el-icon>

<i-ep-edit/>

5.在el-button中使用

如果用在el-button里面的icon屬性上使用，用SVG方式無效，還是需要引入再使用（不知道有沒有其他方式）

import { Delete, Edit } from '@element-plus/icons-vue'
<el-button type="success" size="small" :icon="Edit" round @click="openAddUserForm('add')">新增用戶</el-button>

注意：

使用:icon="Edit"則icon的大小和button里面字體大小一致size=small
但是如果使用<i-ep-search/>放在el-button里面，則會比放在button里大
<el-button type="primary" size="small" @click="searchResource"><i-ep-search/>查詢</el-button>

6.按需引入后，ElMessageBox樣式錯亂

解決方法一：在當前頁面或者全局main.js里面引入import "element-plus/es/components/message-box/style/css";即可，但是違背了按需引入的初衷

解決方法二按需導入：使用unplugin-element-plus對使用到的組件樣式進行按需導入

npm i unplugin-element-plus -D

然后再vue.config.js中配置以下即可：

 plugins: [
            //配置webpack自動按需引入element-plus，
            require('unplugin-element-plus/webpack')({
                libs: [{
                    libraryName: 'element-plus',
                    esModule: true,
                    resolveStyle: (name) => {
                        return `element-plus/theme-chalk/${name}.css`
                    },
                }, ]
            }),
....
]

7.使用按需導入后,使用配置文件自動化生成表單中，配置得icon:'Edit'失效

全局引入時，直接使用icon: 'Edit',然后jsx中直接讀取即可

buttons: [{
            name: '生成案例',
            title: 'generateTestCase',
            type: 'primary',
            size: 'default', //可以是default，small,large
            icon: 'Edit',
            // 按鈕是否為樸素類型
            // plain: true,
            onClick: null
        }
]

  const Button = (form, data) =>(
    !data.isHidden?<ElButton
        type={data.type}
        size={data.size}
        icon= {data.icon}
        plain={data.plain}
        onClick={data.onClick}
        >
          {data.name}</ElButton>:''
  )

但是按需引入后，這樣做失效了。

解決：直接把icon: shallowRef(Edit)或者markRaw(Edit)，然后引入組件即可

import { DocumentDelete, Edit, Download } from '@element-plus/icons-vue'
import { shallowRef } from 'vue'

 buttons: [{
            name: '生成案例',
            title: 'generateTestCase',
            type: 'primary',
            size: 'default', //可以是default，small,large
            icon: shallowRef(Edit),
            // 按鈕是否為樸素類型
            // plain: true,
            onClick: null
        }]

注意：使用組件時，必須使用shallowRef或者 markRaw對組件進行包裝，否則會報警告

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.
Component that was made reactive: {name: "DocumentDelete", __file: "document-delete.vue", render: ƒ}

報錯原因:vue接收到一個組件,該組件是一個響應式對象。這可能會導致不必要的性能開銷,應該通過使用’markRaw‘或使用’shallowRef‘而不是’ref'來避免。
寫成：shallowRef(Edit)或者markRaw(Edit)即可

8.其他打包警告

警告：
chunk 574 [mini-css-extract-plugin]
Conflicting order. Following module has been added:

解決：由于各個css和js文件引入順序問題導致

module.exports = defineConfig({
......
    css: {
        extract: {
            ignoreOrder: true
        }
    }
})

9.配置后包體積大小

總結(jié)

到此這篇關(guān)于vue3中vue.config.js配置Element-plus組件和Icon圖標實現(xiàn)按需自動引入的文章就介紹到這了,更多相關(guān)vue3 vue.config.js按需自動引入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: