VUE mint ui按需引入總結

2021-10-07 06:07:18 字數 1012 閱讀 4005

第一步:安裝mint-ui(這裡不細說)

第二步;執行npm install babel-plugin-component (文件寫的npm install babel-plugin-component -d,)(我按文件知道裝了報錯,專案無法編譯,可能是和版本有關係???多次嘗試後把-d刪掉就可以)

第三部: 修改.babelrc 檔案,一般安裝在專案根目錄下

(我按文件說的修改的內容走報錯無法執行,後來發現只需要在.babelrc檔案裡面的plugin加上以下內容即可)

["component", [ ] ]

我的最終結果如下:

],"stage-2"

],"plugins": ["transform-runtime"],

"comments": false,

"env": ]]]

}}}第四部:修改main.js檔案

首先,引入使用的元件(以下是我用到的)

//按需引入

import from 'mint-ui'

然後,宣告使用元件(文件說可以寫成vue.use(***x),我這麼寫報錯,具體原因未知,建議用下面的寫法)

//按需引入

vue.component(button.name, button);

vue.component(tabcontainer.name, tabcontainer);

vue.component(tabcontaineritem.name, tabcontaineritem);

vue.component(loadmore.name, loadmore);

第五步:npm run build 執行無報錯,成功

附全域性引入:(這裡多了個css檔案的引入,按需引入的話這行也要注釋掉)

// 全域性引入

// import mintui from 'mint-ui'

// import 'mint-ui/lib/style.css'

// 全域性引入

// vue.use(mintui)

VUE mint ui按需引入總結

第一步 安裝mint ui 這裡不細說 第二步 執行npm install babel plugin component 文件寫的npm install babel plugin component d,我按文件知道裝了報錯,專案無法編譯,可能是和版本有關係?多次嘗試後把 d刪掉就可以 第三部 修改...

echarts按需引入

這篇文章只對echarts v4.x 有效 官方更新到v5.x 後 可以檢視官方例項 檢視完整 按需引入 echarts 的完整包太大了,但是在專案中,其實很多都是用不上的,所以按需引入是很有必要的 import echarts from echarts lib echarts import ech...

按需引入echarts元件

echarts元件非常多,有時候我們的業務就需要兩三個不多,這時候如果全部引入的就會導致打包過大,這時候就可以按需引入。const echarts require echarts lib echarts 引入折線圖 require echarts lib chart line 餅圖 require ...