[筆記] 使用NUXT.JS 建立SPA網站

idobest

前言:

由於武漢肺炎疫情在最近幾天內，突然升高，全台已經宣布高中以下停課 防疫等級也升為三級，讓很多人只能待在家裡，無所事事…

六角學院很佛心的開放部分的線上課程內容，免費觀看到 5/28 附圖:

圖1

這篇是wayne大大的 : vue/nuxt 開發初體驗 -使用 nuxt 快速打造現代SPA 網站 (影片長度:1小時48分57 網頁連結可能會在5/28後失效)

wayne的線上課程: NUXT.js 前端開發實戰手冊

以上就是，這次筆記內容的來源簡介，這次不會貼程式碼 只會記錄我在跟著教學影片的實作過程(copy & paste) 所碰到的坑與填坑的紀錄。

先說我在這個影片中獲得那些知識:

  1. 建立NEXT.JS SPA專案
  2. 套版:把網路上現成的網站樣板套入NEXT.JS專案裡
  3. 把NEXT.JS發佈到Github並做成網站(Github Pages)

至於要怎麼用SASS/CSS去美化網站，就不在影片教學的範圍內。 我目前也不會CSS切版…

接下來就是說明在實作上所碰到的坑:

一號坑:

首先是安裝 node-sass 與 sass-loader 預設版本太高 跟選用的網頁模板有衝突的坑!!! 教學影片長度不到兩小時，我解這個坑花超過兩個小時…

圖2

在完全沒有NUXT.JS 與SASS 的知識背景下 是靠console.log 噴出的錯誤當關鍵字，餵狗(google) 才找到解答 這次套版是用: HTML5 Template – Phantom 可用的 node-sass 與sass-loader 套件版本為:

npm install --save-dev [email protected]
npm install --save-dev [email protected]

有好幾次想退坑…改看其他的教學影片…最後還是把坑填了

二號坑:

在影片的最後面要把專案上傳到GitHub並使用GitHub Pages 這部分出現404 Not Found …到影片結束的時候，也沒有解決

解決方法: 多等幾秒…這部分應該是GitHub的問題，影片實作的程式是正確的，網頁沒有任何改動下，幾分鐘後就可以正常顯示了。 不是老師出的包 XD

以上就是本次筆記的內容

Reference: