初識vue ssr(nuxt.js) ---- 持續更新

安裝

// vue-cli 建立nuxt模板項目
$ vue init nuxt-community/starter-template <project-name>
// 安裝依賴項
$ cd <project-name>
$ npm install
// 編譯並啓動服務
$ npm run dev
// 打開 http://localhost:3000

目錄結構

• assets 須要編譯的資源文件，如 JavaScript、SASS、LESS 等。
• static 不須要編譯的靜態資源文件，如圖片資源。
• components 顧名思義，存放 *.vue 組件的地方。通常用來存放非頁面級別的組件，如 header、footer 等公共組件，該目錄下的組件具備常規 vue 組件的方法和特性，不會被 nuxt.js 擴展特性
• layouts 佈局目錄，設置佈局的地方，其中 <nuxt/> 標籤是咱們寫的頁面內容。可用做添加導航欄、底部欄等截面。
• middleware 中間件目錄，所謂中間件，就是在頁面與頁面跳轉中執行的函數方法。如頁面跳轉時驗證用戶信息操做。
• pages 用於存放頁面級別的組件。該目錄下的文件會轉換成相應的路由路徑供瀏覽器訪問。另外呢，該目錄下的 *.vue 頁面文件中 Nuxt.js 提供了一些特殊的方法用於處理服務器渲染中的事件。page路由、頁面
• plugins 插件目錄，像 mint-ui 這種第三方插件就放在這裏。插件
• store vuex 狀態管理器目錄，若是該目錄是空的， Nuxt.js 將不啓用 vuex。當咱們在該文件夾下建立 index.js 文件後便可使用 vuex 狀態管理器
• nuxt.config.js 該文件是 Nuxt.js 的惟一配置項，以前提過 Nuxt.js 將 Webpack 等一衆配置都封裝好了，因此若是須要特殊配置，只須要修改該文件來覆蓋默認配置便可 API

注意

1. header和footer放在layout目錄下的default裏面