一、基本结构
基本结构-js
var App = Vue.extend({});
var Home = Vue.extend({
template:'<h1>Home</h1>'
})
var List = Vue.extend({
template:'<h1>List</h1>'
})
var Item = Vue.extend({
template:'<h1>Item</h1>'
})
var router = new VueRouter();
router.map({
'/home':{
name: 'home',
component: Home
},
'/songs':{
name: 'list',
component: List
},
'/songs/:id':{
name: 'item',
component: Item
}
})
router.start(App,'#app');
router.redirect({
'*':'home'
});
基本结构-HTML
<body class="page" id="app">
<header class="header">
<a v-link="{ path: '/home' }"><i class="fa fa-expand"></i></a>
<a v-link="{ path: '/songs' }"><i class="fa fa-list"></i></a>
</header>
<section class="main">
<router-view></router-view>
</section>
<script src="libs/vue/vue.js"></script>
<script src="libs/vue-router/vue-router.js"></script>
<script src="libs/vue-resource/vue-resource.js"></script>
<script src="app.js"></script>
</body>
二、基本文件
- vue.js 核心库
- vue-router.js 路由
- vue-resource.js ajax的封装