手把手教Mint-ui

转自：https://www.jianshu.com/p/db776b507065

教程简介

1、阅读对象
本篇教程适合新手阅读，老手直接略过
2、教程难度
初级，本人水平有限，文章内容难免会出现问题，如果有问题欢迎指出，谢谢
3、Demo 地址：https://github.com/githubchen001/vue-lesson
查看 08、Mint-UI的使用

正文

一、什么是 Mint UI

当我们一听到 XX UI 就可以知道它是一个界面相关的框架，玩过前端的人至少听说过 Bootstrap「它是 Twitter 开源的一个 css/html 工具包」, 而 Mint UI 是饿了么团队开源的一款基于 Vue.js 的移动端组件库

二、Mint UI 的使用方法

1、使用 cdn 的方式引入

我们在使用 Vue.js 的时候不一定非要使用 vue-cli 来创建一个单页面应用，很可能们使用别的技术栈来搭配 Vue.js「vue只是使用它的模版，减少恶心的动态拼串」，那么我们使用 cdn 直接引入的方式是最好不过了

引入方法

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>

当然我们也可以使用 yarn/npm/bower 等来安装 Mint UI 模块，然后在 html 界面中引入

这种方式其实没有什么好说的，就像我们在以前的 vue demo 中引入 vue.js 是一样的，废话不多说了，来两个例子直观感受一下吧

使用几个组件练练手

仿手机 webapp 淘宝登录界面

来张效果图看一下

1、手淘 webapp 登录界面

手淘的登录界面

2、使用 Mint UI 仿写的手淘 webapp 登录界面

仿写手淘的登录界面

怎么样还原度还是挺高的吧，当然这个效果不使用 Mint UI 完全可以实现「实现难度也是非常低的，这里使用 Mint UI 实现此效果有点大材小用，只是为了演示效果」

3、核心代码

<div id="mydiv">
    <!-- 提醒栏 -->
    <div class="tipslogin">
      <span>你需要登录才能继续仿问</span>
      <span class="closeSpan">关闭</span>
    </div>
    <div class="imgDiv">
      <img src="./imgs/tblogo.png" alt="" class="logo">
    </div>
    <!-- 操作区域 -->
    <div class="operateDiv">
      <!-- 账号 -->
      <mt-field  :placeholder="accountPlaceholder"  v-model="uname" class="myinput"></mt-field>
      <!-- 密码 -->
      <mt-field  v-show="isUserAccount" placeholder="请输入密码"  type="password" v-model="upass" class="myinput"></mt-field>
      <!-- 短信验证码 -->
      <mt-field  v-show="!isUserAccount" placeholder="校验码" v-model="getCode" class="myinput">
          <span class="getCode">获取短信验证码</span>
      </mt-field>
      <!-- 免费注册块 -->
      <div class="registerDiv">
        <span>免费注册</span>
        <span v-show="forgetPassShowroNot">忘记密码</span>
      </div>
      <!-- 登录和切换登录方式块 -->
      <div>
        <mt-button size="large" class="mybutton" @click.native="login">登录</mt-button>
        <mt-button size="large"  type="primary" class="mybutton" @click.native="changeLoginMethod">{{defaultAccountText}}</mt-button>
      </div>
    </div>
  </div>

这个没有什么好说的，完整的代码请看 https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/usecdntaobaologin 注释非常清楚，不解释

2、在 Vue-cli 中使用 Mint UI

我们使用 vue-cli 来创建的组件化项目，其实也有三种引入 Mint UI 的方式

（1）、直接在 index.html 中引入，这个和上面的方式一样，不过有一些小区别，我们来感受一下

我们使用 vue-cli 来创建一个项目，过程就不演示了，以前说过，我们直接看核心代码

1、在 index.html 中使用 cdn 引入 mint-ui 相关的 css 和 js

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>mint-ui-demo</title>
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  </head>
  <body>
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue@2.5.11/dist/vue.js"></script>
    <!-- built files will be auto injected -->
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    <div id="app"></div>
  </body>
</html>

