我们知道，当我们使用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的<mate>标签设置禁止缩放和规定高宽度。我们将这句代码，复制到index.html中
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
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组件代码到原来的<router-view>标签的地方
-
然后我们来改造这个
第一步新建一个变量
第二部让这个变量随着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'
}
网友评论