上一篇，在不知道 Nuxt 是什麼的情況下，使用create-nuxt-app建立了一個 Nuxt 應用。

今年 9/21 在倫敦舉辦的 Vue Conference，終於期待已久的 Nuxt.js 2.0 釋出了，twitter 連結。

學習連結分享

注意：以下推薦的課程教學為 Nuxt.js 1.x 版本，但個人認為還是直得推薦，有興趣的人可以看看。

Udemy Nuxt.js - Vue.js on Steroids 英文線上課程(有英文字幕)，
會推薦的原因是因為，我自己看完了受益良多，是 step by step，
並且只要按照影片的流程做一遍，對 nuxt 會有更深入的了解。
快去看看大大 Maximilian Schwarzmüller 的教學吧。

如果不想花錢買 Nuxt 教學課程，Academind 這個頻道也有免費版，可以先聽個大概，以下附上連結：

• Nuxt.js - Introduction by Project
• The Frontend | Nuxt.js & Storyblok - Building a Complete Blog

非常推薦 Maximilian Schwarzmüller 的 youtube 教學頻道 Academind

這個頻道提供非常多高質量免費的教學，很用心在經營，基本上我自己很多技術的學習，都是從這個頻道的影片開始，也可以順便練習英文能力。

簡介

Nuxt.js 是一個基於 Vue.js 的應用框架，也就是說沒有 Vue.js 就沒有 Nuxt.js。

Nuxt.js 可以讓你

1. 建立一個足夠彈性的新專案
2. 導入你現有的 Node.js 的專案當中

Nuxt.js 已經預設好一個 Vue.js 應用，並且提供舒適的開發流程與體驗，使開發者能方便處理 Server-Side Rendering(SSR) 及 SEO 相關問題。

像是前一篇就是透過 create-nuxt-app 來建立一個 nuxt 應用，真的非常方便。

Nuxt.js 提供三種部署方式(模式)

1. universal: 簡單理解為有 SSR
2. spa: 簡單理解為無 SSR
3. generate: 將應用產出為靜態 HTML 頁面，即可部署於 github-page 等。

本系列文章部署分享僅會用到 universal 和 generate。

Nuxt.js 依賴的框架/套件

• Vue 2
• Vue Router
• Vuex
• Vue Server Renderer (mode = 'spa' 除外)
• vue-meta

此外，Nuxt.js 2.0 使用 webpack 4、vue-loader、babel-loader 來處理程式碼的自動建置，當然這些設定是可以透過 nuxt.config.js 設定檔去客製化擴充以及調整的。
由於 nuxt.config.js 內容眾多，下一篇會在獨立介紹。

Nuxt.js 特性

• 以 *.vue 構成
• 代碼分層 (Code Splitting)
• 服務端渲染: 透過 vue-server-renderer
• 強大的路由功能，支持異步數據: 透過 vue-router 搭配目錄結構的設計，基本上可以不用再寫 router
• 靜態文件服務: 上一段提到的 nuxt generate 指令
• ES6/ES7 語法支持: 透過 babel
• 打包和壓縮 JS 和 CSS: 透過 webpack，之後章節會分享效能優化的經驗
• HTML 頭部標籤管理: 透過 nuxt.config.js 和 vue-meta
• 本地開發支持熱加載(hot reload)
• 集成 ESLint
• 支持各種樣式預處理器: 本系列文章將使用 Stylus
• HTTP/2 push headers ready
• 使用模塊化 modules 的方案擴充 Nuxt 應用： nuxt-community/modules 提供許多大神們寫好的擴充套件，例如: vuetify、markdownit、gtm、firebase等等，已經幫我們處理完整合的部分，只需無腦安裝就可以使用。

當然也會遇到擴充套件無法滿足需求的時候，此時也可以自己寫，之後會有範例。

Nuxt.js 流程圖

下圖是一個 Nuxt 應用的完整流程，從服務器請求到渲染 (或使用者通過 <nuxt-link> 切換路由渲染頁面）的流程：

圖片擷取自 nuxt introduction schema

推薦延伸閱讀： Universal application code structure in Nuxt.js

文中將 Nuxt.js Lifecycle Hooks 整理的非常清楚。

目錄結構

Vue.js 的生態系統中一大優點就是文件清楚完整，且提供多國語系，
當然 Nuxt.js 也不例外。
與其看我介紹 Nuxt 目錄結構，不如直接去直接閱讀官網目錄結構的文件 Directory Structure

請看：

7 Frontend Architecture Lessons From Nuxt.js

看完真的會對 Nuxt 目錄結構有較完整的了解。