Vue.js 環境架設

柯利韋
Thu, Dec 05, 2019

• Vue.js 環境架設
  • 安裝 Chrome
  • 安裝 Vue.js devtools
  • 安裝編輯器(Visual Studio Code)
    • 其他編輯器
  • 設定 Visual Studio Code
    • 安裝中文套件
    • 安裝 Vue.js 套件
    • 安裝 Preview on Web Server 套件
  • 安裝 Node.js
  • Git
    • 安裝 Git
    • Github 申請
    • 學習資源
  • 開始寫 code
  • 補充
    • Windows Terminal(Preview)
    • 網頁開發歷史

https://www.surveycake.com/s/WNQg0

note:https://colab.research.google.com/drive/1Pr37eLru3I_ZykwxfU3haHRLp4fKWE0w

https://hackmd.io/@k139/vuejs

安裝 Chrome

下載連結

https://www.google.com/intl/zh-TW/chrome/

安裝 Vue.js devtools

下載連結

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

安裝編輯器(Visual Studio Code)

下載連結

https://code.visualstudio.com/

其他編輯器

• Sublime Text
• Atom

設定 Visual Studio Code

安裝中文套件

搜尋 chinese

安裝 Vue.js 套件

搜尋 vue 2 snippets

安裝 Preview on Web Server 套件

搜尋 preview on web server

安裝 Node.js

下載連結

https://nodejs.org/

開啟 cmd，輸入 node -v 跟 npm -v

如果沒有出現版本號，請舉手

Git

甚麼是 Git?

git 是一個分散式版本控制軟體
<a href="https://zh.wikipedia.org/wiki/Git">wiki</a>

先來講個故事

在一個月黑風高的夜晚

小黑在寫計概作業

他的組員已經完成了各自的部分了

於是輪到他要來完成他的部分

但是他怕他把組員的 code 改壞

於是…

這時小黑的組員小白看不下去了

他跳出來說

我幫你記住你每次改了甚麼

要是改壞了

因為我記得你改了什麼，所以我可以幫你改回去

這位小白就是 git

這時候組員小灰就不開心了

啊都你們玩啊

你們改了甚麼我都不知道

這時老師就出來說

別吵啦，我幫全部的人記

這位老師就是 GitHub

這時老師就不開心了

老師每次要收作業時都還要再問大家

你們是哪個記錄要拿來交作業

所以他決定指派組長來幫他記哪個記錄是要交作業、哪個記錄是還正在寫的

這個組長就叫做 Git Flow

安裝 Git

下載連結

https://git-scm.com/download

Github 申請

Github 網址

https://github.com/

這邊就自己註冊囉~

有問題的舉手

另外建議資工系的，username 寫學號

學習資源

• Git 基礎
• Git 詳細解說
• Git Flow 簡介

開始寫 code

課程專案網址

https://github.com/niclin/vue-course

補充

Windows Terminal(Preview)

搜尋 store

搜尋 windows terminal

網頁開發歷史

網頁的三大元素

靜態網頁 vs 動態網頁

AJAX

Asynchronous JavaScript and XML

他可以 JavaScript 跟 server 要資料，並且更新頁面的資料

jQuery

以 JavaScript 來編寫的函式庫

DOM

Document Object Model

Bootstrap

Build responsive, mobile-first projects on the web

https://getbootstrap.com/

Q & A