iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
4

上一篇,在不知道 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 這個頻道也有免費版,可以先聽個大概,以下附上連結:

非常推薦 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 依賴的框架/套件

此外,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.jsvue-meta
  • 本地開發支持熱加載(hot reload)
  • 集成 ESLint
  • 支持各種樣式預處理器: 本系列文章將使用 Stylus
  • HTTP/2 push headers ready
  • 使用模塊化 modules 的方案擴充 Nuxt 應用: nuxt-community/modules 提供許多大神們寫好的擴充套件,例如: vuetifymarkdownitgtmfirebase等等,已經幫我們處理完整合的部分,只需無腦安裝就可以使用。

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

Nuxt.js 流程圖

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

圖片擷取自 nuxt introduction schema
003-01

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

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

目錄結構

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

003-02

請看:

7 Frontend Architecture Lessons From Nuxt.js

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


上一篇
#2: 三秒建立一個 Nuxt 應用
下一篇
#4: nuxt.config.js
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30

尚未有邦友留言

立即登入留言