vue2.0之Mint-UI配置填坑

最新推荐文章于 2025-06-03 20:48:04 发布
原创 最新推荐文章于 2025-06-03 20:48:04 发布 · 1w 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue #Mint UI

本文记录了在Vue项目中使用Mint-UI时遇到的配置问题及解决过程。在尝试引入Mint-UI时，由于文档在初始化引导上的不足，作者花费了一天时间解决问题。通过npm安装Mint-UI后，无论是完整引入还是按需引入，运行时都会遇到缺少解析CSS文件的loader错误。解决方法是在webpack.config.js中添加相应的CSS加载器配置，修复后项目能正常运行。

Vue项目搞了这么久，也差不多得给界面换换衣服，看起来专业一点。

网上搜了搜，选择了比较流行的饿了么出品的针对移动端的mint-ui，若是PC端可以用更全面的element-ui，这里就不多做介绍了。


起初以为看看文档就能直接上手用的东西愣是花了接近一天的功夫才跑起来，只能说文档在初始化引导方面还是存在缺陷，

像我这样的新手小白很可能就掉进坑里爬不起来。


首先按照使用文档一步步来：

1、npm安装

npm i mint-ui -S
2、引入Mint UI

这里有两种方式：完整引入or按需引入部分组件。

一：完整引入

