Vonic 简明教程(一):起步

阅读 6327
收藏 86
2016-12-03
原文链接:wangdahoo.github.io
Vonic 是一个基于Vue.js和ionic样式的UI框架,用于方便快速地搭建单页应用。


GitHub 地址

如何利用Vonic快速搭建一个单页应用脚手架

写几个页面组件,配下路由。对,就这样。

准备

Vonic依赖于vue.js、vue-router.js、axios.js这三个基础库及ionic样式文件。在本地创建一个html文件,如:index.html,然后你可以这样引入它们和Vonic框架的核心js文件vonic.js:








添加应用挂载点

在body中添加von-app标签,作为vonic单页应用的挂载点


  

编写页面组件

这里,我们采用编写vue options对象的方式来编写页面组件,代码如下:

const Index = { template: `
  

Hell,Vonic!

about
`}

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下默认值为:。你可以通过这个属性来定制自己的返回按钮。

按同样的方法,我们编写第二个页面组件,代码如下:

const About = { template: `
  

Nothing here.

`}

配置路由信息

接下来,我们把刚才写的两个页面组件按不同的路由进行配置,配置方式同VueRouter

const routers = {
  '/': { component: Index },
  '/about': { component: About }
}

启动应用

最后,以安装Vue插件的方式,启动Vonic应用

Vue.use(Vonic.app, {
  routers: routers,
  defaultRouterUrl: '/'
})

完整代码和运行效果请查看 jsfiddle.net/wangdahoo/r…

整合webpack

如果你喜欢用es6 + babel + webpack + vue-loader的方式来开发vue组件(*.vue),那你可以这样:

$ vue init wangdahoo/vonic-template my-project
$ cd my-project
$ npm install
$ npm run dev

嗯,就这么简单。

评论