[ Nuxt.js 2.x 系列文章 ] Nuxt.js 專案架設

｜ 版本：nuxt 2.15.8

說到 Nuxt，必須先從 Vue.js 說起，Vue.js 為專注在視圖層(View) 的 JS 框架，為 SPA（Single Page Application）應用程式，簡而言之整個網站應用只有單一頁面，一但頁面被加載進來後，就不會再進行該頁面請求，由於 Vue 是利用 JS 載入資料，並動態產生元件，SEO 只能抓取到 HTML 內容，因此 SEO 表現趨近於零。

而 Nuxt 是基於 Vue.js、Node.js、Webpack 以及 Badel.js 的輕量框架，可以同時創建 SSR（Server Side Render）及 SPA，在頁面載入前即渲染（伺服器回傳完整 HTML 檔，每次跳轉頁面，瀏覽器都需要刷新），搜尋引擎爬蟲可以取得資料，大幅解決 SEO 的問題。

以下圖片說明：

接下來一起來嘗試創建一個 Nuxt 專案吧！

如同 Vue CLI，Nuxt 也有類似的指令列(command-line)工具 create-nuxt-app，

依據官方文件提供的專案包建置方式：

npx create-nuxt-app <project-name>

使用 npx 安裝，安裝的套件在執行完後就會被移除 npx介紹

接著會跑出一些選項：

• Project name：設定專案名稱
• Programming language：選擇程式語言
• Package manager：軟體套件管理系統 npm / yarn
• UI framework：css 模板
• Template engine：樣版引擎
• Nuxt.js modules：相依套件
• Linting tools：程式碼檢查工具
• Testing framework：測試工具
• Rendering mode：渲染模式
• Deployment target：運行模式 （在此示範 Server Side Render)
• Development tools：開發工具
• Version control system：版控工具

以上選擇完畢就開始安裝專案包

運行完成就可以開始編譯專案

跟著提示訊息執行：

cd test
npm run dev

在 package.json 內可以看到相關指令

"scripts": {
   "dev": "nuxt",
   "build": "nuxt build",
   "start": "nuxt start",
   "generate": "nuxt generate"
}

接下來就可以看到畫面囉 🫶

參考文章：

https://medium.com/web-design-zone/建立nuxt-js專案初體驗-21920735e38b

https://levelup.gitconnected.com/spa-ssg-ssr-and-jamstack-a-front-end-acronyms-guide-6add9543f24d