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

时间:2021-09-29 23:22:25

一、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项目,参考前面写的  http://www.cnblogs.com/stella1024/p/7598837.html

三、接着安装 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/#/zh-cn2

  使用的过程中发现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的更多相关文章

  1. vue 项目中安装npm--save-dev 和 --save 命令

    在vue项目中我们常用npm install 安装模块或插件 有两种命令把他们写入到 package.json 文件里面去 例如安装axios 安装到开发环境npm axios --save-dev ...

  2. vue项目中安装使用vux

    vux是个vue的移动端框架. 目前移动端UI框架这么多,为啥选择vux呢?vux虽然说是个个人维护项目,但是有15000+个star,应该不比其他的团队开源框架差. 最重要的是,目前要做微信公众号和 ...

  3. 在vue项目中快速使用element UI

    推荐使用npm安装 1.安装:npm install element-ui -S 2.整体引入: 在你项目的main.js中写入: import ElementUI from 'element-ui' ...

  4. vue项目中安装cnpm和node&lowbar;modules

    1.安装cnpm的nodejs包管理工具,命令行: npm install -g cnpm --registry=https://registry.npm.taobao.org   2. 每个vue项 ...

  5. vue项目中安装使用echarts

    安装:cnpm install echarts -S (安装依赖并引入到 package.json) 官网安装说明:http://echarts.baidu.com/tutorial.html#%E5 ...

  6. vue系列---vue项目&lpar;已安装vuex&rpar;中引入jquery

    vue项目中引入jquery有很多方法,这只是其中一种. 步骤如下: 1,安装jquery依赖 npm install jquery --save 如果是使用淘宝镜像则将npm改为cnpm 2,修改配 ...

  7. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  8. Vue项目中如何使用Element-UI以及如何使用sass

    Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...

  9. vue入坑教程(二)在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

随机推荐

  1. &lbrack;原创&rsqb;ubuntu16&period;04LTS使用细节

    如何给自己安装的应用创建桌面图标 拿php开发神器phpstorm为例,找到可执行文件所在路径. 这里是/home/haive/PhpStorm/bin/phpstorm.sh 打开dash,搜索&q ...

  2. CentOS下对Apache的中文乱码处理

    # vi /etc/sysconfig/i18nLANG="en_US.UTF-8"SYSFONT="latarcyrheb-sun16" 默认的语言是英文,如 ...

  3. 开扒php内核函数,第三篇 implode

    一开始觉得implode挺容易实现,但是写着写着才发现是挺复杂的,不说啦 来看看implode的用法吧 <?php $arr = array('Hello','World!','Beautifu ...

  4. How To Fix – Mcrypt PHP extension required in Laravel on Mac OS X &lpar;No MAMP&rpar;

    Laravel PHP web framework requires certain libraries to function properly. One of these libraries is ...

  5. 使用PHP处理POST上传时&dollar;&lowbar;FILES数组为何为空

    在做一个简单的表单上传测试时,服务端的php脚本中,$_FILES数组为空;这样就不能获取从浏览器上传的信息.什么原因呢? 通过Google,找到下面这个web: php上传文件$_FILES数组为空 ...

  6. Spring&plus;SpringMVC&plus;MyBatis深入学习及搭建&lpar;九&rpar;——MyBatis和Spring整合

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6964162.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(八)--My ...

  7. float和position

    float float是欺骗父元素,让其父元素误以为其高度塌陷了,但float元素本身仍处于文档流中,文字会环绕着float元素,不会被遮蔽. absolute 但absolute其实已经不能算是欺骗 ...

  8. Tensorflow--矩阵切片与连接

    博客转载自:https://blog.csdn.net/davincil/article/details/77893185 函数原型:slice(input_, begin, size, name=N ...

  9. ETL测试教程

    在我们了解ETL测试之前,先了解有关商业智能和数据仓库的重要性. 让我们开始吧 - 什么是BI? 商业智能是收集原始数据或业务数据并将其转化为有用和更有意义的信息的过程. 原始数据是一个组织每日事务的 ...

  10. mysql5&period;7&period;17安装配置图文教程

    My SQL的特点: MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,M ...