一、MintUI -- 基于移动端的vue组件
搭建 MintUI 的基础项目运行环境
1.新建项目： mint-project 。
| # 找一个干净地方 day03/demo/ vue create mint-project Manually select features 选择：Babel - Vuex - Router - Css Preprocessors 去掉linter 2.x 以下选项一路回车即可 |
2.安装 mintui 。
| npm i mint-ui -S |
3.在 main.js 中引入 mintui
| import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI) |
4.测试 mintui 组件。
| <mt-button type="primary">测试按钮</mt-button> |
二、Header 组件
Header组件用于实现顶部标题栏：
title属性用于设置标题文本。
提供了两个插槽：left、right。分别用于动态设置标题栏左侧与右侧的内容。
三、Field 组件
示例：
1. 新建页面： src/testing/Field.vue ，编写组件内容。
2. 配置路由： 访问: /field 时看到 Field.vue 效果。
实现项目中的注册页面
1. 新建页面： views/Register.vue 。 一个header、三个Field、一个按钮。
2. 配置路由：访问： /register 看到 views/Register.vue 。
3. 完成注册页面表单验证。
- 1. 焦点失去时进行表单验证。
- 2. 点击提交按钮后对表单进行验证。
为 mt-field 添加 @blur 不生效的问题
如果希望捕获 mt-field 组件的焦点失去事件，应如下编写：
如果为组件直接绑定 @blur 事件， vue 将会把 blur 事件当做是 mt-field 组件的自定义事件，这种自定义事件需要在 mt-field 组件内部通过 $emit() 方法主动触发。 vue 并没当做是DOM的原生事件（焦点失去事件）。所以需要添加 @blur.native 。
这样就会在 mt-field 编译之后的根元素 a 标签上绑定原生的焦点失去事件。还有一个问题：当触发了输入框的onBlur 时，并不会向父元素冒泡，也就不会执行 a 标签上的焦点失去事件处理函数。所以还需要再添加修饰符： @blur.native.capture 。 capture 修饰符的作用使事件处理函数在事件捕获阶段就执行。 先执行父元素再执行子元素。可以保证a标签上的 blur 先执行。
四、Navbar 组件
Navbar 组件用于实现顶部导航。基本结构：
测试：
1. 编写测试页面： testing/Nav.vue ，编写顶部导航。
2. 配置路由：访问 /nav ，看到 testing/nav.vue 。
五、脚手架项目图片的访问方式
在 vue 脚手架项目中，存放图片的位置有两大类： public 下 src 下
如果图片放在了 src 下
在 src 下的图片用相对路径访问。例如：
在 src/assets/下有001.png 002.png:
@ 相当于 src 目录，从 src 向下寻找图片。
放在 src 目录下的图片，用相对路径来访问，当 vue 发现需要通过相对路径来寻找图片时，将会对该图片进行编译：对图片进行重命名： 001.702493c6.png ，然后在打包时，将图片放入项目根目录下的 /img 文件夹中，最后修改 img 的 src 属性：
脚手架对图片的编译有一些优化措施：
对于足够小的图片，脚手架在编译图片时将会把图片转成 Base64 编码直接写入 img 的 src 属性。
使用了 base64 编码，将会在页面下载时，将图片数据直接下载到客户端，一起显示。
如果图片放到了 public 下
public 下的图片，使用绝对路径（斜杠开头）直接访问。例如：
在public下有图片：007.png 025.png ， 如下访问：
public下的资源可以用/直接访问。因为脚手架项目在打包时，将会把 public 下所有静态资源原封不动的复制到dist文件夹中。所以访问 public 下的图片时，可以直接用/访问，相当于直接访问dist目录下的静态资源。Public放纯静态资源
什么样的图片放 assets ？什么样的图片放 public ？
一般情况下项目中必须要显示的小图标、图片可以放入 assets ，其余都放 public 下。
assets 在 src 下，属于项目源代码的一部分。
特殊情况 (相对路径访问 src 下的图片，并且到动态设置路径时)
例如：
上述代码，将会编译图片。
动态修改 src ：
一旦给 src 加上冒号， vueloader 将不会编译图片路径，将图片路径直接输出给 src 。
如果希望手动编译，则需要调用 require 方法：
三绝句：
1. public下资源用/直接访问。
2. assets下资源用相对路径访问。 ../ 或 @
3. 如果src需要动态设置，长个心眼儿， 必要时添加 require 。
六、Tabbar 组件
Tabbar 用于显示底部选项卡。基本结构如下：
要使图片资源是动态的，scr前要加冒号变成动态的，里面的路径用字符串拼接，使用三目判断并决定当前选项是选中状态与未选中状态的图片，但是由于这种路径的图片需要编译才行，动态的src是不自动进行编译的，所以要调用require()方法，图片路径会被require处理
还有另一种方法是直接用v-if判断，可读性更高
