在使用vue做一个h5项目的时候，需要上拉分页加载，所以在实践中总结了一下使用方法：1.npmimint-ui-S2.main.js中引入import'mint-ui/lib/style.css'3.以下是代码结构部分

1.在src目录下的main.js文件中，引入：importaxiosfrom'axios';importMintfrom'mint-ui';Vue.use(Mint);2.axios发起请求时，显示loading

一、在使用vue-cli创建项目时，其实安装vue-cli有两种方法：1.使用命令：npminstall-gvue-cli2.使用命令：npminstall-g@vue/cli第一种安装vue-cli的方法是搜索出来的很多人常用的方法，第二种方法我是在慕课网上3小时速成Vue2.x核心技术这个视频学到的。我在安装过程中发现，这两种安装方法是互斥的，即使用命令安装后，只能使用其对应的创建方法来新建项

1.引入import{Message}from'mint-ui'2.使用downLoad(){MessageBox({title:'标题',message:'信息',showCancelButton:true

Mint-uiMessageBox.confirm问题:官方文档写法只能获取点击确认后的状态，默认点击取消报错MessageBox.confirm('确定执行此操作?').then(action=>{...});解决:MessageBox.confirm('确定执行此操作?').then(action=>{//确认的回调},action=>{//取消的回调});解决思路:文档说明:若用户点击了取消

1.在main.js中引入//引入import{MessageBox}from'mint-ui';MessageBox.confirm('',{  message:'您确定提交订单吗？'

调用mint-uimessageboxconfirm方法后点击确认和取消后如何执行对应的回调函数MessageBox.confirm('',{message:'xxx,你确定？',title:'提示',confirmButtonText:'abc',cancelButtonText:'123'}).then(action=>{if(action=='confirm'){//确认的回调console

官方中文文档url:http://mint-ui.github.io/docs/#/zh-cn2/message-boxMint-ui官网文档并没有对该组件进行详细的demo演示，比如像修改一些btn文字就没有说明，自己有遇到，并参考其他网友的（https://blog.csdn.net/guoyiq/article/details/80222063）的博文，自己写个日记首先肯定要安装Mint-u

importaxiosfrom'axios'const{Indicator,Toast}=require('mint-ui')//axios.defaults.baseURL='http://139.196.20.27

封装后的网络请求工具js如下importaxiosfrom'axios'import{Toast}from'mint-ui'//请求时的拦截axios.interceptors

像Mint-UI等说实话已经很不错了，但是坑也是不少，而且项目中很多功能仅凭这些也实现不了，这需要我们去封装自己的可复用组件。二、封装组件的步骤1.建立

/zh-cn描述：基于vue的移动端UI框架基于vue组件库：GitHub地址：https://github.com/ElemeFE/mint-ui/star：8705，fork：1810latestcommit2017.12.66pm32contributors

准备工作需要先安装node环境，官方地址：https://nodejs.org开始搭建Windows下不要使用git自带的mintty执行命令，切换选项时会失效的。觉得cmd难看的话用PowerShell会好一些，只是好一些，呵呵。安装vue：npminstallvue&&npminstall--globalvue-cli生成项目结构，安装依赖：vueinitwebpackmint-demo&&c

首先，在入口文件main.js中引用mint-uiimportMintfrom"mint-ui"import"mint-ui/lib/style.css"Vue.config.productionTip

npminstallaxios--save-dev2.在utils文件夹下request.js中添加如下代码（以token过期，跳转至登录页为例）importaxiosfrom'axios'import{Toast}from'mint-ui'importrouterfrom

Mint-ui是个非常不错的UI框架，提供了很多组件。但在项目中实际使用的时候，还需要将几个组件组合起来使用。

npminstallweixin-js-sdkmint-ui--savemixins/wechat.js//weixin-js-sdk应用constwx=require('weixin-js-sdk')import{Toast}from'mint-ui'exportdefault

importMintUIfrom'mint-ui'Vue.use(MintUI){{item.title}}importmuifrom"../..

首先导入mint-ui//引入MintUi全部importMintUIfrom'mint-ui'Vue.use(MintUI)在需要图片懒加载的地方使用v-lazy指令设置样式image[lazy="loading

如何修改mint-ui中Radio的默认样式在mint-ui中，radio的默认样式为而在实际项目中，单选选项是否并列、圆点大小颜色变化都是有可能的。

MINT-UI官网上指定的几个实例方法如下：getSlotValue(index)：获取给定slot目前被选中的值setSlotValue(index,value)：设定给定s

参考：https://blog.csdn.net/sinat_40257787/article/details/79582130问题一：下拉不会触发loadMore事件解决：我们的ul或者设置滚动的元素必须设置高度和溢出滚动的属性因为我的接口没有分页所以用slice模拟数据分页加载CSS代码：.newsList{max-height:100vh;//与屏幕一样高度overflow-y:auto;｝

使用Vue半年的时间，尝试了不少UI组件库，比如响当当的Element，iView，mint-ui，vant，基本都能满足需求，也没有觉得特别好或者特别不好。

1,cd+项目文件夹进入项目文件夹2,安装mint-uinpminstallmint-ui--save3,在main.js里引用importMintUIfrom'mint-ui'import'mint-ui

基于vue的移动端的框架mint-ui的使用1.安装npminstallmint-ui-S//-S表示--save2.在main.js里面引入mint-ui和mint-ui的cssimportMintUIfrom'mint-ui

在使用vue框架开发时，饿了么的mint-ui框架是个不错的选择，但是有时候我们需要修改它的默认样式，方法如下：1.在src/assets/css目录下新建scss文件，my-mint.scss，内容如下

先新起一个项目vueinitwebpactprojectName安装vueUI库npminstall--savemint-ui-引入importMintUIfrom'mint-ui'import'mint-ui

vue页面响应前的加载中显示loading过渡数据的加载时间我用的是vue-resource和mint-ui的组件Intercepors，也可以自己定义一张图片，详情请看https://blog.csdn.net

组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element★13489-饿了么出品的Vue2的webUI工具套件Vux★8133-基于Vue和WeUI的组件库iview★6634-基于Vuejs的开源UI组件库mint-ui

UI组件element★11612-饿了么出品的Vue2的webUI工具套件Vux★7503-基于Vue和WeUI的组件库iview★5801-基于Vuejs的开源UI组件库mint-ui★5517-Vue2

官方文档没有详细介绍搜索提示中选中如何使用，不过提过了自定义的写法：就是在此基础上添加了点击事件，再将值赋给输入框即可。select(item){this.modelNo=item},中间也遇到一些问题，比如：（1）搜索框输入的提示总是少了一行，后来发现是因为classmint-search-list的样式太靠上，给搜索框覆盖，所以显示不出来，后来添加了.mint-search-list{marg

Import按需引入：import{Checklist}from'mint-ui';Vue.component(Checklist.name,Checklist);全局导入：全局导入后不用再导入importMintfrom'mint-ui'import'mint-ui

assert/js/date.jsexportfunctionformatDate(date,fmt=0){//type是可选参数，因为json中时间的格式是year-month-date,不能识别XX年XX月XX日if(/(y+)/.test(fmt)){fmt=fmt.replace(RegExp.$1,(date.getFullYear()+"").substr(4-RegExp.$1.le

交代下背景：现在在做一个vue项目，需要实现班级的逻辑是：如下图所示：初始状态下箭头自动向下（收起状态）,点击某个班级时，右侧箭头自动变为向上（展开状态），起初我想通过MUI或者Mint-Ui来引入插件

组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element★31142-饿了么出品的Vue2的webUI工具套件Vux★14104-基于Vue和WeUI的组件库iview★17587-基于Vuejs的开源UI组件库mint-ui

该代码为vue上拉加载组件可以应用于各种手机vue项目把该代码放到一个独立的组件里我们起名为loadmore.vue代码片段基本是mint-ui的片段由于项目使用了vux所以没有安装mint-ui*##

vue+elmentui项目中使用mint-ui的actionsheet这是饿了么效果：这是mint-ui效果：单个下拉框数组循环下拉框大家都知道饿了么框架本是pc端的，手机端项目体验可能就没那么好了，

你可能会问为什么要用两个饿了么的框架，首先呢，作为新手的自己，在想用table组件时，发现mint-ui没有这个组件，还有一个原因，mtni-ui官网老是打不开，后来就用上了element-ui。

（1）组件按需加载;对Element-UI,Mint-UI组件进行按需加载；（2）路由组建懒加载；异步加载consthome=resolve=>require(['@/home.vue'],resolve

1.先安装npminstall--savemint-ui2.mian.js中按需引入import{DatetimePicker}from'mint-ui';Vue.component(DatetimePicker.name

1,开源组件库mint-ui中的应用；2,本地vue工程中程序实现；3,总结extend的主要应用方向；开源组件库mint-ui中的应用开源组件库中Toast[.

实现该功能主要用到mintUI中的Picker与Popup组件1、引入组件import{MessageBox,Toast,Picker,Popup,Header}from"mint-ui";2、写弹框选择器的结构样式取消请选择售后类型确定

效果：根据以上需求，因为毕竟已经使用mint-ui多个功能，不能换框架，所以必须硬着头皮改。开始满足需求……啊~项目：移动端，vue-cli+webpack+mint-ui不说安装过程了……1、使

mint-ui的官方文档必须吐槽，写得太简陋了，有许多方法和配置都没有具体配置，要自己去摸索，实在是坑爹。

前言：因为移动端项目的需要，我在项目中经过考虑使用的mint-ui的框架，但是使用他提供的swiper插件以后，感觉坑太多，填不动的感觉，故经过查找并实际测试，发现一款使用挺好的swiper插件vue-swiper-component

为何用到了touch事件在项目中，用mint-ui做了一个下拉刷新的功能。在其他手机都可以，但是在iphonex上当下拉到虚拟键位置，下拉框就会卡住，不会回弹。

vuecreatemintuidemo12.安装mintUIcnpminstallmint-ui--save3.main.js完整引入mintUI和cssimportMintfrom'mini-ui'import'mint-ui

上个月，由于时间关系，在项目初始选型时，选择了Mint-Ui。。。然后入坑了，此后项目坚决不用这个Ui框架啦。。。

×发送import{Toast,Indicator}from'mint-ui';importmyheaderfrom'../..

（还有个好像element是PC端）坑一：引入MintUI官方介绍了2种方法：方法一：完整引入只需要在main.js里面写入```importVuefrom'vue'importMintUIfrom'mint-ui'import'mint-ui