手把手教Mint-ui

时间  2019-11-09 标签 手把手 mint
转自： https://www.jianshu.com/p/db776b507065
 

教程简介javascript

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

正文css

1、什么是 Mint UI

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

2、Mint UI 的使用方法

一、使用 cdn 的方式引入

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

引入方法vue

<!-- 引入样式 --> <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 界面中引入java

这种方式其实没有什么好说的，就像咱们在之前的 vue demo 中引入 vue.js 是同样的，废话很少说了，来两个例子直观感觉一下吧node

使用几个组件练练手python

仿手机 webapp 淘宝登陆界面

来张效果图看一下webpack

  • 一、手淘 webapp 登陆界面
 
手淘的登陆界面
  • 二、使用 Mint UI 仿写的手淘 webapp 登陆界面
 
仿写手淘的登陆界面

怎么样还原度仍是挺高的吧，固然这个效果不使用 Mint UI 彻底能够实现「实现难度也是很是低的，这里使用 Mint UI 实现此效果有点大材小用，只是为了演示效果」git

  • 三、核心代码
<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 注释很是清楚，不解释

二、在 Vue-cli 中使用 Mint UI

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

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

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

  • 一、在 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

  • 二、配置 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 必定是这个值「不能随意配置」

  • 三、修改 main.js
import MINT from 'mint-ui' Vue.use(MINT)

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

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

  • 四、在 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>
  • 五、运行查看结果
 
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

  • 一、首先咱们要使用一模块咱们就要安装它「cdn 除外」,使用 yarn/npm 来安装，这里使用 yarn「好处之前在 React 中说过了，这里不过多了说」
 
yarn-add-mint-ui

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

  • 二、使用 mint-ui

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

 
import-mint-js-and-css

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

  • 三、测试一下

咱们就来几个按钮和 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 组件，这有多么大的浪费呀「简直是一种奢侈，大材小用」，能不能咱们须要什么组件再引入什么组件，实现按需加载呢「以达到减小项目体积的目的」，固然能够了，咱们来看看这种方式

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

固然咱们要使用 mint-ui ，咱们确定要安装 mint-ui

yarn add mint-ui
  • 二、要实现按需加载 mint-ui 组件，咱们须要借助 babel-plugin-component 组件来只引入须要组件，咱们来安装一下 babel-plugin-component
yarn add install babel-plugin-component --dev
  • 三、配置 .babelrc
 
config-single-mint-ui-babelrc.png

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

 
can't-find-es2015
  • 四、安装 babel-preset-es2015
yarn add babel-preset-es2015 --dev

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

  • 五、咱们来引入按钮来测试一下，咱们在 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) 是无效的「会报错，说组件没有正确的注册」

  • 六、使用 Button 组件，咱们直接在 App.vue 组件中使用 Button
 
button-in-appvue
  • 七、运行一把，查看结果
 
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 文件中

  • 八、配置 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);
  • 九、修改 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' ...
  • 十、查看结果
 
show-single-button-result

和上面在 main.js 中引入 Button 组件是一毛同样的，因此推荐你们在使用 mint-ui 的时候建议在一个单独文件中去引入

  • 十一、咱们再来几个组件试试

为了方便起见，咱们把原来 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 有个毛意义呢」

  • 十二、运行一下，查看结果
 
use-actionsheet-demo
  • 1三、咱们来实现，点击按钮显示 actionsheet 而且每一个 actionsheet 中的菜单有对应的方法
 
add-method-to-actionsheet

咱们再给 Button 添加点击事件

<mt-button type="primary" size="large" @click.native="showActionSheet"> primary </mt-button>
  • 1四、运行一把看结果
 
show-actionsheet-result

还不错吧，这里基本就差很少了，其它的组件咱们照着文档使用就能够了，没什么难的「文档很是的详细」

具体代码看：源代码

3、使用 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

4、总结

本节咱们说了 mint-ui 的使用，其实无论什么组件都是相似的使用方式，仍是很是 easy 的，大概总结一下

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

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

二、使用 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

联系我们 沪ICP备13005482号-10