vue-cli3 引入mint-ui失败

最新的vue脚手架,vue-cli3 按照mint-ui官网的教程,完整引入mint-ui失败。

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

想知道,最新的vue-cli3 怎么引入mint-ui,求帮助。### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

你期待的结果是什么?实际看到的错误信息又是什么?

阅读 5.7k
3 个回答

看下你的package.json有没有装好mint-ui的依赖。

mint-ui 是不是还不支持vue3.0呢

看时间,楼主应该已经解决了,我也遇到了并解决了
记录下爬坑之旅:

1.npm intall mint-ui  --save  

2.npm install babel-plugin-component  //需要安装这个插件

3.修改 babel.config.js 文件

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins:[
      [
        "component",
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]
  ]
}

如果已经有值,在后面追加配置即可

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    "transform-vue-jsx",
    "transform-runtime",
    ["component", [
      {
        "libraryName":"mint-ui",
        "style":true
      }
      ]
    ]
  ]
}

4. 在main.js 中添加 引入组件的配置

import { Switch, Range } from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.component(Switch.name, Switch)
Vue.component(Range.name, Range)     //Vue.use 不行,抛弃

成功大吉!
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题