在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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
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
从手册去理解分析PHP session机制
2011/07/17 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
php实现的用户查询类实例
2015/06/18 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
javascript中的new使用
2010/03/20 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
python排序方法实例分析
2015/04/30 Python
python简单获取数组元素个数的方法
2015/07/13 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python实现百度语音识别api
2018/04/10 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
市场专员岗位职责
2014/02/14 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
平遥古城导游词
2015/02/03 职场文书
铁人观后感
2015/06/16 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript