# 本地部署開發編譯與偵錯方式
###### tags: `共用`

## 一、安裝Node.js(執行環境)
### 1. 下載Node.js
此專案僅支援12.16.1版(4F服務器是安裝14.21.1)，請選擇對應版本下載

### 2. 確認安裝
安裝完成後可在終端機輸入 `node --version` 查看Node.js版本，確認安裝已完成

## 二、執行專案
### 1. 安裝node module
進入專案資料夾，在終端機輸入 `npm install`
`npm install`會根據`package.json`中定義的套件列表與其相依的程式庫去安裝，安裝完成後會產生`node_modules`資料夾，所有套件都存放於此
[npm教學](https://ithelp.ithome.com.tw/articles/10234060)

### 2. 執行專案
輸入 `npm run serve`，成功後會出現以下畫面 (後端是 `npm run start`)

## 三、偵錯
### 1. JS部分
* 在script中要偵錯的資料放在console.log()中
* 打開瀏覽器，按下F12打開DevTools，切換到Console頁籤
* 執行程式(按下某按鈕觸發event等)，在Console頁籤就會看到對應的資料，以此來偵錯
[console教學](https://israynotarray.com/javascript/20200313/3743352418/)
### 2. CSS部分
* 在瀏覽器畫面上對要偵錯/修正的元素按右鍵>檢查
* 在DevTools的Elements頁籤會顯示HTML結構，下方則是Styles，可在這邊更改CSS來直接改變頁面上的樣式，要注意的是頁面重整後樣式都會消失
* Elements頁籤左邊第一顆按鈕為inspect功能，點擊後會變為藍色，在這狀態下去選擇瀏覽器畫面上的元素，會自動focus至HTML的對應位置，可透過這樣的方式快速去修改元素樣式
* Elements頁籤左邊第二顆按鈕為切換瀏覽器/手機/平板模式，可切換各種預設的裝置，也可手動輸入螢幕的長寬來做檢視，此外滑鼠游標也會切換為行動裝置的touch event，所以不會有一般瀏覽器的hover事件

## 四、VSCode介紹

### 1. 匯入專案
直接將資料夾拖入VSCode視窗即可開啟專案
### 2. Git
參考此份文件 [VSCode git 教學連結](https://ithelp.ithome.com.tw/articles/10267030)
### 3. 匯出與匯入插件
#### 匯出
* Windows:
`code --list-extensions | % { "code --install-extension $_" }`
* Mac:
打開命令列 `CMD+SHIFT+P`
安裝code指令 `Shell Command: Install 'code' command in PATH`
註: 因為mac預設不會安裝code指令，因此需手動執行以上指令
`code --list-extensions | xargs -L 1 echo code --install-extension`

output會是:

code --install-extension [插件A]
code --install-extension [插件B]
code --install-extension [插件C]
...

將此列表複製到文字檔(.txt)後傳送到另一台電腦
#### 匯入
將此列表複製terminal中貼上即可

個人插件列表分享 (Ken)

code --install-extension 2gua.rainbow-brackets
code --install-extension alefragnani.Bookmarks
code --install-extension brittanychiang.halcyon-vscode
code --install-extension Compulim.vscode-chinese-translation
code --install-extension eamodio.gitlens
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.auto-close-tag
code --install-extension formulahendry.auto-rename-tag
code --install-extension gencer.html-slim-scss-css-class-completion
code --install-extension kleber-swf.unity-code-snippets
code --install-extension michelemelluso.code-beautifier
code --install-extension mrmlnc.vscode-scss
code --install-extension ms-dotnettools.csharp
code --install-extension octref.vetur
code --install-extension PKief.material-icon-theme
code --install-extension pranaygp.vscode-css-peek
code --install-extension rangav.vscode-thunder-client
code --install-extension Shan.code-settings-sync
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension TabNine.tabnine-vscode
code --install-extension Vue.volar
code --install-extension wesbos.theme-cobalt2