vue-cli 3.0 引入mint-ui报错问题及解决

更新时间：2022年05月31日 10:32:56 作者：珍妮的小罐君

这篇文章主要介绍了vue-cli 3.0 引入mint-ui报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue-cli 3.0 引入mint-ui报错

场景

官网：http://mint-ui.github.io/docs/#/zh-cn2/quickstart

npm i mint-ui -S

main.ts 文件中引入并使用

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
 
Vue.use(MintUI)

然后报错提示：

Could not find a declaration file for module 'mint-ui'. 'E:/example/vueProjects/vmarry/node_modules/mint-ui/lib/mint-ui.common.js' implicitly has an 'any' type.
Try `npm install @types/mint-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'mint-ui';`

解决

在项目src目录下新建一个.d.ts的文件，如：shim-mint.d.ts,内容如下：

declare module "mint-ui" {
  const Mint: any;
  export const Toast: any;
  export const MessageBox: any;
  export default Mint;
}

这样就能正常使用啦~

mintUi在vue-cli3部分使用的问题

mint-ui在文档上写的部分引入组件须在.babelrc文件里改写配置，然后vue-cli3里并没有这个配置文件

以下是mint-ui文档上需要增加的配置

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

要想达到同样的效果需在vue-cli3里的babel.config.js里做一个类似的配置

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

当然需先安装babel-plugin-component

命令

npm install babel-plugin-component -D

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue2.0实现组件之间数据交互和通信操作示例
这篇文章主要介绍了Vue2.0实现组件之间数据交互和通信操作,结合实例形式分析了vue2.0组件之间通信的原理、实现方法及相关操作注意事项,需要的朋友可以参考下
2019-05-05
el-table表头添加勾选框的实现示例
本文主要介绍了el-table表头添加勾选框的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
使用Vue实现调用接口加载页面初始数据
今天小编就为大家分享一篇使用Vue实现调用接口加载页面初始数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
Vue中安装element-ui失败问题原因及解决
Vue中安装element-ui失败问题原因及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue实现配置全局访问路径头(axios)
今天小编就为大家分享一篇vue实现配置全局访问路径头(axios)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
这篇文章主要介绍了vue使用原生js实现滚动页面跟踪导航高亮的示例代码，滚动页面指定区域导航高亮。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
详解vuex中mutations方法的使用与实现
这篇文章主要为大家详细介绍了vuex中mutations方法的使用与实现的相关知识,文中的示例代码简洁易懂,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
2023-11-11
Vue中的@blur事件当元素失去焦点时所触发的事件问题
这篇文章主要介绍了Vue中的@blur事件当元素失去焦点时所触发的事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue组件通信深入分析
对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结
2022-08-08
vue element-ui v-for循环el-upload上传图片动态添加、删除方式
这篇文章主要介绍了vue element-ui v-for循环el-upload上传图片动态添加、删除方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10