vue-cli 3.0 引入mint-ui报错问题及解决
作者:珍妮的小罐君
这篇文章主要介绍了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
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。