VONIC

介绍

什么是 vonic ？

一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用。

和 ionic 的关系：没有关系，只是在样式方面以 ionic 的 css 文件为基础（做了一些调整）

---

基础规范

字体

vonic 沿用了 ionic 跟随苹果系统的字体栈

font-family: '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;

颜色

vonic 提供以下几种场景色

这些场景色将作为主题元素融入到很多插件中去，如：Material Design Button、单选框、多选框、开关按钮、计数器、选项卡、对话框等。

图标

既然 vonic 是以 ionic 样式为基础的，那它当然也包含 ionicons 图标集。

---

准备

依赖

vonic 依赖以下几个库，在创建 vonic 项目之前，请确保引入它们。

• vue.js
• vue-router.js
• axios.js (vue.js 官方推荐的 ajax 方案)

CDN

通过 unpkg/vonic 你可以快速获取最新的相关资源文件（含 vonic 定制版 ionic 样式资源文件）。

<!-- 定制版 ionic 样式 -->
<link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.6/dist/ionic/css/ionic.css">

<!-- 依赖库 axios/vue/vue-router -->
<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.2.0/dist/vue-router.min.js"></script>

<!-- vonic 核心文件 -->
<script src="https://unpkg.com/vonic@2.0.0-beta.6/dist/vonic.min.js"></script>

vonic 当前最新版本为 2.0.0-beta.6

---

Hello Vonic

好了，是时候整一个 Hello World 了。

vonic 是一个用来做单页应用的UI框架。所以，我们这里谈论的 Hello World 不是一个单个的页面，而是一个单页应用骨架。

整个单页应用的搭建过程很简单，只要4个步骤。

应用挂载点

<von-app></von-app>

页面组件

const Index = {
  template: `
    <div class="page has-navbar" v-nav="{ title: 'Home' }">
      <div class="page-content text-center">
        <h2 class="padding" v-text="msg"></h2>

        <router-link class="button button-assertive" to="/about">
          <i class="ion-information-circled"></i> About
        </router-link>
      </div>
    </div>
  `,
  data() {
      return {
        msg: 'Hello! Vonic.'  
    }
  }
}

const About = {
  template: `
    <div class="page has-navbar" v-nav="{ title: 'About', showBackButton: true }">
      <div class="page-content text-center">
        <h2 class="padding">Nothing here.</h2>
      </div>
    </div>
  `
}

路由定义

const routes = [
  { path: '/', component: Index },
  { path: '/about', component: About }
]

启动应用

Vue.use(Vonic.app, {
  routes: routes
})

没错，就这么简单。

---

组件和服务

概述

vonic 加载完成后，一部分组件已通过Vue.component方法注册为全局组件，以 Vue 标准组件方式进行使用；另一部分组件则注册为全局组件服务，调用其方法即可使用，如：$toast、$dialog 等。

下面以 MdButton、$toast 为例进行说明：

<template>
  <div class="page has-navbar" v-nav="{'title': 'Component and Service'}">
    <div class="page-content padding padding-top">
      <md-button class="button button-assertive button-block">
        just a button
      </md-button>

      <md-button class="button button-balanced button-block" @click.native="onClick()">
        show toast
      </md-button>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      onClick() {
        $toast.show("button clicked.")
      }
    }
  }
</script>

vonic 组件

组件名称	组件标签	描述
MdButton	<md-button>	Material Design 风格按钮
VonInput	<von-input>	输入框
Search	<search>	搜索框
VonRadio	<von-radio>	单选框
VonCheckbox	<von-checkbox>	复选框
VonToggle	<von-toggle>	开关按钮
VonRange	<von-range>	滑块
VonHeader	<von-header>	页头
VonBadge	<badge>	徽章
List	<list>	列表
Item	<item>	列表选项
Cells	<cells>	宫格
Tabs	<tabs>	选项卡
ButtonBar	<button-bar>	按钮栏
Scalable	<scalable>	缩放
Swiper	<swiper>	轮播容器
SwiperItem	<swiper-item>	轮播项
Scroll	<scroll>	滚动容器
Scroller	<scroller>	基于 vue-scroller 插件的滚动容器
Cascade	<cascade>	级联
Accordion	<accordion>	手风琴容器
AccordionItem	<accordion-item>	手风琴内容项
Datepicker	<datepicker>	日期选择器

vonic 服务

服务名称（全局变量）	描述
$toast	文字提示
$loading	加载提示
$dialog	对话框
$popup	弹层
$actionSheet	操作列表
$tabbar	选项栏
$sidebar	侧边栏
$modal	模态窗
$storage	本地存储

vonic 指令

指令	描述
v-nav	导航栏指令
v-tabbar	选择栏指令
v-tabbar-menu-index	选择栏默认菜单指令

---

页面与路由

页面

vonic 通过 .page、.page-content 这两个基类和v-nav指令来定义页面及导航栏信息

<template>
  <div class="page has-navbar" v-nav="{title: '页面标题'}">
    <div class="page-content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

v-nav 指令参数列表

参数名	描述	类型	必选	默认值
title	导航栏标题	String	否	无
showBackButton	是否显示返回按钮	Boolean	否	false
backButtonText	返回按钮文字（模板）	String	否	见备注
onBackButtonClick	返回按钮点击回调	Function	否	无
showMenuButton	是否显示菜单按钮	Boolean	否	false
menuButtonText	菜单按钮文字（模板）	String	否	见备注
onMenuButtonClick	菜单按钮点击回调	Function	否	无
hideNavbar	隐藏导航栏	Boolean	否	false

backButtonText 默认值为 <i class="icon ion-ios-arrow-back"></i>
menuButtonText 默认值为 <i class="icon ion-navicon"></i>

路由

vonic 加载完成后，即注册 VueRouter 实例为 $router 服务

$router.forward() 和 $router.back() 两个方法默认通过调用 VueRouter 实例的 push 方法来进行路由切换，但在调用 push 方法前会预先定义页面切换方向。

/* 启动应用前，设置 Vonic.app 的 pushMethod 选项为 replace 可以全局禁用浏览器 history */
/* 即，$router.forward()、$router.back() 不再新增浏览记录 */

Vonic.app.setConfig('pushMethod', 'replace')

Vue.use(Vonic.app, {
  routes: routes
})

Webpack

习惯使用 vue init webpack my-project 构建项目的同学，请参考这个项目。

github.com/wangdahoo/v…