MintUI（详见官方文档）

MintUIMintUI是饿了么团队开发的基于移动端的vue组件库。用于搭建移动端界面。http://mint-ui.github.io/docs/#/zh-cn2Vant组件库也是基于移动端的vue组件库（有赞团队）。https://vant-contrib.gitee.io/vant/v2/#/zh-CN/基于脚手架项目安装mintui新建项目。# 找一个空文件夹VUEUI/day01/dem

li_ding_ding

10955人浏览 · 2022-03-17 22:47:28

li_ding_ding · 2022-03-17 22:47:28 发布

`MintUI`

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

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

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

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

基于脚手架项目安装`mintui`

新建项目。

# 找一个空文件夹  VUEUI/day01/demo下执行一个命令
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。

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

开始使用组件。
```
npm run serve
```
没有编译错误，配置完成。

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

编写新组件页面：src/testing/Button.vue.
配置路由： /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

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

在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.

案例：完成注册页面。

新建页面：src/views/Register.vue。
配置路由：/register <-> Register.vue

实现注册页面的表单验证

为按钮绑定click事件，点击后验证表单。
在事件处理函数中分别为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">

图片处理方案（总结）：

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

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

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

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

实现步骤

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

配置嵌套路由：

访问：  
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`组件，构建基本界面结构

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

在Index.vue中引入该组件：

<template>
	....
    <ArticleItem />
    ....
</template>

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

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

口才教育：如何提升沟通技巧与表达能力

ViewDesign

C 嵌入式系统设计模式 28：通道模式

ViewDesign

优雅的前端框架：iView - 强大、易用且美观

优雅的前端框架：iView - 强大、易用且美观项目地址:https://gitcode.com/gh_mirrors/iv/iview是一个基于 Vue.js 的高质量 UI 组件库，旨在为开发者提供简单、直观、高效的基础组件，帮助他们快速构建现代 Web 应用程序。此项目由 Alibaba IVWEB 团队维护，质量与更新稳定性有保障。技术分析Vue.js 基础：iView 充分利...