Nuxt.js 目錄結(jié)構(gòu)

2020-02-13 17:07 更新
Nuxt.js 的默認(rèn)應(yīng)用目錄架構(gòu)提供了良好的代碼分層結(jié)構(gòu),適用于開發(fā)或大或小的應(yīng)用。 當(dāng)然,你也可以根據(jù)自己的偏好組織應(yīng)用代碼。

目錄


資源目錄

資源目錄 assets 用于組織未編譯的靜態(tài)資源如 LESS、SASS 或 JavaScript。

關(guān)于 assets 目錄的更多信息

組件目錄

組件目錄 components 用于組織應(yīng)用的 Vue.js 組件。Nuxt.js 不會擴展增強該目錄下 Vue.js 組件,即這些組件不會像頁面組件那樣有 asyncData 方法的特性。

布局目錄

布局目錄 layouts 用于組織應(yīng)用的布局組件。

若無額外配置,該目錄不能被重命名。

關(guān)于布局的更多信息

中間件目錄

middleware 目錄用于存放應(yīng)用的中間件。

關(guān)于中間件的更多信息

頁面目錄

頁面目錄 pages 用于組織應(yīng)用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的 .vue 文件并自動生成對應(yīng)的路由配置。

若無額外配置,該目錄不能被重命名。

關(guān)于頁面的更多信息

插件目錄

插件目錄 plugins 用于組織那些需要在 根vue.js應(yīng)用 實例化之前需要運行的 Javascript 插件。

關(guān)于插件的更多信息

靜態(tài)文件目錄

靜態(tài)文件目錄 static 用于存放應(yīng)用的靜態(tài)文件,此類文件不會被 Nuxt.js 調(diào)用 Webpack 進(jìn)行構(gòu)建編譯處理。 服務(wù)器啟動的時候,該目錄下的文件會映射至應(yīng)用的根路徑 / 下。

舉個例子: /static/robots.txt 映射至 /robots.txt

若無額外配置,該目錄不能被重命名。

關(guān)于靜態(tài)文件的更多信息

Store 目錄

store 目錄用于組織應(yīng)用的 Vuex 狀態(tài)樹 文件。 Nuxt.js 框架集成了 Vuex 狀態(tài)樹 的相關(guān)功能配置,在 store 目錄下創(chuàng)建一個 index.js 文件可激活這些配置。

若無額外配置,該目錄不能被重命名。

關(guān)于 store 的更多信息

nuxt.config.js 文件

nuxt.config.js 文件用于組織Nuxt.js 應(yīng)用的個性化配置,以便覆蓋默認(rèn)配置。

若無額外配置,該文件不能被重命名。

關(guān)于 nuxt.config.js 的更多信息

package.json 文件

package.json 文件用于描述應(yīng)用的依賴關(guān)系和對外暴露的腳本接口。

該文件不能被重命名。

別名

別名目錄
~ 或 @srcDir
~~ 或 @@rootDir

默認(rèn)情況下,srcDir 和 rootDir 相同。

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


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號