- 创建其他组件，例如School.vue和Student.vue
<template>
<div>
<h2>{{schoolName}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data:{
schoolName:'第三中学'
}
}
</script>
<style>
</style>
- 首先创建App.vue，该组件管理其他所有组件。
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
import School from "./School";
import Student from "./Student";
export default {
name:'App',
components:{
School,
Student
}
}
</script>
<style>
</style>
- 创建Vue实例对象（main.js）
import App from "./App";
new Vue({
el:'root',
components:{
App
},
template:`<App></App>`
})
- 创建主页（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="/js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
