Vue计划-4 第三方UI组件库

我们知道，当我们使用js和jQuery写网页的时候，我们可以从网上选择很多的插件，来减轻我们的压力。使用Vue.js之后，我们也可以选择质量更好的第三方UI组件库。库的意思，是一个包里，有很多的组件可供选择。我们这里选择有饿了么大前端组出品的MintUI组件库 。你们也可以使用手机，输入http://elemefe.github.io/mint-ui/#/ ，在手机中预览这个组件库。

安装组件库

首先我们初始化项目，并且安装组件库，注意我们要选择带vue-router路由库的项目模板

• 初始化项目

# vue init webpack projectfour
# cd projectfour
# cnpm install

image.png

• 安装mint-ui组件库
  mintui文档中的安装方法：

image.png

# cnpm install mint-ui -S

image.png

• 安装Stylus解释器

# cnpm install stylus --save-dev
# cnpm install stylus-loader --save-dev

• 运行服务器

# cnpm run dev

• 完成引入
  官方文档中：

image.png

所以我们在main.js中，引入：

image.png

• 然后我们就可以启动服务器了

# cnpm run dev

---

创建页面框架

• 首先我们知道，一个手机页面，都需要在html的标签设置禁止缩放和规定高宽度。我们将这句代码，复制到index.html中

image.png

• 然后我们想实现一个四分栏

image.png

• 我们可以分析一下，首先他的顶部header，底部的tabbar，都可以拆分开来放在公共部分，然后中部的术语index主页的部分，可以放入index组件，其他的tab的内容，也可以放在相应的组件中。

• 我们先来写主页面App.vue的公共部分：
  ·首先我们在mintui的文档中找到header的部分：

  
  
  
  
  

  我们这里就使用不带返回键的带右边的样式，黏贴代码到App.vue中

  
  
  
  
  实现的效果就是
  
  

• 然后我们再来做tabbar，同样的找到文档中的代码，复制到App.vue中：

  
  
  
  
  
  
  
  
  

这里用到的图片，可在文末的实例工程中找到

• 然后我们可以看到，tabbar绑定了一个数据selected，我们需要在data内，定义这个数据。然后我们监视这个数据，看看每次它改变之后都是什么值，还记得我们todolist哪里用的监视的函数么？
  https://cn.vuejs.org/v2/api/#watch

我们看到他这个selected就是每个tab的id值，我们之前，每次刚进入的时候，他是没有选中任何一个tab的，那么我们把selected的初始值，改为首页，就可以刚进入就选中主页了：

• 但是我们发现，选中某一个tab，我们怎么改变此tab的颜色呢？我们是不是可以借助watch来监视selected值的改变，然后动态的改变tab的图标呢？这个大家思考思考，这次就不说了。

• 然后我们发现，我们现在选择了不同的tab，可是还是不能改变中间的内容。这里有两种方法分别介绍，不过我们要先来新建这四个组件

• 在components中新建home.vue,near.vue,firend.vue和my.vue

  
  
  
  
  
  

1、使用MintUI的tab-container组件

• 首先在App.vue import这四个组件

  
  
  

• 然后在components中注册

  
  
  

• 然后我们复制tab-container组件代码到原来的标签的地方

  
  
  

• 然后我们来改造这个

  
  
  

  第一步新建一个变量

第二部让这个变量随着selected改变而改变

image.png

• 然后看看效果：

  
  
  

  成功

2、使用router路由

使用路由来控制的方法这里不一步一步来了我大致说一下步骤，感兴趣的话自己试一下

• 首先我们在router的index.js里中引入组件、编辑路由表

• 在App.vue里监视selected，判断val，更具val，来控制前往哪一个页面

---

首页

好了我们现在可以开始写首页的具体页面了，对了我刚刚在tabbar那里，加了个fixed属性防止他滚动：

• 先拉一个幻灯片下来

  
  
  

  示例
  
  
  

  image.png
  
  
  
• 发现幻灯片的周围有margin，为啥？因为我们忘记css reset了，我们百度一个reset代码：
  http://meyerweb.com/eric/tools/css/reset/ ，复制下来在assets里新建一个css或者stly拷贝进去，在main.js里import进来就可以啦：
  
  

• 发现还是有上边的，开发者工具看一下，原来是这里：

  
  
  

  App.vue

• 要修复这个问题，我们需要找到header的高度，我们开发者工具测一下：

  
  
  

  40px
  
  
  
  
  
  

• 完美，我们再把这个变成图片吧

  
  
  
  
  
  

  CSS
  
  
  

  效果

---

剩下的？

• 剩下的，你们发挥自己的想象力，Do It Yourself吧

---

工程文件

• 图片资源 http://down.clubunion.cn/ImageResource.zip
• 工程文件 http://down.clubunion.cn/projectfour.zip
• 怎么使用？解压，cd cnpm install rundev

---

结束

var author = {
  name:'丁波',
  GitHub:'dingbo1028',
  University:'BNUZ'
}