方式一，配置 externals mint-ui

2、配置 webpack.base.conf.js，添加如下代码

配置 mint-ui

我们在 webpack.base.conf.js 的 module.exports 中配置 externals，externals 是把组件公开出去，供全局使用

PS：在这里我们要注意一点 externals 配置的 key:vaule 形式的，这里的 Value 好多文章中说是随意配置的，但是亲过自己亲测，这里不能随便配置，必须要和相关 js 暴漏出来的模块名字一模一样，对于 mint-ui 来说是 MINT，我们可以看一下 mint-ui.js 的源码

mint-ui部分源码

看到了吧，mint-ui 暴露出去供我们使用的是 MINT，所以 externals 的 value 一定是这个值「不能随意配置」

3、修改 main.js

import MINT from 'mint-ui'
Vue.use(MINT)

添加以上两句，引入 mint-ui ，并且使用它

经过以上三部，我们就使用 cdn 的方式把 mint-ui 配置完了，我们来测试一下

4、在 App.vue 中的模版中添加以下代码

<template>
  <div id="app">
    <mt-button type="default">default</mt-button>
        <mt-button type="primary">primary</mt-button>
        <mt-button type="danger" >danger</mt-button>
    <router-view/>
  </div>
</template>

5、运行查看结果

show-vue-cli-cdn-mint-ui

怎么样，完美的显示出了 mint-ui 的 Button 效果

方式二配置 externals vue

除了以上方式，我们还可以在 externals 中直接配置 vue 不用配置 mint-ui ，

关于 externals 可以看 webpack 官方说明：外部扩展，这里不细说了解一下即可，我们来看看如何在配置---配置方式如下

externals-config-vue

我们这时配置一下 Vue 并不配置 mint-ui

同时去掉 main.js 中的 import 和 Vue.use(MINT)

remove-use-mint

由于我们修改了 webpack.base.conf.js 所以一定要重新启动服务，果看结果

show-vue-cli-cdn-mint-ui.png

怎么样，效果一毛一样，为什么呢？个人是这样理解的，mint-ui 是依赖于 vue 的，如果我们没有在 externals 配置 vue，只是配置了 mint-ui「这里 import MINT from 'mint-ui' 都是 cdn 上的全局都一样」没有把 vue 当全局暴露出去，那么我们在每个界面 import Vue from 'vue' 其实是 vue-cli 把我们下载到 node-modules 中的 vue ,而在本地 vue 使用其它组件的时候，一般情况下我们是要 import 和 Vue.use(xxx) 的「具体要看组件的 js 有没有提供这个方法」

但是如果我们在 externals 中配置了 vue ，相当于我们 import Vue from 'vue' 都是 cdn 上的「和本地 node-modules 中的 vue 没有关系，此时的 vue 和 mint 真正的都是 cdn 上的」，此时的情况就像在 html 中直使用 cdn 直接引入 vue 再引入 mint-ui 是一样的，所以我们不必在 externals 再去配置 mint-ui，效果也能实现「个人建议如果使用的话，使用第二种方案」

（2）、使用模块化全局引用

以上说了在 vue-cli 中使用 cdn 来使用 mint-ui 的两种方式，其实使用 cdn 来减小包的大小和优化速度是不错的一种选择，下在我们介绍第二种使用模块化全局引入 mint-ui

1、首先我们要使用一模块我们就要安装它「cdn 除外」,使用 yarn/npm 来安装，这里使用 yarn「好处以前在 React 中说过了，这里不过多了说」

yarn-add-mint-ui

在这里我们要注意一下，样式文件需要单独引入

2、使用 mint-ui

我们打开 main.js 输入以下内容「如图中红框所示」

import-mint-js-and-css

经过以上两步配置，我们就把 mint-ui 全局配置好了，我们在任何组件中就可以使用 mint-ui 了

3、测试一下

我们就来几个按钮和 Navbar 的功能，废话不多说了直接看效果图

golbal-vue-cli

基本上就是这个效果，具体代码可以看源码 https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/mint-ui-vue-cli-global-use-demo

