背景: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'
就会显示
后根据万能的网友的答案分析出上面的引入方法,最后正确引入了。
网友评论