Vue CLI是一個基于Vue.js進行快速開發(fā)的系統(tǒng)，它的目錄結構非常的清晰，每個目錄都有它自己的用處，下面我們詳細介紹一下Vue CLI項目目錄。

src目錄

這個是最重要的目錄，它是存放項目源代碼的地方。src目錄中包含了Vue文件、組件、JavaScript文件以及樣式表等。如果你是一個新手，那么你不需要了解這個目錄的結構，只需要知道src目錄中存放了我們的源代碼即可。在Vue CLI創(chuàng)建的項目中，我們通常會在src目錄中寫我們的代碼。

public目錄

public目錄存放了我們的公共文件，例如index.html文件、圖片以及通用的css文件。我們在這個目錄中創(chuàng)建的文件會原封不動地復制到最終生成的dist目錄中。

node_modules目錄

node_modules目錄存放了我們的依賴模塊，這些模塊是我們在開發(fā)過程中需要用到的各種包。在使用npm命令安裝它們之后，這些包會被下載到node_modules目錄中。在新建VueCLI項目時就會自動安裝這些依賴模塊。

dist目錄

dist目錄是我們最終生成的部署目錄。當你在項目中運行npm run build命令后，生成的生產級別代碼將被存放在這個目錄。

babel.config.js文件

babel.config.js文件用來配置Babel，Babel是一個編譯器，它可以將ES6及以上版本的JavaScript代碼轉換為可以在現(xiàn)有瀏覽器上運行的代碼。

package.json文件

package.json文件記錄了我們的項目信息，包括名稱、版本、作者、依賴以及相關配置等。

package-lock.json文件

package-lock.json文件存儲了我們項目依賴包之間的具體版本信息。

README.md文件

README.md文件包含了一些項目的說明文檔，通常用于簡要介紹項目背景、使用方法以及開發(fā)者信息等。

-- node_modules
|-- public
|   |-- favicon.ico
|   |-- index.html
|   |-- manifest.json
|   `-- robots.txt
|-- src
|   |-- assets
|   |   `-- logo.png
|   |-- components
|   |   |-- HelloWorld.vue
|   |   `-- ...
|   |-- App.vue
|   `-- main.js
|-- babel.config.js
|-- package.json
|-- package-lock.json
`-- README.md