nuxt 簡單介紹

背景

因爲面試總被問到關於ssr的問題，因而本身想搞一套服務端渲染。後來發現直接手動配置會有不少坑，與前端的朋友交流，給我推薦了nuxt，下面將研究的初步瞭解記錄下來。

簡介

Nuxt是基於Vue的一個應用框架，採用服務端渲染，使你的SPA應用(Vue)也能夠擁有SEO。

實踐

1. 建立項目

$ npm install -g vue-cli

$ vue init nuxt/starter <project-name>
$ cd <project-name>
$ npm install

$ npm run dev

2. 項目目錄
|-- assets // 用於組織未編譯的靜態資源如LESS、SASS或JavaScript
|-- components // 用於本身編寫的Vue組件，好比波動組件、日曆組件、分頁組件
|-- layouts // 佈局目錄，用於組織應用的佈局組件，不可更改
|-- middleware // 用於存放中間件
|-- pages // 用於存放寫的頁面，咱們主要的工做區域
|-- plugins // 用於存放JavaScript插件的地方
|-- static // 用於存放靜態資源文件，好比圖片
|-- store // 用於組織應用的Vuex 狀態管理
|-- .editorconfig // 開發工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用於檢查代碼格式
|-- .gitignore // 配置git不上傳的文件
|-- nuxt.config.json // 用於組織Nuxt.js應用的個性化配置，已覆蓋默認配置
|-- package-lock.json // npm自動生成，用於幫助package的統一設置的，yarn也有相同的操做
|-- package.json // npm 包管理配置文件

原理

Nuxt.js 經過一系列構建於 Vue.js 之上的方法進行服務端渲染，具體流程以下:

調用 nuxtServerInit 方法

當請求打入時，最早調用的便是 nuxtServerInit 方法，能夠經過這個方法預先將服務器的數據保存，如已登陸的用戶信息等。另外，這個方法中也能夠執行異步操做，並等待數據解析後返回。

Middleware 層

通過第一步後，請求會進入 Middleware 層，在該層中有三步操做：

讀取 nuxt.config.js 中全局 middleware 字段的配置，並調用相應的中間件方法 匹配並加載與請求相對應的 layout 調用 layout 和 page 的中間件方法

調用 validate 方法

在這一步能夠對請求參數進行校驗，或是對第一步中服務器下發的數據進行校驗，若是校驗失敗，將拋出 404 頁面。

調用 fetch 及 asyncData 方法

這兩個方法都會在組件加載以前被調用，它們的職責各有不一樣， asyncData 用來異步的進行組件數據的初始化工做，而 fetch 方法偏重於異步獲取數據後修改 Vuex 中的狀態。