在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 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
jquery事件与绑定事件
Mar 16 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
JavaScript利用键盘码控制div移动
Mar 19 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实现用于计算执行时间的类实例
2015/04/18 PHP
降低PHP Redis内存占用
2017/03/23 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
js中eval详解
2012/03/30 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
python获取文件扩展名的方法
2015/07/06 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Python PyQt5整理介绍
2020/04/01 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python matlab库简单用法讲解
2020/12/31 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
学前教育学生自荐信范文
2013/12/31 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
初一学生期末评语
2014/04/24 职场文书
新品发布会策划方案
2014/06/08 职场文书
农村门前三包责任书
2014/07/25 职场文书
信仰心得体会
2014/09/05 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
简短清晨问候语
2015/11/10 职场文书
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技