vue3中vue.config.js配置Element-plus組件和Icon圖標實現(xiàn)按需自動引入實例代碼
打包時，報警告，提示包太大會影響性能
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é)
到此這篇關于vue3中vue.config.js配置Element-plus組件和Icon圖標實現(xiàn)按需自動引入的文章就介紹到這了,更多相關vue3 vue.config.js按需自動引入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue手機號正則匹配，姓名加密展示,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
Vue Element-UI中el-table實現(xiàn)單選的示例代碼
在element-ui中是為我們準備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn)
這篇文章主要介紹了基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
ElementUI+命名視圖實現(xiàn)復雜頂部和左側(cè)導航欄
本文主要介紹了ElementUI+命名視圖實現(xiàn)復雜頂部和左側(cè)導航欄，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
今天遇到一個在vue文件中引入本地圖片的問題,于是有了這篇文章,本文主要給大家介紹了關于前端Vue頁面中展示本地圖片的相關資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)表單驗證小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue-cli是一個官方發(fā)布vue.js項目腳手架,使用vue-cli可以快速創(chuàng)建vue項目。本文介紹了vue-cli4.5.x快速搭建項目，感興趣的可以了解一下2021-05-05
本文主要介紹了vite.config.js配置入門詳解，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼
本篇文章主要介紹了vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2018-01-01
Vue.js結(jié)合bootstrap前端實現(xiàn)分頁和排序效果
這篇文章主要為大家詳細介紹了Vue.js結(jié)合bootstrap 前端實現(xiàn)分頁和排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12