前言:
由於武漢肺炎疫情在最近幾天內,突然升高,全台已經宣布高中以下停課
防疫等級也升為三級,讓很多人只能待在家裡,無所事事...
六角學院很佛心的開放部分的線上課程內容,免費觀看到 5/28
附圖:
這篇是wayne大大的 :
vue/nuxt 開發初體驗 -使用 nuxt 快速打造現代SPA 網站
(影片長度:1小時48分57 網頁連結可能會在5/28後失效)
wayne的線上課程: NUXT.js 前端開發實戰手冊
以上就是,這次筆記內容的來源簡介,這次不會貼程式碼
只會記錄我在跟著教學影片的實作過程(copy & paste)
所碰到的坑與填坑的紀錄。
先說我在這個影片中獲得那些知識:
- 建立NEXT.JS SPA專案
- 套版:把網路上現成的網站樣板套入NEXT.JS專案裡
- 把NEXT.JS發佈到Github並做成網站(Github Pages)
至於要怎麼用SASS/CSS去美化網站,就不在影片教學的範圍內。
我目前也不會CSS切版...
接下來就是說明在實作上所碰到的坑:
一號坑:
首先是安裝 node-sass 與 sass-loader 預設版本太高
跟選用的網頁模板有衝突的坑!!!
教學影片長度不到兩小時,我解這個坑花超過兩個小時...
在完全沒有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
以上就是本次筆記的內容