[筆記] 使用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 node-sass@4.14.1
npm install --save-dev sass-loader@10.1.1

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

二號坑:

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

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

以上就是本次筆記的內容

Reference: