# Vue.js 環境架設 <hr> > [name=柯利韋] > [time=Thu, Dec 05, 2019] [TOC] ---  --- 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/) <hr /> https://www.google.com/intl/zh-TW/chrome/ ----  ----  ----  ----  ----  --- ## 安裝 Vue.js devtools ---- [下載連結](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) <hr /> https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd ----  ----  ----  ---- ## 安裝編輯器(Visual Studio Code) ---- [下載連結](https://code.visualstudio.com/) <hr /> https://code.visualstudio.com/ ----  ----  ----  ----  ----  ----  ----  ----  --- ### 其他編輯器 + [Sublime Text](https://www.sublimetext.com/) + [Atom](https://atom.io/) --- ## 設定 Visual Studio Code --- ### 安裝中文套件 ----  ---- 搜尋 `chinese`  ----  ----  --- ### 安裝 Vue.js 套件 ----  ---- 搜尋 `vue 2 snippets`  ----  --- ### 安裝 Preview on Web Server 套件 ----  ---- 搜尋 `preview on web server`  ----  --- ## 安裝 Node.js ---- [下載連結](https://nodejs.org/) <hr /> https://nodejs.org/ ----  ----  ----  ----  ----  ----  ----  ----  ----  ---- 開啟 `cmd`，輸入 `node -v` 跟 `npm -v` 如果沒有出現版本號，<big style="color:red">請舉手</big>  --- ## Git ---- 甚麼是 Git? > git 是一個分散式版本控制軟體 > [name=<a href="https://zh.wikipedia.org/wiki/Git">wiki</a>] ----  ---- 先來講個故事 在一個月黑風高的夜晚 小黑在寫計概作業 他的組員已經完成了各自的部分了 於是輪到他要來完成他的部分 但是他怕他把組員的 code 改壞 於是... ----  ---- 這時小黑的組員小白看不下去了 他跳出來說 我幫你記住你每次改了甚麼 要是改壞了 因為我記得你改了什麼，所以我可以幫你改回去 這位小白就是 git ----  ---- 這時候組員小灰就不開心了 啊都你們玩啊 你們改了甚麼我都不知道 這時老師就出來說 別吵啦，我幫全部的人記 這位老師就是 GitHub ----  ---- 這時老師就不開心了 老師每次要收作業時都還要再問大家 你們是哪個記錄要拿來交作業 所以他決定指派組長來幫他記哪個記錄是要交作業、哪個記錄是還正在寫的 這個組長就叫做 Git Flow ----  ---- ### 安裝 Git ---- [下載連結](https://git-scm.com/download) <hr /> https://git-scm.com/download ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  ---- ### Github 申請 ---- [Github 網址](https://github.com/) <hr /> https://github.com/ ---- 這邊就自己註冊囉~ 有問題的舉手 另外建議資工系的，username 寫學號 ---- ### 學習資源 + [Git 基礎](https://backlog.com/git-tutorial/tw/intro/intro1_1.html) + [Git 詳細解說](https://hackmd.io/@Bcd8AJScSHqGSpyrbRXrtw/rJyDZZGEM) + [Git Flow 簡介](https://gitbook.tw/chapters/gitflow/why-need-git-flow.html) --- ## 開始寫 code ---- [課程專案網址](https://github.com/niclin/vue-course) <hr /> https://github.com/niclin/vue-course ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  ----  --- ## 補充 --- ### Windows Terminal(Preview) ---- 搜尋 `store`  ---- 搜尋 `windows terminal`  ----  ----  ----  ----  ----  --- ### 網頁開發歷史 ---- 網頁的三大元素  ---- | HTML | CSS | javascript | |:--- |:---| :--- | | 超文本標記語言 | 層疊樣式表 | | | <span style="color:yellow">H</span>yper<span style="color:yellow">T</span>ext <span style="color:yellow">M</span>arkup <span style="color:yellow">L</span>anguage | <span style="color:yellow">C</span>ascading <span style="color:yellow">S</span>tyle <span style="color:yellow">S</span>heets | | | 網頁的結構 | 讓網頁看起來比較漂亮 | 讓網頁動起來 | ----  ---- 靜態網頁 vs 動態網頁 ---- AJAX <span style="color:yellow">A</span>synchronous <span style="color:yellow">J</span>avaScript <span style="color:yellow">a</span>nd <span style="color:yellow">X</span>ML 他可以 JavaScript 跟 server 要資料，並且更新頁面的資料 ---- jQuery 以 JavaScript 來編寫的函式庫 ---- DOM <span style="color:yellow">D</span>ocument <span style="color:yellow">O</span>bject <span style="color:yellow">M</span>odel ----  ---- Bootstrap > Build responsive, mobile-first projects on the web <hr> https://getbootstrap.com/ --- Q & A