Vonic 是一个基于Vue.js和ionic样式的UI框架,用于方便快速地搭建单页应用。
如何利用Vonic快速搭建一个单页应用脚手架
写几个页面组件,配下路由。对,就这样。
准备
Vonic依赖于vue.js、vue-router.js、axios.js这三个基础库及ionic样式文件。
在本地创建一个html文件,如:index.html,然后你可以这样引入它们和Vonic框架的核心js文件vonic.js:
添加应用挂载点
在body中添加von-app标签,作为vonic单页应用的挂载点
编写页面组件
这里,我们采用编写vue options对象的方式来编写页面组件,代码如下:
|
|
Vonic单页应用的页面组件均用一个带有.page类的div进行包括,并通过v-nav指定来控制全局的navbar行为,v-nav的值可以直接用字面量字符串表示。而页面组件内容,则都编写在.page-content这个容器中
v-nav指令属性列表
属性名 | 属性描述 | 类型 | 必选 | 默认 |
---|---|---|---|---|
title | 导航栏标题 | String | No | 空字符串 |
showBackButton | 是否显示(左边的)返回按钮 | Boolean | No | false |
onBackButtonClick | 返回按钮点击回调函数 默认调用history.go(-1) | Function | No | undefind |
showMenuButton | 是否显示(右边的)菜单按钮 | Boolean | No | false |
onMenuButtonClick | 菜单按钮点击回调函数 | Function | No | undefind |
backButtonText | 返回按钮文字(图标) | String | No | 见备注 |
menuButtonText | 菜单按钮文字(图标) | String | No | 见备注 |
backButtonText和menuButtonText两个选项默认值按平台不同给定不同的html字符串,以backButtonText为例,iOS下默认值为:<a class=”button button-icon icon ion-ios-arrow-back”></a>。你可以通过这个属性来定制自己的返回按钮。
按同样的方法,我们编写第二个页面组件,代码如下:
配置路由信息
接下来,我们把刚才写的两个页面组件按不同的路由进行配置,配置方式同VueRouter
启动应用
最后,以安装Vue插件的方式,启动Vonic应用
完整代码和运行效果请查看 https://jsfiddle.net/wangdahoo/rn7ypwvn/
整合webpack
如果你喜欢用es6 + babel + webpack + vue-loader的方式来开发vue组件(*.vue),那你可以这样:
嗯,就这么简单。