在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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
jQuery的事件预绑定
Dec 05 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
javascript与CSS复习(三)
2010/06/29 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
python多线程操作实例
2014/11/21 Python
python设计模式大全
2016/06/27 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
公司端午节活动方案
2014/02/04 职场文书
接待员岗位责任制
2014/02/10 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
亲子拓展活动方案
2014/02/20 职场文书
合作意向协议书范本
2014/03/31 职场文书
教师年度考核评语
2014/04/28 职场文书
国旗下的演讲稿
2014/05/08 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
铅球加油稿100字
2014/09/26 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
小学语文教师研修感悟
2015/11/18 职场文书