---
title: 'VueJS 2.0 教學筆記: 建置開發環境並瞭解基礎Git flow'
disqus: hackmd
---

VueJS 2.0 教學筆記: 建置開發環境並瞭解基礎Git flow
===

綱要

[TOC]

安裝Git
---

**Mac OSX**

Mac有內建Git的關係，可以不需要額外安裝Git主程式、也不需做任何設定

**Windows**

安裝檔下載網址：https://git-scm.com/download/win

Win 10還需要設定系統環境變數的關係，安裝好Git之後我們必須進入到電腦的系統環境變數去新增 bin 位置，首先進入到「設定」，然後搜尋「系統環境變數」，點進會看到這個視窗：


接著在系統變數處按下編輯


到Git安裝好的目錄下找出bin的路徑，複製後貼到最後一個分號「;」的後面，確認後讓電腦重新開機。

重開機後打開終端機，也就是命令提示字元（一定要以系統管理員身份開啟）後輸入 `git`


看到這串訊息後代表Git安裝成功了。

建立屬於自己的Git版本控制環境來連動Github
---

**1.申請一組Github帳號並新建立一個專案**


按下New就會進入以下新增畫面


1. 建立一個名為 **vue_2020** 的專案
2. Description可以略過不填，權限設置付費才能使用Private的關係，預設是Public就好
3. Add license選擇「MIT」

**2. 選用Git軟體來進行版本控制**

https://www.syntevo.com/smartgit/

