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 不會(huì)擴(kuò)展增強(qiáng)該目錄下 Vue.js 組件,即這些組件不會(huì)像頁面組件那樣有 asyncData 方法的特性。

布局目錄

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

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

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

中間件目錄

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

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

頁面目錄

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

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

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

插件目錄

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

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

靜態(tài)文件目錄

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

舉個(gè)例子: /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)建一個(gè) index.js 文件可激活這些配置。

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

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

nuxt.config.js 文件

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

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

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

package.json 文件

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

該文件不能被重命名。

別名

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

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

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


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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)