（3）、使用模块化按需引用

在上面的例子，我们只使用了 button 和 Navbar 组件，但是我们却引入了整个 mint-ui 组件，这有多么大的浪费呀「简直是一种奢侈，大材小用」，能不能我们需要什么组件再引入什么组件，实现按需加载呢「以达到减少项目体积的目的」，当然可以了，我们来看看这种方式

1、使用 vue-cli 来创建一个名为 mint-ui-cli-single-import-demo 的项目

当然我们要使用 mint-ui ，我们肯定要安装 mint-ui

yarn add mint-ui

2、要实现按需加载 mint-ui 组件，我们需要借助 babel-plugin-component 组件来只引入需要组件，我们来安装一下 babel-plugin-component

yarn add install babel-plugin-component --dev

3、配置 .babelrc

config-single-mint-ui-babelrc.png

我们来运行一下项目 yarn run dev 然后输入 localhost:8080 很不幸，报错了，我们看一下命令行中的错误如下，是我们要使用 ES6 的标准，却没有安装 babel-preset-es2015 ，废话不多说，我们安装一下即可

can't-find-es2015

4、安装 babel-preset-es2015

yarn add babel-preset-es2015 --dev

我们完成安装以后，再运行一下，就不会报上面的错误了

5、我们来引入按钮来测试一下，我们在 main.js 引入 Button 组件

import-button-and-use

这样我们引入了 Button 并且全局注册了 Button 我们就可以在什何组件中使用 Button 了，官方说注册组件可以使用 Vue.component(Component.name, Component) 和 Vue.use(Component) 两种方式实现，但是亲测只有 Vue.component(Component.name, Component) 这种注册方式起作用而 Vue.use(Component) 是无效的「会报错，说组件没有正确的注册」

6、使用 Button 组件，我们直接在 App.vue 组件中使用 Button

button-in-appvue

7、运行一把，查看结果

show-single-button-result

怎么样除了我们熟悉的 vue-cli 帮我们创建的 HelloWorld 以外，我们看到了 mint-ui 创建的两个按钮「完美显示出来了」

PS: 这里注意一下，我们如果想要给 mt-button 这种自定义组件添加点击事件，不能使用传统的 @click 而要使用 @click.native

这样我们就把按需加载 mint-ui 中的组件配置完了，不过根据路由的思想，虽然我们可以把路由配置在 main.js 中，但是为了统一管理 vue-cli 帮我们把路由配置在单独的文件中--- router/index.js 中，仿照路由的配置，我们把 mint-ui 也单独配置在一个文件夹中「方便我们管理,当然这不是必须的，你完全可以在 main.js 中去一个个按需引入组件」，这里我们创建一个 mint-ui/index.js 文件「如下所示」

add-mint-ui-indexjs

我们把引入需要的 mint-ui 组件全部配置在 mint-ui/index.js 文件中

8、配置 mint-ui/index.js 文件

由于 mint-ui 是基于 vue 的，所以我们要先相入 vue ，这和 router 是一样的「这里以 Button 为例子来引入，其实就是把上面 main.js 是配置的放到 mint-ui/index.js 文件中」

# mint-ui/index.js

import Vue from 'vue'
import { Button } from 'mint-ui';
Vue.component(Button.name, Button);

9、修改 main.js

由于我们把 main.js 中引入 Button 的工作放在了 mint-ui/index.js 中了，所以我们现在把原有的 main.js 中引入 Button 的方法就要去掉「替换成引入 mint-ui/index.js 即可」

# main.js
import Vue from 'vue'
import App from './App'
import router from './router'

// import { Button } from 'mint-ui';
// Vue.component(Button.name, Button);

import './mint-ui/index.js'
...

10、查看结果

show-single-button-result

和上面在 main.js 中引入 Button 组件是一毛一样的，所以推荐大家在使用 mint-ui 的时候建议在一个单独文件中去引入

11、我们再来几个组件试试

为了方便起见，我们把原来 App.Vue 中和 HelloWorld 组件中的内容干掉「template、style、js 都把内容清空」