SmartGit是個簡潔、功能又齊全的Git版本控制圖形介面軟體，所有操作可以在同一個畫面裡面完成，不像 [GitKraken](https://www.gitkraken.com/) 或 [SourceTree](https://www.sourcetreeapp.com/) 那般外觀設計精美，卻也非常強大且容易使用，學習成本低。


如果你還沒打算付費使用的話，可以在安裝時選擇試用或者非商用(非商用每次啟動都有三十秒的告示)，日後有興趣再來取得授權。


安裝好SmartGit後 (過程都用預設設定) ，在電腦中任意位置建立一個新的目錄叫做`web`，回到剛剛Github我們建立好的 **vue_2020** 專案頁面，並且按下`Clone or Download` 的按鈕，就會看到一串網址，將它複製下來。


在SmartGit的畫面最上方主選單選擇 `Repository -> Clone` 並貼入剛才的HTTPS網址後往下一步


保持這個設定繼續往下


注意路徑必須和你的專案同名喔，確認後按下`Finish`


假如你使用的是非商用免費授權版，每次啟動都會看到這個畫面，30秒後可以關閉它
現在專案已經透過 `git clone` 的方式下載到你的local端囉，之後有任何檔案變更都會反映在畫面上，直到你 Commit 並 Push 上去 Github。


左下角這裡會顯示你本地端有什麼分支以及主線(master)、還有遠端來源的所有分支


現在我們來開一個叫做 `day_1` 的分支，滑鼠點兩下master，或者在確認箭頭是指著master的狀態下，右鍵選取`Local Branches` 的字樣，並選擇 `Add branch`，輸入 `day_1` 按下確認，畫面上就會出現這個名稱的分支。



因為剛開啟的分支，遠端Github還不會知道你有這個分支，所以繼續用右鍵點一下分支名稱，選擇`Push`，Git就會把這個分支推送到專案來源，畫面上 `day_1` 此時會變成 `day_1 = origin`，代表遠端已經儲存了你的分支。



現在到Github專案頁面上已經可以看見剛剛的 `day_1` 分支被記錄進去了

---

安裝NodeJS
---
下載NodeJS：https://nodejs.org/en/

由於Gulp任務管理工具是Base on NodeJS的關係必須另外安裝NodeJS，盡量使用標示LTS的穩定版本


安裝結束後在終端機下鍵入 `npm` 就會看到這組訊息，代表已經安裝成功


MAC OSX 權限設定調整
---

假如你上課用的電腦是MAC OSX環境，而從來沒有取得過寫入系統的管理權限，務必參考以下的做法。因為我們在安裝任何需要global全域形式的NodeJS套件都會動用到系統環境資源。


假如沒有設定系統權限，`npm install -g` 的指令就會像這樣顯示失敗

我們可以先用權限檢查指令 `ls -l /usr/local` 來查看目前電腦使用者是否擁有寫入權限：


OSX使用的是Linux指令，最左側的訊息表示：

d : 目錄 (dir)
r : 讀取權 (read)
w : 寫入權 (write)
x : 執行權 (execute)

現在我們可以用這個指令來改寫權限，讓藏在/usr/local/中的node_modules擁有寫入權限：

`sudo chown -R $USER /usr/local/lib/node_modules`

==注意，sudo指令會需要輸入這台電腦的登入密碼，密碼鍵入時不會顯示任何內容，不是當機喔==

---

初始化專案以及排除背景作業檔案
---

到這應該就能讓 NodeJS 正常安裝全域模組了，接下來要一邊安裝所需套件、一邊增加需要在 `.gitignore` 排除的項目，讓 node_module 和一些背景作業的檔案被變更時不會進入 git 版控。

從終端機裡面進入我們的`vue_2020`

假如你是在 `user/` 下(通常是顯示使用者名稱)的話，輸入 `cd web/vue_2020`
如果是用Win10的同學，你想在D槽進行開發的話，打開終端機時輸入`d:`就會跳轉到D槽

**1. 製作packge.json**

進入web目錄中的 `vue_2020` 後，繼續輸入`npm init`


接下來畫面上會問你一些設定名稱，()代表的是預設值，也可以不在這個階段變更，後面用VSCODE開啟`package.json` 也能修改

看到生成了一個JSON object就輸入yes確認，NodeJS會在目錄裡建立package.json這個檔案。

**2. 安裝VueJS與相依套件**

確認你的終端機路徑在vue_2020後按照以下指令下載安裝套件：

`npm install vue`
`npm install -g @vue/cli`

**3. 創建一個VueJS專案**

回到 **vue_2020** 的上一層目錄 **web**，根據 vue-cli 的document，創建指令為：

`vue create vue_2020`

接下來終端機畫面上就會要求你設定一些套件選用設定

使用空白鍵選取必要的項目後按下 Enter：

`Babel`
`Router`
`Vuex`
`CSS-Processors`
`Linter-Formatter`

接下來會問你Router要不要預設為HISTORY模式，選NO


CSS預處理器選node-sass或者dart-sass都可以


ESLint語法檢查工具選Airbnb原則，如果你討厭動不動就出現語法警告，一開始建置專案就不裝Liner


Linter on Save，儲存時檢查語法，下一個畫面選擇Babel、ESLint等設定檔選擇另開設定檔


要不要為了這次的設定做成一個Preset預設集，要就會請你輸入一組名稱

接下來等它跑完即可

如果都安裝好了，此時你應該會發現SmartGit上的檔案變更有幾千隻，先不動它。

**4. 安裝 elementUI**

`npm i element-ui -S`

我們先用VSCODE打開專案目錄：


`.gitignore`，這是個專門讓git辨識的規則檔，因為node_modules通常檔案都非常大，所以不會直接丟上Github，而是用package.json記錄安裝了哪些套件，之後換到別的開發裝置上只需要 `npm install` 這個指令，就會自動重新安裝回來。

`.DS_Store` 是Mac OSX特有的目錄的自定義屬性記錄檔，平常也算是個根本用不到的東西，所以在這會一併排除。

你會發現原本SmartGit上幾千個檔案變更消失了，因為 `.gitignore` 有順利運作的關係。

**5. 匯入elementUI到VueJS**

main.js 的設定：


import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';
import router from './router';
import store from './store';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = true;

Vue.use(ElementUI);

new Vue({
  router,
  store,
  el: '#app',
  render: (h) => h(App),
}).$mount('#app');

完成後，在VSCODE的終端機輸入啟動指令：

`npm run serve`

看到這個畫面表示成功囉


**6. 第一次的Git Push**

最後，我們可以將所有變更的檔案，全部選取起來並且按下右鍵候選擇`commit`

commit 一定要輸入本次變更的註解，這是養成開發寫註解的好習慣之一，也可以讓同個專案的同事知道你做了些什麼。


下了commit後，這些變更就正式儲存到你的本地專案中了，不會因為斷電、關機不正常等現象導致做好的工作階段消失。此時你會看見 day_1 這個分支顯示成 `day_1 1> origin`，表示你本地端有一個commit比遠端來源還要新。

對著分支名稱按下右鍵，選擇Push，兩邊同步後就會顯示 `day_1 = origin`

---

本日後記
---

覺得步驟繁多又有點複雜嗎？

正常，大家都是這樣過來的。

如果這個過程中你都沒什麼障礙的話，恭喜你！你已經跨越了設計師的舒適圈，朝著現代開發主流模式前進，也做到了大多設計師做不到的事情了！這就是提升價值的一種表現。

但如果你有那麼一點小問題也別著急，記錄下你的問題直接問老師都沒關係。

###### tags: `VueJS` `ElementUI` `Git`