在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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
javascript 用原型继承来实现对象系统
Mar 22 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
使用Vant完成Dialog弹框案例
Nov 11 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
用JS实现飞机大战小游戏
Jun 09 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单态设计模式(单例模式)实例
2014/11/18 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
python的id()函数介绍
2013/02/10 Python
python读写文件操作示例程序
2013/12/02 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
python中@contextmanager实例用法
2021/02/07 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
SQL语言面试题
2013/08/27 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
Java如何支持I18N?
2016/10/31 面试题
施工人员岗位职责
2013/12/12 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
岗位职责怎么写
2014/03/14 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
教师个人总结范文
2015/02/11 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS