上節(jié)課我們已經(jīng)學習了怎么使用vue-cli搭建一個簡易的vue項目，這節(jié)課我們就來看看搭建出來的項目的目錄結(jié)構(gòu)以及vue文件的結(jié)構(gòu)，只有有全局的把握，才能更加系統(tǒng)的學習一項技能。廢話不多說，開整！

讓我們看看我們的文件夾里面都有什么。

項目目錄結(jié)構(gòu).png

里面有6個文件夾和巴拉巴拉多個文件，我們一個個來介紹：

——》第一個文件夾是build，這個文件其實現(xiàn)在是不用管的，因為這是項目打包后文件放置的目錄（我們用腳手架創(chuàng)建項目需要打包處理才能上線的哦，不同于直接編寫html文件）；

——》第二個文件夾是config，顧名思義，這是配置目錄，里面配置的是開發(fā)時候的一些參數(shù)設(shè)置，還記得上節(jié)我說的，如果項目沒有自動在瀏覽器中打開，需要在這里找某某文件，改寫某某參數(shù)嗎？

——》第三個文件夾是node_modules，這個有點點長，是node的模塊，這是啥東西呢？還記得安裝時候我們在命令行里面輸入npm install不咯？就是下載這部分的，這里面是項目依賴模塊，比如你在項目中需要用到時間組件，可以使用npm install --save vue-datetime-picker（有廣告嫌疑，請這個作者付一下廣告費）安裝對應(yīng)模塊，模塊的文件就在這個文件夾里面。

——》第四個文件夾是src，這個文件夾就厲害了，為什么呢，因為我們在開發(fā)時候基本就是在這個文件里面編寫代碼的，這個我后面會詳細介紹，這里就告訴你這是我們的源碼目錄。

——》第五個文件夾是static，翻譯中文就是靜止的意思，什么靜止了呢？不是什么列車癡漢巴拉巴拉的靜止（老司機都懂），是說這個文件夾放置的是靜態(tài)文件，比如圖片，字體之類的文件，都可以放置到這里，一般情況下，這里的文件在打包時候是不會修改的。

——》第六個文件夾是test，這是測試文件的文件夾，一般不用管，很少用到，甚至刪除都可以的。

文件夾都介紹完了，現(xiàn)在開始介紹那些文件了：

——》.***長這樣的文件，我們暫時忽略，因為他們都是一些配置文件，包括語法配置，git配置之類的，我們忽略它們即可。

——》index.html文件，一看就知道，這個肯定是啟動頁啦，也就是文件的入口頁面。

——》package.json文件又是什么呢？其實這個是項目的配置文件，還記得我們用npm加載了很多模塊之類的不？在這里就有記錄，包括這個項目使用了什么模塊，它屬于什么時候使用的。（插句題外話，如果項目需要轉(zhuǎn)移，或者發(fā)送給合作的團隊成員或者上傳到SVN之類的，一般情況下我們不會把node_modules文件夾一起打包過去，就算壓縮也不會，直接放棄這個文件夾，因為這個文件夾在開發(fā)適合會有很多文件，幾千個甚至上萬個，發(fā)送給別人是很麻煩的，時間超級長，你只需要把剩余的文件夾發(fā)給別人，然后別人啟動npm install就可以重新從網(wǎng)上根據(jù)package.json文件的配置下載好模塊了，這是實際開發(fā)基本會遇到的問題）

——》README.md文件，也就是最后要介紹的文件，這個是項目的介紹文件而已，其實我們根本就不用管。

好了最外層的目錄結(jié)構(gòu)就已經(jīng)介紹完了。

目錄結(jié)構(gòu)詳細版.png

里面都詳細的說了一下，敬請觀摩；

文件之類的都說了，現(xiàn)在要說的就是vue文件里面都有什么，也就是我們要寫什么樣的代碼，貼個HelloWorld.vue文件的圖，這個文件在src->components文件夾里面，去找找這個小伙子吧（因為在sublime里面我不知道這么長截屏，所以我壓縮了一下代碼，只是展示了我覺得有必要的，其實是這個臭不要臉的又在打廣告）

vue文件代碼結(jié)構(gòu).png

大致可以分為三個結(jié)構(gòu)，看得出來吧，三個標簽template、script、style，只是這個三個標簽有點點和以前的不一樣啊，就是這樣的，如果一樣那我們還學什么呢，讓我來介紹一下：

——》template標簽：放置的是我們編寫的標簽結(jié)構(gòu)，也就是我們寫的html；

——》script標簽里面，我們編寫的是我們的邏輯結(jié)構(gòu)，也就是我們寫的js相關(guān)，但又不只是js，還有其他的，基本邏輯設(shè)置都是在這里完成；

——》style標簽里面的是樣式，也就是我們的css咯，這里看到一個新的參數(shù)scoped，這是什么意思，其實別人已經(jīng)英語備注了，如果添加這個參數(shù)就說明這個樣式只在這個組件有用，如果不加的話，那就是全局都共享的哦，一般編寫的是reset樣式文件那就肯定是全局共享的，如果是單個組件的，我個人建議還是要加的，要不然其他地方出了問題你是很難找到問題的點的，不要坑自己哦，可愛的程序員們。

好了，這節(jié)教程暫時寫到這里，謝謝大家的觀看，期待與你們一起進步。

題外知識：

在npm安裝模塊時候，我們是需要分開發(fā)環(huán)境，生產(chǎn)環(huán)境的，一般我們加后綴參數(shù)來設(shè)置，具體如下：

npm install：會下載dependencies和devDependencies中的模塊；

npm install –save–dev：只需開發(fā)時依賴的模塊devDependencies （例如我們在開發(fā)適合要將es6語法轉(zhuǎn)成es5的，那就需要用到babel轉(zhuǎn)碼器，這個只在開發(fā)適合需要，生產(chǎn)已經(jīng)轉(zhuǎn)好了）；

npm install –save: 生產(chǎn)環(huán)境依賴的模塊dependencies ；

哪些模塊隸屬于哪里，直接查看package.json文件，里面有你需要的，你懂得。