MintUI
MintUI是饿了么团队开发的基于移动端的vue组件库。用于搭建移动端界面。
mint-ui.github.io/docs/#/zh-c…
Vant组件库也是基于移动端的vue组件库（有赞团队）。
vant-contrib.gitee.io/vant/v2/#/z…
基于脚手架项目安装mintui
新建项目。
vue create scaffolding
# 依次选择
Manually select features
选择 Babel - Router - VueX 去掉 linter
2.x
是否使用history的路由模式？ 回车 Y
In package.json
是否将当前上设置作为未来创建项目的预设配置？ 回车 N
在新项目中，通过npm i 命令安装MintUI。
cd scaffolding
# 执行安装命令
npm i mint-ui -S
- 安装成功后，将会在
package.json中出现mint-ui的依赖。node_modules文件夹下也会出现mint-ui的源码包。 - 在脚手架项目中，
main.js配置MintUI。
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
开始使用组件。
测试案例：访问http://localhost:8080/button，看到mintui提供的移动端的按钮样式。
- 编写新组件页面：
src/testing/Button.vue. - 配置路由：
/button Button.vue.
MintUI常用组件
Button组件
Header组件
header用于定义移动端界面的头部标题栏。基本结构：
<div slot="left">左边</div>
<div slot="right">右边</div>
</mt-header>
案例：访问：/header 看到 src/testing/Header.vue。
引入外部样式文件： reset.css
- 在
public下新建styles目录，把reset.css放进去。 - 在
index.html中引入该css文件即可。
```<link rel="stylesheet" href="/styles/reset.css">
脚手架项目属于单页面应用，无论访问任何地址，其实都在加载public/index.html.所以，在public下的资源，可以直接在index.html通过标签路径引入网页。
Field组件
Field组件用于实现表单编辑器，其基本结构：
label="文本框左侧标签的文本"
placeholder="占位文本"
disabled 是否禁用
readonly 是否只读
state="输入框的状态 success|error|warning"
disableClear 禁用清空文本框按钮
:attr="{maxlength:11}" 为内部的input标签添加属性
></mt-field>
案例：访问 /field， 看到testing/Field.vue.
案例：完成注册页面。
1 新建页面：src/views/Register.vue。 2配置路由：/register <-> Register.vue
实现注册页面的表单验证
1 为按钮绑定click事件，点击后验证表单。 2 在事件处理函数中分别为3个组件进行格式验证，都符合条件才输出验证成功。 3 可以通过Field的state属性来提示用户格式是否正确。
Field组件的@blur失效问题
在Mintui中，为Field组件绑定焦点失去、焦点获取的事件的方式如下：
<mt-field @focus.native.capture="checkName()"></mt-field>
为mt-field组件直接添加@blur无效，因为会被vue当做是mt-field组件的一个自定义事件。而这种事件需要在mt-field组件内部捕获，使用$emit()触发该自定义事件。所以需要在此清楚的告诉vue，该blur事件是原生的焦点失去事件，所以需要添加@blur.native。
mt-field组件在编译的时候将会编译成a链接元素：
<div class="mint-cell-left"></div>
<div class="mint-cell-wrapper">
<div class="mint-cell-title">
<span class="mint-cell-text">用户名</span>
</div>
<div class="mint-cell-value">
<input placeholder="请输入用户名" type="text"
class="mint-field-core">
<div class="mint-field-clear" style="display: none;">
<i class="mintui mintui-field-error"></i>
</div>
<div class="mint-field-other"></div>
</div>
</div>
<div class="mint-cell-right"></div>
</a>
@blur将会被添加到最外层的a上，而浏览器默认input的blur事件阻止冒泡，不会执行a的blur事件，所以需要添加：@blur.native.capture，是a上的blur事件在事件捕获阶段先执行。
