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,進行外掛配置
後面推出更詳盡的配置說明