Vue中使用 Echarts5.0 遇到的一些問(wèn)題(vue-cli 下開發(fā))
Vue使用Echarts5.0的一些問(wèn)題
問(wèn)題
最新版的 Echarts5.0 使用 import echarts from 'echarts' 導(dǎo)入,會(huì)發(fā)現(xiàn)導(dǎo)出的 echarts 是 undefined 的情況,無(wú)法正常使用。
解決方案一
新版本有問(wèn)題就用舊版本咯
# 卸載 Echarts5.0 npm uninstall echarts # 規(guī)定版本來(lái)安裝(選擇自己喜歡的版本安裝) npm install echarts@4.8.0 --save ?# 導(dǎo)入使用 import echarts from 'echarts'
解決方案二
還是使用 Echarts5.0 但是導(dǎo)入方式換為:
import * as echarts from 'echarts'
為什么會(huì)出現(xiàn)這種情況?
對(duì)比一下 源碼就知道咯,5.0 版本的 dist 目錄多了個(gè) .esm.js 文件 ,之前的版本是沒(méi)有的,這是個(gè)特意給 ESM 模塊導(dǎo)入使用的,截圖如下,所以以前的導(dǎo)入方法就不行咯,因?yàn)槭褂昧?export 而不是 export default (可以去了解下 ESM,就知道這兩個(gè)導(dǎo)出有啥區(qū)別了)
vue使用echarts 5.0“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
有原來(lái)的引入方式改為
import ?* as echarts from "echarts"
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)無(wú)縫輪播效果(跑馬燈)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)無(wú)縫輪播效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05幾個(gè)你不知道的技巧助你寫出更優(yōu)雅的vue.js代碼
本文參考自油管上某個(gè)國(guó)外大神的公開演講視頻,學(xué)習(xí)了一下覺(jué)得很不錯(cuò),所以在項(xiàng)目中也使用了這些不錯(cuò)的技巧。趁周末有空,寫個(gè)博客記錄一下2018-06-06vue+swiper實(shí)現(xiàn)側(cè)滑菜單效果
這篇文章主要為大家詳細(xì)介紹了vue+swiper實(shí)現(xiàn)側(cè)滑菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12vue計(jì)算屬性時(shí)v-for處理數(shù)組時(shí)遇到的一個(gè)bug問(wèn)題
這篇文章主要介紹了在做vue計(jì)算屬性,v-for處理數(shù)組時(shí)遇到的一個(gè)bug 問(wèn)題,需要的朋友可以參考下2018-01-01vue構(gòu)建動(dòng)態(tài)表單的方法示例
這篇文章主要介紹了vue構(gòu)建動(dòng)態(tài)表單的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解
這篇文章主要為大家介紹了vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Vue使用mockjs問(wèn)題(返回?cái)?shù)據(jù)、get、post 請(qǐng)求)
這篇文章主要介紹了Vue使用mockjs問(wèn)題(返回?cái)?shù)據(jù)、get、post 請(qǐng)求),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2023-05-05