在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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
详解Vue router路由
Nov 20 Vue.js
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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
jQuery中的for循环var与let的区别
2018/04/21 jQuery
使用JS获取页面上的所有标签
2018/10/18 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python计算n的阶乘的方法代码
2019/10/25 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
天鹅的故事教学反思
2014/02/04 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
社会实践活动总结报告
2014/04/29 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
师德师风整改措施
2014/10/24 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python