搭建脚手架
路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Book from "../views/Book";
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/book',
name: 'Book',
component: Book
}
]
const router = new VueRouter({
routes
})
export default router
视图
<template>
<div>
<table>
<tr>
<td>编号</td>
<td>名字</td>
<td>作者</td>
</tr>
<tr v-for="book in books" :key="book.id">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "Book",
data(){
return {
books:[
{
id: 1,
name: '三体',
author: '刘慈欣'
},
{
id: 2,
name: 'java从零到入土',
author: '我'
}
]
}
}
}
</script>
<style scoped>
</style>
要开始做项目了,边做边学