i
最低0.47元/天 解锁文章
详解Vue2.0配置mint-ui踩过的那些坑
08-27
在Vue2.0项目中配置Mint UI的步骤如下： 1. 首先，你需要根据Vue.js的官方文档创建一个新的Vue项目，通过全局安装vue-cli并使用webpack模板初始化项目： ``` npm install --global vue-cli vue init webpack my-...
vue中配置mint-ui报css错误问题的解决方法
11-28
在Vue.js项目中，尤其是基于Vue 2.0的项目，使用第三方库如Mint-UI时，可能会遇到CSS加载的问题。这个问题通常出现在尝试引入Mint-UI时，尽管已经配置了`css-loader`和`style-loader`，并且在`webpack.config.js`中...
Vue2.0项目安装Mint-UI - cmd篇
草巾冒小子的博客
02-01 1485
Vue2.0项目如何安装引入Mint-UI？ 这里讲一下如何通过cmd指令安装mint-ui到vue2.0项目。 步骤说明： 和以前一样，先cd到项目根目录 然后cmd：npm i mint-ui -S （即： npm install mint-ui -save） 等待安装完成即可。 查看相关文章：百度经验 · 图文教程 以上就是关于“ Vue2.0项目安装Mint-...
VUE2中使用mint-ui，日期选择picker
dengwei4048的博客
06-25 329
首先页面引入需要使用的组件 import { DatetimePicker,Toast,Popup,Picker } from 'mint-ui'; methods部分 openPicker () { this.$refs.picker.open() }, handleConfirm (data) { this.birthday = get...
探索Mint UI：为Vue 2.0打造的移动端UI组件库
gitblog_00230的博客
08-07 608
探索Mint UI：为Vue 2.0打造的移动端UI组件库 在移动应用开发的世界里，选择一个高效、灵活且易于使用的UI组件库是至关重要的。今天，我们将深入了解一个专为Vue 2.0设计的移动端UI组件库——Mint UI。 项目介绍 Mint UI是由ElemeFE团队开发的一个开源项目，专为Vue 2.0设计。它提供了一系列的移动端UI组件，旨在帮助开发者快速构建高质量的移动应用。Mint UI...
Mint UI：为Vue 2.0打造的移动端UI组件库
gitblog_00031的博客
05-15 580
Mint UI：为Vue 2.0打造的移动端UI组件库 项目介绍 Mint UI 是一款专为 Vue 2.0 设计的移动端UI组件库，由ElemeFE团队开发并维护。它提供了丰富的移动端UI组件，帮助开发者快速构建高质量的移动应用界面。Mint UI 不仅支持全组件导入，还支持按需加载，极大地优化了项目的加载速度和性能。 项目技术分析 Mint UI 基于 Vue 2.0 框架，充分利用了 Vue...
【Vue2.0】mint-ui解决datetime-picker穿透滚动问题
qq_26780317的博客
09-15 706
背景：在移动端开发中，使用了mint-ui组件库，其中，使用组件popup组件和datetime-picker组件存在滚动性穿透问题。 一、问题原因 HTML5触摸事件touchmove事件：当手指在屏幕上滑动的时候会连续触发； 所以，当激发出组件popup组件和datetime-picker的弹出层时，我们在弹出层选择内容时，上下连续滑动是会触发该事件的。 二、解决思路 在弹出层出现之后阻止body的touchmove事件，在弹出层消失之后，移除阻止事件。 三、例外 然而，Date...
【Vue2.0】 mint-ui解决ios端mt-datetime-picker穿透滚动问题
最新发布
12-02
在Vue2.0使用mint-ui时，解决ios端mt-datetime-picker穿透滚动问题有以下几种解决方案： ### 方案一：在组件上添加事件阻止修饰符 在`<mt-datetime-picker>`组件上添加`@touchmove.native.stop.prevent`，可以阻止...
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 使用文...
vue3.x+mintui项目不能按需引入以及导入mint-ui/lib/style.css失败问题
weixin_45110644的博客
11-27 1316
安装mintui npm i mint-ui -S 按需引入： 1.npm install babel-plugin-component -D 2.修改.babelrc文件: { “presets”: [ [“es2015”, { “modules”: false }] ], “plugins”: [[“component”, [ { “libraryName”: “mint-ui”, “styl...
无法找到模块“mint-ui”的声明文件_用实例学习 Rust——模块系统
weixin_39879881的博客
11-29 426
今天我们来看看 Rust 的模块系统。每个 Rust 程序都是起始于一个根模块。如果你创建的是一个库项目，那么根模块就是 lib.rs 文件。如果你创建的是一个可执行程序项目，那你的根模块就是带有 main 函数的那个文件，一般默认为 main.rs。当你的项目变得越来越大时，必然就需要分模块进行管理了。下面我们来看看 Rust 如何创建模块。内嵌模块在 Rust 中创建一个模块最简单的办法就是在...
vue中使用 mint-ui
seven_an的博客
03-01 484
全局引入及使用 引用：在main.js文件中写入 import Mint from 'mint-ui'; import 'mint-ui/lib/style.css'; Vue.use(Mint); 使用：举两个示例 *此处有疑问，我在vue中打印this，根本没有mint里面的这些方法，最后经过同事指导，才明白这些方法都在原型链上，我们需要打印 Object.getPrototypeOf...
VUE——移动端UI库之mint-ui
weixin_63215361的博客
06-03 1681
Switch 是一种开关组件，通常用于在两种状态之间切换（如开启或关闭某种功能）。它的特点是操作直观，用户只需点击即可完成状态切换。以下是核心要点：引入和注册：通过 import { Actionsheet } from ‘mint-ui’ 引入，并通过 Vue.component(Actionsheet.name, Actionsheet) 注册为全局组件。定义选项：通过 actions 属性定义操作表中的选项。控制显示与隐藏：通过 v-model 属性控制操作表的显示与隐藏。
mint-ui在vue中的使用。
weixin_30879169的博客
04-04 1039
首先放上mint-ui中文文档 近来在使用mint-ui，发现部分插件在讲解上并不是很详细，部分实例找不到使用的代码。github上面的分享，里面都是markdown文件，内容就是网上的文档 刚好自己在用，网上能找到的资料也不是很详细，自己写写咯。持续更新...emmmmm，应该可以吧，我这么懒。希望能给别人带来帮助。 介绍一下mint-ui的特性 特性介绍 Mint UI 包含丰富的...
基于Vue2全家桶的移动端AppDEMO实现
weixin_33906657的博客
01-25 545
好久没更新过Vue的小文章，上次做了一个基于Vue+Mint-ui的移动端AppDemo,集成了推送功能，然后通过cordova打包生成apk，移动端表现还不错，今天把这个小东西分享出来，希望有更多的小伙伴能够用Vue去做一些有意思的东西，本人才疏学浅，有说的不对的地方，还请大家多多指教。下面按照惯例放上demo地址和源码地址,希望大家能...
Mint UI入门系列教程
祈澈菇凉
05-03 2154
Vue移动端框架Mint UI教程-搭建环境引入框架（一） 官网：https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-ui/ 今天具体说一说比较常用的；Mint UI框架的按钮组件，Mint UI是 饿了么团队开发基于vue .js的移动端UI框架...
vue中mint-ui使用
田兴的博客
08-13 1132
mint-ui 如何按需引入 cnpm i mint-ui -S 注意：npm下载出现问题（终端中出现Error红色提示，就得重新下载），用cnpm替换npm npm install mint-ui -S -S ==== --save 表示把依赖安装到 （dependencies）生产环境（项目上线的环境） npm install sass -D -D=== --save-dev 表示把依赖安装到 （devDependencies）开发环境（在本地运行的环境） 按需引入步骤
Vue+vuex+vue-router+sass+webpack+mint-ui 全家桶 开发商城（购物车）
麻球科技
03-02 4360
先上截图，项目跑起来就是这个样子，是不是符合你的购物车？哈哈哈哈哈哈哈，我就知道购物车实现的功能：添加购物车、选择某商家下所有商品、选择指定商品、更新指定商品数量(加减)、删除指定商品、全选商品、清空购物车，等功能；准备工作：使用Vue全家桶（vue2.0+vue-router+vuex+webpack+sass+mint-ui），由于都是静态数据，就没有使用axios;注：通常使用npm安装会出...
全局配置mint-ui和mint-ui的按需引入
sxy1847589546的博客
02-08 7498
安装1. npm i mint-ui -S全局引入main.js中配置2/32. import MintUI from 'mint-ui'     //引入3. Vue.use(MintUI)      //注册4. 在babelrc中配置["component", [{"libraryName":"mint-ui","style":true}]]按需引入在main.js中按需引入即可import...
基于Vue 2.0与Mint-UI的省市区三级联动实现
“基于vue2.0和mint-ui2.0仿iOS省市区三级联动”这一项目是一个典型的移动端前端开发实践案例，充分体现了现代Web前端技术在用户体验优化与组件化开发方面的深度融合。该项目以Vue.js 2.0为核心框架，结合Mint-UI ...
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值