Vue项目vue-cli3.x+Mint-UI-------基于脚手架cli3.x 按需引入Mint-ui的组件不起作用、报错、失败

最新推荐文章于 2025-09-13 01:07:29 发布
原创 最新推荐文章于 2025-09-13 01:07:29 发布 · 1.6k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue移动开发

使用脚手架cli3.x+Mint-UI

简单的描述下遇到的情况吧:

因为项目需要我采用了Mint-UI，又因为项目是采用的脚手架3,所以官网的使用教程不能直接粘贴过来用，为了项目优化，且项目中也没有采用很多的相关组件，所以不能直接全部引入，只能按需引入借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

1、安装Mint-UI

直接采用npm或者cnpm(需要安装淘宝镜像)

//cmd命令窗安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

然后

//安装mint-ui
npm install mint-ui -D  或者
npm install mint-ui -S 
//个都行，亲测！！！

2、需要借助的工具babel-plugin-component

安装

npm install babel-plugin-component -D
//同样npm安装失败的话可以使用cnpm

3、最关键的一步，官网教程里的.babelrc 文件的修改

//这是官网里面的教
最低0.47元/天 解锁文章
vue中mint-ui的使用方法
12-10
mint-ui在vue中的使用，供大家参考，具体内容如下 首先放上mint-ui中文文档 近来在使用mint-ui，发现部分插件在讲解上并不是很详细，部分实例找不到使用的代码。github上面的分享，里面都是markdown文件，内容就是网上的文档 刚好自己在用，网上能找到的资料也不是很详细，自己写写咯。持续更新…emmmmm，应该可以吧，我这么懒。希望能给别人带来帮助。 介绍一下mint-ui的特性 特性介绍 Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。 真正意义上的按需加载组件。可以只加载声明
mui-vue2：mui + mint + vue2.x + vue-router + vuex + webpack最终打包成原生apk的应用项目，样式使用vue移动端mint ui框架，原生手机能力偏重于mui框架，欢迎星级！
02-20
基于mui + vue2.x的H5 APP项目，页面视图全部都是html5页，不是嵌入app原生页面，项目可以直接运行在PC上调试，也可以在hbuilder上真机调试，可以直接下载安装。 项目文档地址： 。 考虑访问速度：码云项目地址： ...
vue-cli3.0+mint-ui的使用
weixin_44086376的博客
05-22 1256
1.npm intall mint-ui --save 2.npm install babel-plugin-component -D //需要安装这个插件 3.修改 babel.config.js 文件 module.exports = { presets: [ ‘@vue/app’ ], plugins:[ [ “component”, { “libraryName”: “mint-ui”...
Vue CLI 3集成Mint UI最佳实践：项目搭建与配置优化
最新发布
gitblog_00349的博客
09-13 349
你是否在Vue.js移动端项目开发中遇到过以下问题：UI组件库体积过大导致加载缓慢？组件按需引入配置繁琐？样式冲突难以解决？本文将系统讲解如何基于Vue CLI 3构建工具，从零开始集成Mint UI（Mobile UI elements for Vue.js）组件库，并通过12个优化点实现生产级项目配置，最终构建出高性能的移动端应用。 读完本文你将掌握： - Vue CLI 3+Mint UI...
Mint-UI基于Vue.js的移动端组件库
纸上得来终觉浅，绝知此事要躬行
12-05 1370
原文地址：https://cloud.tencent.com/developer/doc/1273Mint-UI基于Vue.js的移动端组件库，它的使用方法类似于Element-UI。 目录 Mint UI 使用文档 npm 安装 CDN Hello world 快速上手 使用 vue-cli 引入 Mint UI 完整引入 按需引入 开始使用 Mint UI 使用文...
vue-cli3中Mint UI全局和按需引入
weixin_46211267的博客
12-16 711
cdn浏览器引入方法 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/mint-ui/lib/index.js"></script> 在vue中引入的方法 安装 npm i mint-ui -S 方法一、全局引入
vue-cli3 使用mint-ui 按需打包
gklcsdn的博客
02-15 412
文章目录1. 模块安装2. 修改配置babel.config.js3. 使用 1. 模块安装 npm i mint-ui -S npm install babel-plugin-component -D 2. 修改配置babel.config.js module.exports = { presets: ["@vue/app"], plugins:[ [ "component", { "libraryName": "mint-ui",
基于mui+mint+vue2.x+vue-router+vuex+webpack的移动端App项目设计源码
09-26
本项目基于当下流行的前端技术栈，即mui、mint UI框架以及Vue.js 2.x版本的核心技术，包括vue-router、vuex、webpack，设计并开发了一套移动端App项目源码。该源码集成了295个文件，包含了丰富的资源文件和脚本，其...
基于mui+mint+vue2.x+vue-router+vuex+webpack制作H5app项目
11-05
标题中的“基于mui+mint+vue2.x+vue-router+vuex+webpack制作H5app项目”揭示了一个使用多种技术栈构建的移动端Web应用程序。这个项目利用了前端开发的几个关键组件，包括： 1. **MUI**：MUI是一个针对移动设备优化...
vuex-mint-ui-rem-template:vuex+mint-ui+rem自适应 template
05-19
【vuex-mint-ui-rem-template】是一个基于Vue.js、Vuex、Mint-UI和REM单位的响应式模板项目，旨在为开发者提供一个快速搭建移动端应用的基础框架。这个项目结合了状态管理库Vuex、组件库Mint-UI以及移动端适配方案，...
Vue3版本升级采坑(1) - Vue3+mintUI报错，实则版本vue3太高；
sherleysong的专栏
04-21 2538
1. Mint-UI 2.2.13 不匹配 Vue3.0.0 选择Vue2 or Vue3？ Mint-UI是不匹配Vue3的。 说明： 如果选择Vue 3 Preview（下面那个）， 版本号 “vue”: “^3.0.0” 将导致: “mint-ui”: “^2.2.13”, 无法匹配。 进node_module, 找到mint-ui/package.json , 看到vue的依赖2.2.X。 不论后面抛哪个错误，大概率就是版本号不匹配的问题了。 解决方法： 直接降低Vue的版本，2.x即可。 bab
vue-cli3 使用mint-ui
m0_37115637的博客
05-10 1588
按需引入 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 首先，安装 babel-plugin-component： npm install babel-plugin-component -D 然后，将 babel.config.js修改为： module.exports = { presets: ["@vue/app"], ...
vue中使用mint-ui
qq_37872208的博客
12-13 684
在vue项目中安装使用Mint-UI的方法 Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,下面通过本文给大家介绍在vue项目中安装使用Mint-UI的方法，需要的朋友参考下吧 一、Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档： http://mint-ui.github.io/#!/zh...
vue-cli 3.0 引入mint-ui报错
珍妮的小罐君
09-06 2036
场景： 官网：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 ...
npm install mint-ui运行报错
qq_37854862的博客
05-12 787
vue引用minit-UI报错 npm intall mint-ui 运行报错，解决方法：npm install mint-ui
vue项目中使用mint-ui Loadmore组件报错解决方案： Ignored attempt to cancel a touchmove event with cancelable=false
张培跃的个人博客
09-01 6904
报错内容如下： [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. 上面的内容虽然不会影响到项目的运行效果，但看着飘一串红字总是稍有一些不爽，所...
mintUI配合vue2.0,webpack，vue-cli脚手架从零搭建
anda9128的博客
12-13 204
虽然vue-cli脚手架很方便，但是有些配置还是不够， 所以个人配置了一个mintUI的移动端单页面模板，可以使用less,axios,mintUI等常用组件和loading. 还配置了一个elementUI的pc端单页面模板。 代码地址：https://gitee.com/LIULIULIU8/elementui_mintui__template_file 　　运行说明： 　...
npm安装mint-ui问题
qq_40820382的博客
07-13 2891
直接安装 npm install mint-ui -S 报错: npm WARN mint-ui@2.2.13 requires a peer of vue@^2.3.0 but none is installed. You must install peer dependencies yourself. 解决办法： 先更新npm npm install npm -g 再安装淘宝的镜像 np...
探索Vue.js生态：Mint-UI与WeUI的实战结合示例
2. Mint-UI：Mint-UI是基于Vue.js的移动端UI框架。它的设计元素和交互方式遵循了苹果iOS的风格。Mint-UI提供了丰富的组件，比如按钮、输入框、提示框、卡片等，能够帮助开发者快速搭建出一个移动端的界面。此外，...
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值