vue?3.0使用element-plus按需導入方法以及報錯解決
更新時間：2024年02月21日 11:00:47 作者：曈欣
Vue3是不能直接使用Element-ui了,需要換成Element-plus,下面這篇文章主要給大家介紹了關(guān)于vue?3.0使用element-plus按需導入方法以及報錯解決的相關(guān)資料,需要的朋友可以參考下
使用方法
安裝組件庫
npm install element-plus -S
按需導入
安裝按需導入相關(guān)的依賴
npm install -D unplugin-vue-components unplugin-auto-import
vue.config.js配置
在 vue 里面配置，不能把官網(wǎng)提供的代碼直接復制過來，需要調(diào)整一下。先引入相關(guān)依賴，plugins 外面加多一個configureWebpack對象
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");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
},
});
報錯解決
報錯 1：AutoImport is not a function
解決：是 unplugin-auto-import版本高了，我用的0.17.3。后面降版本，改成0.16.7，這個問題就不報錯了。
報錯2：Components is not a function
解決：unplugin-vue-components 版本也高了，從0.26.0 降到了 0.25.2 ，就能正常運行了
附： 全局引入
一種引入element-plus的方式是全局引入，代表的含義是所有的組件和插件都會被自動注冊：
//main.ts
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import store from './store'
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')總結(jié)
到此這篇關(guān)于vue 3.0使用element-plus按需導入方法以及報錯解決的文章就介紹到這了,更多相關(guān)vue 3.0使用element-plus按需導入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-date-picker日期時間選擇器的選擇時間限制到分鐘級別
文章介紹了如何使用el-date-picker 組件來限制用戶選擇的時間,禁止選擇當前時間的日期及時分,同時允許選擇其他日期的全天時分,通過設(shè)置 `pickerOptions` 對象的屬性,可以實現(xiàn)對日期和時間的精確控制,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要介紹了vue項目中安裝less依賴的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了如何使用Vue和React分別實現(xiàn)錨點定位功能,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以學習一下2024-01-01
如何用webpack4帶你實現(xiàn)一個vue的打包的項目
這篇文章主要介紹了如何用webpack4帶你實現(xiàn)一個vue的打包的項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Vue?FileManagerPlugin?報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue封裝數(shù)字框組件實現(xiàn)流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-04-04
vue中v-for和v-if一起使用之使用compute的示例代碼
這篇文章主要介紹了vue中v-for和v-if一起使用之使用compute的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue跳轉(zhuǎn)頁面常用的幾種方法匯總，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
ant design vue 清空upload組件圖片緩存的問題
這篇文章主要介紹了ant design vue 清空upload組件圖片緩存的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中的scoped及穿透方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04