在vue项目中安装使用Mint-UI的方法


Posted in Javascript onDecember 27, 2017

一、Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档:  

三、接着安装 Mint UI:

npm i mint-ui --save

四、然后需要引入 Mint UI ,这里有两种情况:

1. 引入全部组件

如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:

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

2. 按需引入

如果你只需要使用某个组件,可以仅引入这个组件,Mint UI 能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件,则在 main.js 中:

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便,尤其当你使用按需引入的方法引入多个组件时。

五、为了避免这个问题,可以使用babel-plugin-component插件。

1. 首先当然是安装它:

npm i babel-plugin-component -D

2. 然后在 .babelrc 中配置它:

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-2"
 ],
 "plugins": ["transform-runtime",["component",[
   {"libraryName":"mint-ui","style":true}
  ]]],
 "env": {
 "test": {
  "presets": ["env", "stage-2"],
  "plugins": ["istanbul"]
 }
 }
}

3. 这样上述两种引入方法就可以简化为:

//import Mint from 'mint-ui';
//Vue.use(Mint);
//import 'mint-ui/lib/style.css'; //不需要手动导入mint-ui样式
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

import { Swipe, SwipeItem } from 'mint-ui'; //按需引入部分组件
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

前面安装的插件会自动引入相应的 CSS 文件!

六、具体使用UI组件 -- 可以直接参考官方文档http://mint-ui.github.io/docs/

使用的过程中发现Mint UI文档不是很详细,很多具体的用法都需要另外百度...

1.首先看下官方文档的第一种引入和用法:

在vue项目中安装使用Mint-UI的方法在vue项目中安装使用Mint-UI的方法

这种组件引入的时候,有一行Vue.component("对应的组件名"),使用的时候是再vue文档的template部分,使用对应的标签名加属性,其实就是直接复制官方文档的代码即可,不过相对复杂多属性的组件就要另外百度了.

那么接下来看一下在项目中的使用代码:

//在main.js里面添加--复制官方文档该组件对应的引入即可
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);
<template>
 <mt-header title="修改客户资料">
   <a @click="toBack" replace slot="left">
    <a class="back-icon"></a>
   </a>
   <!--这个头部导航栏关键的是mt-header父标签,而该标签内的内容是根据需求写的哦-->
 </mt-header>
</template>

在vue项目中安装使用Mint-UI的方法组件效果图

2. 然后看官网文档的第二种引入和用法:

在vue项目中安装使用Mint-UI的方法在vue项目中安装使用Mint-UI的方法

我们可以看到这种组件引入的时候,居然没有Vue.component("对应的组件名"),然后看基本用法,就这么简单一句......

我参照第一种方法直接引入文档的Toast组件,然后在script里面使用,这个时候会报错:

//提示框
import { Toast } from 'mint-ui';
created:function(){
 Toast("使用Toast"); //这里是为了测试才写在created里面,在平时用的时候,是根据自己需要放在对应的位置使用的
}

在vue项目中安装使用Mint-UI的方法

百度了一下,好像挺多人跟我一样遇到这个问题的......

其实我们看下Toast的使用语句,就可以知道Toast是一个方法,既然是方法,直接在js里面未定义使用就会报错,所以我们在引入该组件的时候,将该方法设置为全局变量:

//在main.js里面添加,这里需要将Toast方法设置为全局变量,否则就要在每个用到该方法的vue页面重新引入该组件....
import { Toast } from 'mint-ui';
window.Toast= Toast;

设置完之后就不再报错了, 再看一下页面该组件:

在vue项目中安装使用Mint-UI的方法

组件效果图

总结

以上所述是小编给大家介绍的在vue项目中安装使用Mint-UI,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
AngularJS集合数据遍历显示的实例
Dec 27 #Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 #Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 #Javascript
Vue 过滤器filters及基本用法
Dec 26 #Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 #Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 #Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
56.com视频采集接口程序(PHP)
2007/09/22 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
微信小程序实现倒计时补零功能
2018/07/09 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
Python中psutil的介绍与用法
2019/05/02 Python
python实现三壶谜题的示例详解
2020/11/02 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
季度思想汇报
2014/01/01 职场文书
新书吧创业计划书
2014/01/31 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技