我们知道,当我们使用js和jQuery写网页的时候,我们可以从网上选择很多的插件,来减轻我们的压力。使用Vue.js之后,我们也可以选择质量更好的第三方UI组件库。库的意思,是一个包里,有很多的组件可供选择。我们这里选择有饿了么大前端组出品的MintUI组件库 。你们也可以使用手机,输入http://elemefe.github.io/mint-ui/#/ ,在手机中预览这个组件库。
安装组件库
首先我们初始化项目,并且安装组件库,注意我们要选择带vue-router路由库的项目模板
- 初始化项目
# vue init webpack projectfour
# cd projectfour
# cnpm install

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

# cnpm install mint-ui -S

- 安装Stylus解释器
# cnpm install stylus --save-dev
# cnpm install stylus-loader --save-dev
- 运行服务器
# cnpm run dev
- 完成引入
官方文档中:

所以我们在main.js
中,引入:

- 然后我们就可以启动服务器了
# 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">

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

-
我们可以分析一下,首先他的顶部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>标签的地方
-
然后我们来改造这个
第一步新建一个变量


-
然后看看效果:
成功
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'
}
网友评论