Nuxt.js 2.x 實戰寶典(1) - Nuxt.js 與準備

前言

Nuxt.js 是一個基於 Vue.js + Node.js 與 Webpack 所製作的框架,剛好自己之前有一些開發 Nuxt.js 的經驗所以乾脆寫一篇系列當作紀錄。

認識 Nuxt.js

首先先聊一下為什麼要用 Nuxt.js 以及什麼是 Nuxt.js 的部分,在開始之前我會建議你閱讀一下我先前寫的這一篇「淺談 SPA、CSR、SSR、MPA、SSG 專有名詞」,至少你要先知道什麼是 SPA 與 SSR,否則…你可能會碰壁。

那麼回歸正題。

我們都知道使用 JavaScript 框架所開發的網頁都會有一些共通的問題,也就是 SEO 的問題,因為爬蟲在爬你的網站時,其實都會是空的元素:

1
<div id="app"></div>

而我們畫面上的內容都是透過 JavaScript 動態寫入的,你可以想像成滿滿的 innerHTML 語法,因此爬蟲在讀取網頁時就無法取得內容,那在這種狀況下雖然 SPA 解決的使用者體驗的問題,但卻也導致了 SEO 搜尋問題,而 Nuxt.js 就是解決這個問題而產生。

那麼我也不想講太多理論性的東西,反正你知道 Nuxt.js 想解決什麼問題就對了,所以直接準備進入實作吧。

新增 Nuxt.js 專案

Nuxt.js 建立專案的方式有三種,分別是 Yarn、NPX 與 npm

1
2
3
4
5
yarn create nuxt-app <project-name>

npx create-nuxt-app <project-name>

npm init nuxt-app <project-name>

你可以依據自已習慣挑選一個指令來建立 Nuxt.js 我的習慣會是使用 npx 的方式,反正可以達到目的就好了

1
npx create-nuxt-app nuxtExample

當你在終端機輸入上面指令之後,就必須依據調整相關設定,而這邊我也提供本次範例我的設定方式給予參考

  • ? Project name: nuxtExample
  • ? Programming language: JavaScript
  • ? Package manager: Npm
  • ? UI framework: None
  • ? Nuxt.js modules: Axios - Promise based HTTP client
  • ? Linting tools: ESLint
  • ? Testing framework: None
  • ? Rendering mode: Universal (SSR / SSG)
  • ? Deployment target: Server (Node.js hosting)
  • ? Development tools: Dependabot (For auto-updating dependencies, GitHub only)
  • ? Continuous integration: GitHub Actions (GitHub only)
  • ? What is your GitHub username? Ray
  • ? Version control system: Git

基本上這個系列主要是以 SSR 為主,當然就選 SSR 囉~

我這邊基本上範例會是 2.15.7,如果你想要指定特定版本生成的話,例如 2.8.1,就使用以下指令即可

1
2
3
4
5
yarn create nuxt-app 2.8.1 <project-name>

npx create-nuxt-app 2.8.1 <project-name>

npm init nuxt-app 2.8.1 <project-name>

那麼當你建立好後就使用 VSCode 開啟該剛剛建立好的 Nuxt.js 專案唷。

Nuxt.js 架構前期準備

目前我所建立的版本是 2.15.7 的版本,所以架構會是如下:

架構

看起來好像很麻煩,但實際上你比較常用到的地方是只有以下這幾個

  • nuxt.config.js
  • pages
  • components
  • static
  • store

那麼在我這個 2.15.7 版本你必須額外建立兩個資料夾,分別是

  • layout
  • assets

因為後來 Nuxt.js 做了一些調整,但是為了後面所以要自己手動補一下資料夾,其他細節後面再講。

接下來還要做一點小調整,也就是到 nuxt.config.js 中將 components 改成 false,因為在 2.12~2.13 左右引入了自動 import 元件的功能,但是自動這種東西基本上很容易踩雷,所以會建議關閉不使用,當然你也可以 詳閱該連結 了解該功能的用處。

因此底下這張圖才會是基本的架構

架構

那個下一篇我們再來了解每一個 Nuxt.js 的資料夾架構是在幹嘛的。

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