文組也能看得懂的網頁前端Vue  (一)工具篇

介紹開發Vue所需要工具


這是一篇關於Vue從頭開始寫的學習筆記,不太注重原理,也盡量不會提到一些技術名詞,注重如何可以簡單寫出一個可以動的Vue網頁,適合對前端完全陌生的但是想快速學會寫前端的人。

有空會慢慢往下寫,希望能寫成系列文。

(我的主要開發環境是用macOS,不過即使用windows操作上大致上還是一樣的)

這是我第一次寫教學的網誌,有什麼意見歡迎指教討論。


第一篇就先寫開發工具的部分

工具主要使用VSCode, npm, yarn, Chrome

 1. VSCode

VSCode 安裝很簡單,直接上微軟的網站抓就可以了

https://code.visualstudio.com/

請依據自己作業系統安裝對應版本

2. npm / yarn

這兩個工具如果不寫前端的話可能對這東西不熟悉,簡單來看就把它當作可以幫你安裝各種不同網頁所需功能的工具,安裝方法也很簡單

一樣去官網抓就好(https://nodejs.org/en/?source=post_page---------------------------

當然你想用brew, choco之類的安裝也是可以,裝完nodejs後就會獲得npm這個新的指令

在windows底下的命令提示字元或是macos底下的terminal輸入

npm -v

就會顯示出版本訊息,如果有顯示就表示安裝成功了

如果習慣用yarn的人

可以依照下列網址方法安裝

https://yarnpkg.com/lang/zh-hant/docs/install/

3. Chrome

這個應該就不用多作介紹了吧 ....


工具介紹就先到這裡,準備進入前端網頁的開發啦