一、MintUI -- 基于移动端的vue组件

搭建 MintUI 的基础项目运行环境

1.新建项目： mint-project 。

2.安装 mintui 。

3.在 main.js 中引入 mintui

4.测试 mintui 组件。

二、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判断，可读性更高