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