在vue项目中安装使用Mint-UI的方法

 更新时间:2017年12月27日 08:56:47   作者:断线の风筝  
Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,下面通过本文给大家介绍在vue项目中安装使用Mint-UI的方法,需要的朋友参考下吧

一、Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档:  

http://mint-ui.github.io/#!/zh-cn

  • Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
  • 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
  • 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
  • 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

二、首先要创建一个vue项目,参考前面写的 https://www.jb51.net/article/131600.htm

三、接着安装 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.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>

组件效果图

  2. 然后看官网文档的第二种引入和用法:

  我们可以看到这种组件引入的时候,居然没有Vue.component("对应的组件名"),然后看基本用法,就这么简单一句......

  我参照第一种方法直接引入文档的Toast组件,然后在script里面使用,这个时候会报错:

//提示框
import { Toast } from 'mint-ui';
created:function(){
 Toast("使用Toast"); //这里是为了测试才写在created里面,在平时用的时候,是根据自己需要放在对应的位置使用的
}

  百度了一下,好像挺多人跟我一样遇到这个问题的......

  其实我们看下Toast的使用语句,就可以知道Toast是一个方法,既然是方法,直接在js里面未定义使用就会报错,所以我们在引入该组件的时候,将该方法设置为全局变量:

//在main.js里面添加,这里需要将Toast方法设置为全局变量,否则就要在每个用到该方法的vue页面重新引入该组件....
import { Toast } from 'mint-ui';
window.Toast= Toast;

  设置完之后就不再报错了, 再看一下页面该组件:

  

组件效果图

总结

以上所述是小编给大家介绍的在vue项目中安装使用Mint-UI,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue elementui select标签监听change事件失效问题

    vue elementui select标签监听change事件失效问题

    这篇文章主要介绍了vue elementui select标签监听change事件失效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue动态路由刷新失效以及404页面处理办法

    vue动态路由刷新失效以及404页面处理办法

    作为一个前端新手,项目中遇到权限处理时,通常会采用动态添加路由的方法来实现,下面这篇文章主要给大家介绍了关于vue动态路由刷新失效以及404页面处理办法的相关资料,需要的朋友可以参考下
    2023-11-11
  • 基于 flexible 的 Vue 组件:Toast -- 显示框效果

    基于 flexible 的 Vue 组件:Toast -- 显示框效果

    这篇文章主要介绍了基于 flexible 的 Vue 组件:Toast -- 显示框效果,需要的朋友可以参考下
    2017-12-12
  • 基于Vue过渡状态实例讲解

    基于Vue过渡状态实例讲解

    下面小编就为大家带来一篇基于Vue过渡状态实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • elementUI样式修改未生效问题详解(挂载到了body标签上)

    elementUI样式修改未生效问题详解(挂载到了body标签上)

    vue+elementUI项目开发中,经常遇到修改elementUI组件样式无效的问题,这篇文章主要给大家介绍了关于elementUI样式修改未生效问题的相关资料,挂载到了body标签上,需要的朋友可以参考下
    2023-04-04
  • 使用Vue做一个简单的todo应用的三种方式的示例代码

    使用Vue做一个简单的todo应用的三种方式的示例代码

    这篇文章主要介绍了使用Vue做一个简单的todo应用的三种方式的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue2的todolist入门小项目的详细解析

    vue2的todolist入门小项目的详细解析

    本篇文章主要介绍了vue2的todolist入门小项目的详细解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Element-UI 解决el-table中图片悬浮被遮挡问题小结

    Element-UI 解决el-table中图片悬浮被遮挡问题小结

    在开发中,发现element-ui在el-table中添加图片悬浮显示时,会被单元格遮挡的问题,对于此问题解决其实也并不难,将悬浮图片放在body节点下,通过定位显示即可,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • Vue scoped及deep使用方法解析

    Vue scoped及deep使用方法解析

    这篇文章主要介绍了Vue scoped及deep使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • vue+elementUI实现表格关键字筛选高亮

    vue+elementUI实现表格关键字筛选高亮

    这篇文章主要为大家详细介绍了vue+elementUI实现表格关键字筛选高亮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论