Nuxt專案各級目錄功能一覽

nuxt-test├─nuxt。config。js├─package。json├─README。md├─store| └README。md├─static| ├─favicon。ico| └README。md├─server| └index。js├─plugins| ├─element-ui。js| └README。md├─pages| ├─index。vue| └README。md├─middleware| └README。md├─layouts| ├─default。vue| └README。md├─components| ├─Logo。vue| └README。md├─assets| └README。md

一、pages目錄

pages 用於構建Nuxt的路由及檢視。Nuxt。js 框架讀取該目錄下所有的 。vue 檔案並自動生成對應的路由配置。

可以透過檔案/資料夾名稱規則,生成動態路由、巢狀路由等

二、server目錄

server Nuxt服務端程式碼

三、layouts目錄

layouts 存放Nuxt的佈局元件,該目錄不能被重新命名。

如已有layouts/mine。vue佈局檔案,可以在pages/*。vue檔案下這樣使用對應佈局

export default { layout: ‘mine’}

四、components目錄

components元件資料夾

建議所有的元件都寫到這個目錄,雖然也可以寫到pages裡面目錄下,但是不利於後面生成站點地圖檔案sitemap。xml。

否則還需要特殊處理,因為站點地圖會根據路由自動生成,路由又是根據pages下所有檔案/資料夾自動生成的。

所有元件最好不要寫到pages目錄下。

五、assets/static目錄

assets和static都用於放置靜態資源,但是它們又有什麼區別呢?

assets 用於組織未編譯的靜態資源如 LESS、SASS 或 JavaScript

static 用於存放應用的靜態檔案,此類檔案不會被 Nuxt。js 呼叫 Webpack 進行構建編譯處理。 伺服器啟動的時候,該目錄下的檔案會對映至應用的根路徑 / 下。 舉個例子: /static/robots。txt 對映至 /robots。txt

在您的 vue 模板中, 如果你需要引入 assets 或者 static 目錄, 使用 ~/assets/your_image。png 和 ~/static/your_image。png方式。

六、store目錄

store 目錄用於Nuxt的 Vuex 狀態樹 檔案。 Nuxt。js 框架集成了 Vuex 狀態樹 的相關功能配置,在 store 目錄下建立一個 index。js 檔案可啟用這些配置。

七、middleware目錄

middleware 存放應用的中介軟體

八、plugins目錄

plugins 放置那些需要在 根vue。js應用 例項化之前需要執行的 Javascript 外掛

九、nuxt。config。js配置

進行全域性、打包等相關配置。

如 1、head,進行全域性的頁面頭部配置,可以配置title、meta、keywords等等

2、plugins,進行外掛配置

後面推出更詳盡的配置說明