MintUI（详见官方文档）

MintUI

MintUI是饿了么团队开发的基于移动端的vue组件库。用于搭建移动端界面。

http://mint-ui.github.io/docs/#/zh-cn2

Vant组件库也是基于移动端的vue组件库（有赞团队）。

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

基于脚手架项目安装mintui

1. 新建项目。

   # 找一个空文件夹  VUEUI/day01/demo下执行一个命令
   vue  create  scaffolding
   # 依次选择
   Manually select features   
   选择 Babel - Router - VueX   去掉 linter
   2.x
   是否使用history的路由模式？  回车 Y
   In package.json
   是否将当前上设置作为未来创建项目的预设配置？ 回车 N
   

2. 在新项目中，通过npm i 命令安装MintUI。

   # 进入新创建的项目目录
   cd scaffolding
   # 执行安装命令
   npm  i  mint-ui  -S
   

   安装成功后，将会在package.json中出现mint-ui的依赖。node_modules文件夹下也会出现mint-ui的源码包。

3. 在脚手架项目中，main.js配置MintUI。

   // MintUI
   import MintUI from 'mint-ui'
   import 'mint-ui/lib/style.css'
   Vue.use(MintUI)
   

4. 开始使用组件。

   npm run serve
   

   没有编译错误，配置完成。

测试案例：访问http://localhost:8080/button，看到mintui提供的移动端的按钮样式。

1. 编写新组件页面：src/testing/Button.vue.
2. 配置路由： /button Button.vue.

MintUI常用组件

Button组件

Header组件

header用于定义移动端界面的头部标题栏。基本结构：

<mt-header title="标题栏中间的文字内容">
	<div slot="left">左边</div>
	<div slot="right">右边</div>
</mt-header>

案例：访问：/header 看到 src/testing/Header.vue。

引入外部样式文件： reset.css

1. 在public下新建styles目录，把reset.css放进去。

2. 在index.html中引入该css文件即可。

   <link rel="stylesheet" href="/styles/reset.css">
   

脚手架项目属于单页面应用，无论访问任何地址，其实都在加载public/index.html.所以，在public下的资源，可以直接在index.html通过标签路径引入网页。

Field组件

Field组件用于实现表单编辑器，其基本结构：

<mt-field	type="输入框的类型"
          	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 @blur.native.capture="checkName()"></mt-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链接元素：

<a class="mint-cell mint-field">
    <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事件在事件捕获阶段先执行。

MintUI常用组件

Navbar组件

navbar组件用于实现顶部选项卡（导航）。其基本语法：

<mt-navbar v-model="active">
	<mt-tab-item id="1">推荐</mt-tab-item>
	<mt-tab-item id="2">科技</mt-tab-item>
	<mt-tab-item id="3">数码</mt-tab-item>
	<mt-tab-item id="4">军事</mt-tab-item>
</mt-navbar>
<script>
   ....
   data: {
       return {
           active: '1'
       }
   }
   ....
</script>

案例：访问：/nav， 看到 testing/Nav.vue

脚手架项目中的图片访问机制

如果在vue组件中访问src下的资源，则可以使用相对路径来引入：

<img src="../assets/001.png">    相对路径  相对当前文件的路径写法
<img src="@/assets/001.png">     相对路径  @代表了src

如果如上述方式访问图片，则脚手架将会在编译打包过程中，将该引用的图片当做代码模块来处理。会将图片放入/img目录，并且重命名 001.xxxxxxxx.png。而后还将修改src属性值，使得可以访问到该图片。

<img src="/img/001.2cb338f3.png">

上述过程为脚手架对图片的编译打包过程，如果图片足够小，脚手架还有另外一种处理图片的方式：将小图片直接转换成base64图片编码，为src属性直接赋值。

研究一下图片的存放位置

在脚手架项目中图片的存放位置有两处：public下、 src下

src下的图片用相对路径访问

假设有图片：  src/assets/001.png

<img src="../assets/001.png">    相对路径  相对当前文件的路径写法
<img src="@/assets/001.png">     相对路径  @代表了src

public下的图片用绝对路径（斜杠/）直接访问

假设有图片：  public/001.png
<img src="/001.png">

public文件夹下的资源会在打包时原封不动的复制到dist目录下，所以可以直接通过/来访问这些资源。

什么图片放src？什么图片放public？

src目录属于源代码目录，需要思考这些图片是不是属于源代码的一部分。一些不会变化的、项目中必须显示的小图标就适合放到src，其余的都可以放入public或其它静态图片服务器，通过网络地址动态加载。

TabContainer组件

TabContainer组件用于实现面板，页面中可以保存多个面板，并且实现面板内容的切换（一个显示，其它隐藏）。其基本结构：

<mt-tab-container v-model="active">
	<mt-tab-container-item id="1">面板1内容</mt-tab-container-item>
	<mt-tab-container-item id="2">面板2内容</mt-tab-container-item>
	<mt-tab-container-item id="3">面板3内容</mt-tab-container-item>
	<mt-tab-container-item id="4">面板4内容</mt-tab-container-item>
</mt-tab-container>

Tabbar组件

Tabbar组件用于实现底部选项卡，其语法：

<mt-tabbar v-model="selected">
	<mt-tab-item id="sy">首页</mt-tab-item>
	<mt-tab-item id="gwc">购物车</mt-tab-item>
	<mt-tab-item id="wd">我的</mt-tab-item>
</mt-tabbar>
data:{
	selected: 'sy'
}

案例：访问：/tabbar 看到：testing/Tabbar.vue

脚手架环境下的图片的动态路径问题

有如下标签：

<img src="../assets/main_0.png">

该路径为相对路径，访问了src下的资源。这种写法最终将会被脚手架编译，重写src：

<img src="/img/main_0.adsdkfhs.png">

注意：如果src为动态属性（前面有冒号），脚手架将不会编译该路径，直接输出到页面：

<img :src="../assets/main_0.png"> 
将不会编译，直接输出为：
<img src="../assets/main_0.png">   // 导致图片找不到

所以应该将动态路径字符串交给require方法进行处理，将会返回处理后的结果（目标路径）：

<img :src="require('../assets/main_0.png')">
将会编译为：
<img src="/img/main_0.adsdkfhs.png">

图片处理方案（总结）：

1. 先确定图片应该放在public还是src。
2. public下图片用绝对路径访问，src下图片用相对路径访问。
3. 若src下的图片路径需要动态处理（:src=""），使用require()方法处理该路径。

处理底部选项卡的选中效果

点击某一个底部选项卡时，需要动态切换上半部分的内容。可以通过动态组件的方式实现。也可以使用嵌套路由。

访问：  
localhost:8080/home/index      Home中显示'首页'内容
localhost:8080/home/me         Home中显示'我的'内容

实现步骤

1. 准备好3个Vue页面：

   1. HomeView.vue 该页面中包含一个底部选项卡，还有一个<router-view/>
   2. Index.vue 该页面中用于显示首页内容。Header Navbar TabContainer
   3. Me.vue 用于显示我的个人信息页面内容。

2. 配置嵌套路由：

   访问：  
   localhost:8080/home/index      Home中显示'首页'内容
   localhost:8080/home/me         Home中显示'我的'内容
   

Swipe组件

swipe组件用于实现轮播图，其基本语法结构：

<mt-swipe>
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

引入ArticleItem组件，构建基本界面结构

1. 将article_item.vue 复制到components目录下。

2. 在Index.vue中引入该组件：

   <template>
   	....
       <ArticleItem />
       ....
   </template>
   
   <script>
   import ArticleItem from '../components/article_item.vue'
   export default {
     components:{
       ArticleItem
     }
   }
   </script>