我们在 HelloWorld 组件中分别引入 mint-ui 的 Button、Action sheet 等「需要什么我们看文档即可，文档非常的详细」

直接在 mint-ui/index.js 引入需要的组件即可

# mint-ui/index.js

import Vue from 'vue'
import { Button,Actionsheet } from 'mint-ui';

Vue.component(Button.name, Button);
Vue.component(Actionsheet.name, Actionsheet);

我们可以看到除了 Button，我们又引入了 Actionsheet「依次类推，想用什么组件就在这里引入并且注册即可」，我们来看看 Actionsheet 的用法

<mt-actionsheet
  :actions="actions"
  v-model="sheetVisible">
</mt-actionsheet>

actions 属性绑定一个由对象组成的数组，每个对象有 name 和 method 两个键，name 为菜单项的文本，method 为点击该菜单项的回调函数。sheetVisible 是组件默认是否显示，直接看代码「在 HelloWorld 中添加」

<template>
  <div class="hello">
    <mt-button type="primary" size="large">primary</mt-button>
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      actions:[],
      // 设置为 true 默认就自动弹出 actionSheet
      sheetVisible:true
    }
  },
  created() {
    this.actions = [
      {name:'拍照'},
      {name:'打开相册'}
    ]
  }
}

没有什么好说的，和官方介绍的差不离，在这里 actions 中的 method 不是必须「但是实际情况是肯定是有的，不然 actionsheet 有个毛意义呢」

12、运行一下，查看结果

use-actionsheet-demo

13、我们来实现，点击按钮显示 actionsheet 并且每个 actionsheet 中的菜单有对应的方法

add-method-to-actionsheet

我们再给 Button 添加点击事件

<mt-button 
type="primary" 
size="large" 
@click.native="showActionSheet">
    primary
</mt-button>

14、运行一把看结果

show-actionsheet-result

还不错吧，这里基本就差不多了，其它的组件我们照着文档使用就可以了，没什么难的「文档非常的详细」

具体代码看：源代码

三、使用 mint-ui 仿微信界面

以上说我们说了 mint-ui 的三种引入方式，并且介绍了组件的使用，这没有什么好说的，需要什么组件看官网上有的话直接拿来用。学了就要使用，在这里我们使用 mint-ui 来仿一个微信的基本框架「使用 vue-cli + 按需加载 mint-ui 组件的方式」，所谓无图无真相，我们来看一下效果图吧

效果图

we-chat-demo.gif

大概说一下我是如何拆分组件的，具体可以看源码，注释非常清楚

wecaht-component-01

其它类似发现，我的中的条目都是通用的组件「就不一一列举了」，这个 Demo 中的组件抽到的粒度还不是最细的，大家可以自行再封装组件

源码地址： https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/mint-ui-wechat-demo

四、总结

本节我们说了 mint-ui 的使用，其实不管什么组件都是类似的使用方式，还是非常 easy 的，大概总结一下

1、在 vue-cli 中使用 mint-ui 有三种方式

使用 cdn 引入，注意配置 webpack.base.conf.js
全局使用，包会非常大，效率当然不是很高
按需使用--推荐使用「建议我们把使用三方组件单独配置到一个文件中，这里注意官方说单个组件可以使用 Vue.use(xxx)，亲测不可以「看了源码，确实没有实现 install 方法」，我们只能使用 Vue.component(Component.name,Component) 这种方式」

2、使用 mint-ui 仿微信

使用了组件化开发，父子组件之间的传数据，方法等
使用到了 mint-ui 的 tabs 组件，index-list 等组件
本 demo 只是为了练习，在兴趣的可以再完善「这里只是一个抛砖引玉」，并添加上我们以前讲的手把手教Vue--路由功能，实现界面跳转传参，把其它界面模仿完成

本节所有 demo 演示地址：https://githubchen001.github.io/vue-lesson/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/index.html

posted on 2019-04-01 16:39 vneel 阅读(6507) 评论(0) 编辑收藏举报

刷新页面返回顶部

vneel