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

廣告
Nuxt.js 目錄結構

評論

廣告
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×