美文网首页
记一次整合elementui+mintui+vue的配置历程

记一次整合elementui+mintui+vue的配置历程

作者: chiugi | 来源:发表于2019-08-21 15:50 被阅读0次

    背景: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'就会显示


    后根据万能的网友的答案分析出上面的引入方法,最后正确引入了。

    相关文章

      网友评论

          本文标题:记一次整合elementui+mintui+vue的配置历程

          本文链接:https://www.haomeiwen.com/subject/bexisctx.html