在上節(jié)課我們用vue cli的create命令創(chuàng)建了一個項目，打開項目的文件夾我們發(fā)現(xiàn)里面有好多文件夾和文件搁拙，這節(jié)課我們就一一說明一下它們都是干什么用的。
1. .git
這個文件夾里存放了關于git的文件，我們不需要去修改里面的內(nèi)容催式，忽略就行了
2.node_modules
這個文件夾里存放了我們這個vue項目要用到的npm包，或者說依賴的包避归，包括一些開發(fā)工具啊荣月、框架啊、插件啊都會在這個文件夾里梳毙，這里面的內(nèi)容也不需要修改哺窄。
3.public
這個文件夾里現(xiàn)在有兩個文件，
index.html可以理解為作為項目的入口文件账锹，瀏覽器顯示我們的頁面就是從這個html文件開始
favicon.ico就是網(wǎng)站的小圖標
在開發(fā)過程中萌业，如果有不需要經(jīng)過打包的文件（圖片或者js文件），也可以放到這個文件夾里奸柬，然后在index.html里直接引用生年。
4.src
這個后面詳細說
5. .gitignore
這個文件的內(nèi)容就是要告訴git忽略哪些文件和文件夾，忽略的這些文件和文件夾就不會被git管理廓奕，舉一例子晶框，node_modules文件夾就是被忽略的
6.babel.config.js
這個文件內(nèi)容是babel的配置排抬，暫時不用處理
7.package.json
這個文件用來描述我們建的這個項目的一些信息，我們在本地啟動項目的命令（npm run serve）就是在這個文件夾定義的授段，其他的現(xiàn)在不用了解蹲蒲。
8.package-lock.json
這個文件用來鎖定我們項目引用的包的版本，不用修改侵贵。
9.README.md
這個文件相當于我們這個項目的文檔届搁，用來告訴別人我們這個項目都用什么，怎么用等等窍育。由于我們的項目是自己學習用的卡睦，所以這個文件也不用改。
說了這么多不用改的文件漱抓，下面介紹重點 src文件夾表锻，src就是source的縮寫，就是源碼乞娄，我們的代碼絕大部分都要寫在這個文件夾里
打開這個文件夾瞬逊，里面結構是這樣的
1.assets
在這個文件夾我們存放項目里用到的圖片、字體文件等等
2.components
我們知道vue是面向組件開發(fā)的仪或，comoponents這個文件夾里存放我們項目中用到的一些公共組件确镊，關于組件的部分我們后面再講。
3.App.vue
可以理解為App.vue是我們項目的根組件范删，就想html標簽是網(wǎng)頁的根元素一樣蕾域，其他組件都是直接或者間接放到App.vue里面的
4.main.js
看名字就知道它是所有js代碼的入口文件，我們項目的js代碼從這里開始執(zhí)行
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
里面就這么點代碼到旦，意思就是引入App.vue旨巷，用App.vue創(chuàng)建了一個vue實例，掛載到了id為app的元素上添忘，這樣App.vue里的內(nèi)容就可以顯示到頁面上了契沫。
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文件大致就是這樣一個結構娄周，以后寫多了就記住了涕侈。
這節(jié)課就到這里。
