萬事開頭難,一個好的Hello World程式可以節省我們好多的學習時間,幫助我們快速入門。Hello World程式之所以是入門必讀必會,就是因為其代碼量少,簡單易懂。但我覺得,還應該做到功能豐富,涉及的知識點多。這樣才是一個好的初學者入門指引程式。 之所以選擇Vue,不僅因為其流行,還因為其輕量 ...
萬事開頭難,一個好的Hello World程式可以節省我們好多的學習時間,幫助我們快速入門。Hello World程式之所以是入門必讀必會,就是因為其代碼量少,簡單易懂。但我覺得,還應該做到功能豐富,涉及的知識點多。這樣才是一個好的初學者入門指引程式。
之所以選擇Vue,不僅因為其流行,還因為其輕量化。用過Angular的同學都深有體會,一個簡單的Hello World編譯後都好幾百K,複雜點的將近1M,還是-prod編譯。而Vue只有70k左右,載入速度占絕對優勢。一個好的Vue前端框架,應該使用TypeScript編寫,TS與JS高度相容,配合VSCode使用很爽的,代碼智能提醒,提高編碼速度。而且類型化的編程風格,很適合習慣Java和C#的程式員快速適應Web前端開發。還可以使用await/async語法,避免JS的回調地獄式寫法。在這個Hello World里會有簡單的代碼演示,你會一下子喜歡上TS語言。WebPack已經成為前端編譯打包的標配,可以做到分離公共代碼和應用程式代碼,充分利用緩存;可以分模塊編譯打包,方便按需載入和代碼拆分。
此入門程式涉及的知識點:
- 30行代碼實現的簡單的路由。為了加入路由功能,而引入過大的包得不償失。
- TS代碼和模版分開,ts代碼寫在單獨的文件里。使用類型化的編碼方式
- 使用await/async編寫非同步代碼,避免回調嵌套,代碼清晰可讀性強。如login方法
- 充分利用webpack的代碼分離功能,按需載入,避免生成過大的模塊,影響載入速度
- 利用webpack的代理功能,解決調用遠程介面的跨域問題,方便本地調試代碼