背景:vue項目做ipad端,目前使用vue-admin-templete的模板(基于elementui框架),需要整合mint-ui的某些控件適配移動端,由于已經引入了全部的Element-ui,為了避免沖突和減少內存占用,只需要對mint-ui進行按需引入。
第一步:
使用npm安裝mint-ui
npm i mint-ui -S
第二步:
安裝工具進行按需引入
npm install babel-plugin-component -D
第三步:
由于我原來是沒有.babelrc文件的,首先我先執行
type null>.babelrc
在項目根目錄下新建該文件,然后添加一下代碼
{
"plugins": [
["component",
{
"libraryName": "mint-ui",
"style": true
},
"mint-ui"],
["component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
},
"element-ui"
]
]
}
填坑:官方文檔的這個部分一直報錯,這是根據廣大神通的網友總結出來的,最終跑通了
第四步:
在main.js文件中按需引入
import Loadmore from 'mint-ui/lib/loadmore'
Vue.component(Loadmore.name, Loadmore)
填坑:
根據官方文檔描述,一開始使用import { Loadmore } from 'mint-ui'
就會顯示
后根據萬能的網友的答案分析出上面的引入方法,最后正確引入了。