開發環境
- xampp
Server 環境 (apache + php)
Google 查一下就可以找到安裝，很簡單 - Visual Studio Code
一樣 Google 查一下
範例：
初學者，一定要每一行都自己打過，這是成為高手的關鍵能力，好處有
- 熟悉度
- 打錯時，累積除錯的經驗，培養強大推理能力的好機會
重點
- 1.
- 2.產 html 結構在 VS 中，key 「! + TAB」 就會自動產生
- 3.show 出 Hello World純手工 key-in Vue code，連註解也要照著 key 喔咦？怎麼和期待的不一樣 ...
- 練習除錯囉
- 4.開啟開發者工具 (F12 @chrome)以 Chrome 為例，按 F12 就可以開啟。ps.其他瀏覽器也差不多目前主流的瀏覽器，除了 Firefox，其他都用同樣的核心了。
- 5.切換到 console，看到什麼錯誤？Vue is not found代表沒有正確執行 const app = Vue.createApp( ... )為什麼呢？當然就是這段 js 沒有被正確執行 (哈哈，唯一的 js)<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- 6.切換到 network，reload 觀察網路下載的情況果然如所料 ~load vue.js 失敗
- 7.檢查有打錯字嗎？會不會是 src 寫錯了？寫程式，保守一點總是好的，不要這麼有信心，這還蠻常發生的
- 8.將 src 網址貼到 chrome 確認每一個點都確認，這是除錯的基本工！double check 一下，將 src 網址貼到 chrome 試試看。原來，這個網路上的 js 檔案根本就抓不到。
- 9.換個 src 來源試試看查一下 Google，貼另一個來源一樣失敗 ...(事後發現，居然右貼到另一個不存在的網址)怎麼可能？開始懷疑是不是哪裡弄錯了再仔細一行一行的檢查，沒錯呀。
- 10.到底是什麼問題？就問 AI 呀就照著 AI 的指引，有耐心的一步一步排除錯誤囉--perplexity.ai是我最常問的，結果和正確率往往比 ChatGPT 高出許多怎麼可能？之前幫我女兒問 7-11 刮刮樂最大獎 「10 兩黃金值多少錢？」perplexity 最厲害，10 次有 8 次答對openAI 很慘，8 次都是錯的馬斯克的 grok，最喜歡胡亂推理一番 ...Google 呢？最近比較少用了
- 11.刪除瀏覽資料 (快取 Cache)自己亂 try 一通還是失敗，就只好乖乖的按照 AI 的建議，一步一步的排除囉
結果 ... 還是沒用！寫程式就這樣，一個簡單的問題常常卡很久，但這就是經驗累積的過程呀，卡的越多，就會越有經驗。但前提是要做到 ~ 經一事，長一智只可惜大部分人都做不到 ...技巧只有一個，就是打破砂鍋問到底，一直問「為什麼」，挖出隱藏在冰山下面真正的原因這就是「5 Why 追問法」！
- 12.使出大殺技 ~ 問「人」 (專家)雖然同事 / 朋友人都很好但問之前，一定要自己先做足功課唷準備好資料，想清楚再問不然就會打斷別人的工作，或是浪費別人的時間。換個角度思考，如果你不想花時間，那別人為什麼要為了你的問題多花很多時間呢？完全沒道理是吧！
- 13.經驗很重要問了專家以後，終於恍然大悟。同事說：unpkg 的 cdn 很常掛掉unpkg 大概快十年了，大家的 demo 都喜歡用這家，結果變成這家在最近幾年老是被攻擊原來書上寫的，網路上查到的，居然都是不 work ...果然是人云亦云的最佳案例。
- 14.YA！解決了！src 改用另外一個，就順利 show 出「Hello World !」了<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.global.min.js"></script>
- 15.總結一回生二回熟，從錯誤中慢慢累積經驗，這就是學習的過程。可是這要很久耶~沒辦法，有些事情就快不來，就是需要時間！想超捷徑，很可能就會落入「揠苗助長」，隔天就死給你看。
有沒有辦法加速呢？
當然有！只要落實幾個原則，就可以用 10 倍速的方式高速學習喔 ~學會之後，要如何讓工作時間花更少、事情做更好呢？原則一樣很簡單！- 一項一項的仔細確認
- 確認的過程中思考「合理嗎？」
- 有問題就問
- 一切以記錄為主
更完整的說明，可以參考：
評語
請登入後才可以評分