Vonic简明教程（一）起步

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/ionic/css/ionic.css">
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vonic.min.js"></script>
<!-- Add a VonApp tag, which the whole things will be mounted on. -->
<von-app></von-app>

CSS

/* Your Style */
.page-content p {
  /* padding: 50px 0 10px 0; */
  text-align: center;
  font-size: 18px;
}

.page-content a {
  text-align: center;
  display: block;
}

Babel + JSX

// 1. Define some page components
const Index = { template: `
	<div class="page has-navbar" v-nav="{title: '首页', showBackButton: false}">
    <div class="page-content">
      <p>Hell,Vonic!</p>

      <a v-link="{path: '/about'}">
      	about
      </a>
    </div>
  </div>
`}

const About = { template: `
  <div class="page has-navbar" v-nav="{title: '关于我们', showBackButton: true}">
    <div class="page-content">
      <p>Nothing here.</p>
    </div>
  </div>
`}

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

// 3. Start Vonic.app as a vue plugin
Vue.use(Vonic.app, {
  routers: routers,
  defaultRouterUrl: '/'
})

// That's it!