在上节课我们用vue cli的create命令创建了一个项目，打开项目的文件夹我们发现里面有好多文件夹和文件，这节课我们就一一说明一下它们都是干什么用的。
1. .git
这个文件夹里存放了关于git的文件，我们不需要去修改里面的内容，忽略就行了
2.node_modules
这个文件夹里存放了我们这个vue项目要用到的npm包，或者说依赖的包，包括一些开发工具啊、框架啊、插件啊都会在这个文件夹里，这里面的内容也不需要修改。
3.public
这个文件夹里现在有两个文件，
index.html可以理解为作为项目的入口文件，浏览器显示我们的页面就是从这个html文件开始
favicon.ico就是网站的小图标
在开发过程中，如果有不需要经过打包的文件（图片或者js文件），也可以放到这个文件夹里，然后在index.html里直接引用。
4.src
这个后面详细说
5. .gitignore
这个文件的内容就是要告诉git忽略哪些文件和文件夹，忽略的这些文件和文件夹就不会被git管理，举一例子，node_modules文件夹就是被忽略的
6.babel.config.js
这个文件内容是babel的配置，暂时不用处理
7.package.json
这个文件用来描述我们建的这个项目的一些信息，我们在本地启动项目的命令（npm run serve）就是在这个文件夹定义的，其他的现在不用了解。
8.package-lock.json
这个文件用来锁定我们项目引用的包的版本，不用修改。
9.README.md
这个文件相当于我们这个项目的文档，用来告诉别人我们这个项目都用什么，怎么用等等。由于我们的项目是自己学习用的，所以这个文件也不用改。
说了这么多不用改的文件，下面介绍重点 src文件夹，src就是source的缩写，就是源码，我们的代码绝大部分都要写在这个文件夹里
打开这个文件夹，里面结构是这样的
1.assets
在这个文件夹我们存放项目里用到的图片、字体文件等等
2.components
我们知道vue是面向组件开发的，comoponents这个文件夹里存放我们项目中用到的一些公共组件，关于组件的部分我们后面再讲。
3.App.vue
可以理解为App.vue是我们项目的根组件，就想html标签是网页的根元素一样，其他组件都是直接或者间接放到App.vue里面的
4.main.js
看名字就知道它是所有js代码的入口文件，我们项目的js代码从这里开始执行
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
里面就这么点代码，意思就是引入App.vue，用App.vue创建了一个vue实例，挂载到了id为app的元素上，这样App.vue里的内容就可以显示到页面上了。
vue项目的目录结构就是这样了，我们还没有说过.vue文件，顺便说一下吧
拿App.vue来举例
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
首先它是一个类似html的结构，在最外层有三个标签<template> <script> <style>
分别对应了html模板，js代码和css代码，很好理解
在js部分用export default导出了一个对象，之前我们代码里写的data、methods等都要放到这个对象里
export default {
data(){
return{
}
},
mounted(){
},
methods:{
}
}
.vue文件大致就是这样一个结构，以后写多了就记住了。
这节课就到这里。
