「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战」。
上一篇简单的和大家介绍了关于vue-cli的安装和使用方式，本期我会说一下vue脚手架内部的内容，我们先观察使用脚手架创建的文件夹内部的情况做一个区分,node_modules也就是我们存放组件的位置了，src是我们项目代码的内容，最后是public是静态的文件入png图片和视频等等的东西，当然我们真正在公司完成需要的项目时候不可能只要这三个文件夹的，后面还好增加文件夹的，但是这三个是基础的文件夹所以还是要和大家讲解的。
脚手架文件结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
我们打开代码查看：app.vue就是全部组件的存放的位置，也就是我们代码的主文件。
下面就看看关于School.vue和Student.vue文件的内容；完成这两个组件的编辑后，就可以通过APP.vue文件引用，最后会通过vue的底层代码展示在我们的浏览器中，注意写好的组件一点要用export default将该组件导出，负责在APP.vue中的import就无法获取到我们想要使用的组件；
<template>
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data(){
return {
name:'张三',
sex:男
}
}
}
</script>
<template>
<div class="demo">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'VUE互联网大学',
address:'互联网'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script>
<style>
.demo{
background-color: red;
}
</style>
以上就是本篇的内容，希望对大家有所帮助。
