在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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 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
如何删除多级目录
2006/10/09 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
vue中如何使用ztree
2018/02/06 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
九年级英语教学反思
2014/01/31 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
推广普通话标语
2014/06/27 职场文书
单位工作证明
2014/10/07 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2014年计生工作总结
2014/11/21 职场文书
小学生优秀评语
2014/12/29 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers