1.4.3　Vue框架的內(nèi)容結構

前面學習了如何安裝Vue，通過Vue CLI或Vite都可以自動化生成一個基礎的項目。下面通過Vue CLI創(chuàng)建的默認項目一起來了解一下Vue的項目結構（使用Vite創(chuàng)建的項目結構與Vue CLI創(chuàng)建的結構類似，不再贅述）。

首先，筆者使用Vue CLI創(chuàng)建了一個叫demo1的、包含babel和eslint的默認配置的工程作為示例，創(chuàng)建好的默認預設項目內(nèi)容結構如圖1.11所示。

其中：

●　README.md文件是項目的說明文件，可根據(jù)需要進行編輯。

●　package.json記錄了項目的信息，包含名稱（name）、版本（version）等，是npm和yarn存儲所有已安裝軟件包的名稱和版本的地方（dependencies生產(chǎn)依賴、devDependencies開發(fā)依賴），開發(fā)時允許通過npm或yarn等工具的命令行運行的腳本（scripts，可通過運行npm run serve啟動服務器）和一些其他配置，如圖1.12所示，Vue CLI創(chuàng)建的默認項目中還包含eslint的配置信息（eslintConfig，該配置在項目根目錄下不存在其他eslint配置文件的情況下會被eslint解析來做JavaScript代碼風格檢測和自動化格式等）和目標瀏覽器及其版本的信息（browserslist，該字段會被用來確定需要轉譯的JavaScript特性和需要添加的CSS瀏覽器前綴）。

●　pakage-lock.json文件跟蹤pakage.json文件內(nèi)被安裝的每個軟件包的確切版本，以便其他人可以用相同的版本安裝依賴。

●　babel.config.js文件是babel的編譯配置文件，指定babel將代碼轉譯的JavaScript特性，其內(nèi)容如圖1.13所示（定義使用一個預設，后續(xù)Element的按需加載也會修改此文件，這里不詳述）。

●　.gitignore文件是在提交git時要忽略的文件，通過git status命令不會顯示出變化，例如Vue CLI創(chuàng)建的默認項目忽略了node_modules、dist和本地環(huán)境文件、日志文件和編輯器相關文件的變更（見圖1.14）。這些文件不影響項目功能或者很容易通過其他方式生成，又或者是開發(fā)者的個人開發(fā)習慣配置等，忽略它們可以保持項目的結構整潔。

●　node_modules文件夾存放的是通過npm install安裝的所有項目依賴。

●　public文件夾存放的是一些公用文件，比如圖1.11的public文件夾中有兩個文件，一個是圖標，另一個是通用的index頁面。

●　src文件夾是工作中經(jīng)常用到的目錄，其中assets目錄存放的是一些靜態(tài)資源（如css、image）。

●　components文件夾用于存放通用的組件，項目創(chuàng)建初默認會有一個HelloWorld組件，其實就是項目初始化時Home這一頁的內(nèi)容，在之后的開發(fā)中經(jīng)常會用到這個目錄。

●　App.vue文件是Vue頁面資源的首加載項，項目的主要組件，可以當作網(wǎng)站首頁，所有頁面都是在App.vue下進行切換的，是整個項目的關鍵。它主要包含3部分（見圖1.15）：

?　模板（template）部分，頁面的布局結構都寫在這里。

?　腳本（script）部分，頁面的處理腳本都寫在這里。

?　樣式（style）表，頁面的樣式內(nèi)容都寫在這里。

●　main.js文件是項目的入口文件，項目中所有的頁面都會加載這個文件，所以這個文件處理著所有頁面的公共邏輯，所有項目中的全局依賴都應該在這個文件中引入或注冊。用Vue CLI創(chuàng)建的默認項目中的main.js內(nèi)容如圖1.16所示。

可以看到在main.js中引入了項目的主要組件App.vue，然后通過Vue的createApp方法創(chuàng)建了Vue實例，并通過mount方法將實例掛載到id為app的節(jié)點上。在默認項目中，這個main.js只有3行代碼，還是非常簡單的，后續(xù)項目中用到的element、router、store和其他自定義的全局文件和操作都會陸續(xù)寫入這個文件，將在后續(xù)章節(jié)逐步說明。