这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战
前言：之前自己使用Vue脚手架编写项目可以大概使用，但是不清楚原理和这么多文件的作用，在学过vue的一部分基础知识后渐渐明白了些主要文件的作用了。这里主要讲解下App.vue、main.js、index.html和组件的相互作用。
组件
vue中比较灵魂的部分是组件。组件定义：实现应用中局部功能代码和资源的集合。
脚手架的主要原理也是使用组件来构件项目的。
最基本主要的有三个文件：App.vue、main.js、index.html。下图是主要结构和文件作用（这里有俩组件：School、Student）。
- 首先是创建要用的组件（School.vue、Student.vue）这两个组件就是普通组件，互相之间没有关系。但是需要接下来的App.vue管理。
<template>
<div>
<h2>学校名字：{{ name }}</h2>
<h2>校长：{{ headerName }}</h2>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "山东大学",
headerName: "wangw",
};
},
};
</script>
<style>
.demo {
background-color: red;
}
</style>
<template>
<div>
<h2>学校名字：{{ name }}</h2>
<h2>校长：{{ age }}</h2>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "张三",
age: 21,
};
},
};
</script>
<style>
.demo {
background-color: red;
}
</style>
- 创建App.vue。在这个文件里引用了之前的两个组件，也就是总管理前面两个组件的作用。
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
import School from "./School.vue";
import Student from "./School.vue";
export default {
data() {
return {};
},
components: {
School,
Student,
},
};
</script>
<style>
</style>
- 创建main.js。组件创建不需要el绑定元素。但是vue实例需要展示使用是需要通过el来绑定一个元素的。所以mian.js的主要作用就是绑定元素。并且把之前的App.vue总管理组件展示到页面上。
import App from './App.vue'
new Vue({
el:'#root',
template: `<App></App>`,
components:{
App
}
})
- 创建index.html
html中引入mian.js和vue.js。并且在该页面中准备好vue实例所需要的容器。之前的vue组件就都可以展示到界面上了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="root">
</div>
</body>
<script src="./js/vue.js"></script>
<script src="main.js"></script>
</html>
总结：以上便是大多脚手架都具备的主要文件和大体作用。当然只有这些文件也是不可以直接运行的，还需要很多配置文件在这里就不啰嗦了。主要是要搞明白vue组件的调用和vue实例的注册绑定容器等知识就比较容易理解了。
