接上篇《2.Vue環境搭建、運行第一個項目》
上一篇我們主要講解了Vue的環境的搭建，本篇我們主要來分析Vue項目的目錄結構。
一、Vue項目文件目錄詳情介紹
下面就是上一篇我們搭建的一個樣例工程的完整結構（install後）：
其中包括了node_modules、build、config、src、static以及test文件夾，還有index.html的超文本文件，和package.json以及package-lock.json的json文本文件，還有一個markdown的文本文件。
我們一一來講解各個文件夾以及文件的作用。
1、node_modules
與其說node_modules是一個文件夾，不如說它是一個資源庫，即我們在對工程進行install的時候，會從npm的資源庫中下載我們Vue工程所需要的所有依賴。我們可以打開看一下：
下面還有好多依賴，這裏就不一一展示了。
我們隨便打開一個依賴資源，可以看到裏面其實也是一個小的前端工程：
這些各種小的前端工程，爲我們提供了Vue工程所需要了所有依賴標籤、樣式、公共方法等，可以理解爲Java工程依賴的各種jar包。
2、build
build文件夾如同它的名字一樣，裏面放置了用來進行項目構建(webpack)的相關代碼。
3、config
用來存放項目的一些基本配置信息，如配置靜態資源目錄，包括訪問的域名和端口號等：
4、src
src就是用來放置我們項目開發的相關代碼，這裏已經默認爲我們新建好了一些文件夾：
其中，assets爲靜態資源目錄，其中放置的是一些圖片等靜態資源，這裏的資源會被wabpack構建。
而components是公共組件目錄，這裏存放的就是我們編寫的一些vue公共組件。
routes是前端路由文件夾，裏面放置的是路由配置，即什麼樣的服務請求，應該路由到哪個相關的組件文件上去，如我們工程目前的默認請求路由：
app.vue文件是根組件，其中存放的是項目訪問的默認根節點，可以理解爲首頁加載的Vue資源。
main.js是整個項目工程的入口文件，在此加載相關的路由以及Vue組件：
另外，如果我們要開發新的組件（不是components這種公共組件），則需要在src下創建新的文件夾，文件夾的名稱就是組件的名稱，裏面放置的就是自己開發的組件的vue文件。
5、static
與src下的assets作用相同，是用來放置靜態資源的文件夾，但這裏的資源不會被wabpack構建。
6、test
這裏顧名思義放置的是測試文件。我們可以在unit文件夾下進行單元測試：
7、index.html
該文件就是項目的入口頁面文件，可以看到裏面加載了id爲app的模板組件：
8、package.json
package.json中放置的是運行npm install指令的時候，向npm獲取依賴的請求信息，其中包括了該工程需要加載的相關組件：
這些組件被下載下來後，就保存在了上面我們的node_modules中。可以將該文件理解爲Java工程的maven的pom.xml配置文件，用於配置需要加載的相關依賴jar信息。
9、package-lock.json
package-lock.json 是在執行 `npm install`命令的時候生成一份文件，用以記錄當前狀態下實際安裝的各個npm package的具體來源和版本號。這是爲了解決依賴版本的問題，比如我們看一下目前工程的package.json文件：
我們可以看到，有一些依賴的版本不是固定的，而是一種大於某個版本的表達式，這就大致我們每次進行npm install的時候，都是拉取的該大版本下的最新的版本。如果我們將代碼移植髮到一個新的機器上，或者新的下載源上，有可能會下載更新版本的依賴。而一般爲了穩定性考慮，我們幾乎是不敢隨意升級依賴包的，這將導致多出來很多測試/適配的工作量。
而package-lock.json文件就是解決這個問題的，當你每次安裝一個依賴的時候就鎖定在你安裝的這個版本，下次再安裝的時候，就會按照這個package-lock.json所標示的具體版本下載依賴庫包，就能確保所有庫包與你上次安裝的完全一樣。
10、readme.md
這個就很簡單的，它是項目的說明文檔，爲markdown 格式。一般我們在git上創建新的項目的時候，都會默認讓大家生成一個readme.md文件，用來描述項目的基本信息。
二、目錄結構總結
下圖爲上面的目錄結構的一個整體描述：
這裏我們使用的是Vue的2.6.11版本，當然根據Vue的版本不同，我們的目錄結構可能會有所變化。
參考：
https://www.cnblogs.com/dragonir/p/8711761.html
https://www.cnblogs.com/cangqinglang/p/8336754.html
《IT營：itying.com-2018年Vue2.x 5小時入門視頻教程》
轉載請註明出處：https://blog.csdn.net/acmman/article/details/107137190