# vue開發環境建立

###### tags: `切切切` `node` `vue` `nvm` `npm`

參考文章：
* [Install Node.js on mac using NVM — For beginners — MacOS Big Sur](https://tshravan2012.medium.com/install-node-js-on-mac-using-nvm-for-beginners-macos-big-sur-2d74b6d4a68c)
* [Mac 終端機(terminal) bash 改使用 zsh](https://blog.sig.tw/2020/03/mac-terminal-bash-change-zsh.html)

### 1、安裝 nvm
* [Mac 安裝 NVM](https://simonallen.coderbridge.io/2020/05/29/nvm-note/)<span class="small">:link:</span>
mac 安裝 NVM 千萬千萬不要用 Homebrew ，不支援！！
:::warning
nvm 是 Node.js 的版本管理器 (version manager)，
可在同一台主機上安裝多個版本的 Node.js 環境
[文章來源](https://titangene.github.io/article/nvm.html)<span class="small">:link:</span>
:::
:::warning
:dart: 注意！
若本地端沒有 Xcode 環境，安裝 nvm 可能產生失敗！
[解決方式](https://stackoverflow.com/questions/37648886/error-unable-to-find-utility-git-not-a-developer-tool-or-in-path/48738523#48738523)<span class="small">:link:</span>
:::

<!-- 終端機安裝 Xcode -->
xcode-select --install
sudo xcode-select -s /Library/Developer/CommandLineTools

### 2、安裝 node
* [LTS macOS](https://nodejs.org/en/download/)<span class="small">:link:</span>
* [其他安裝方式](https://nodejs.org/zh-tw/download/package-manager/)
:::warning
安裝了 node 就會一併安裝 <span class="focus2">npm</span>
npm（全稱 Node Package Manager，即「node包管理器」）是Node.js預設的、用JavaScript編寫的軟體套件管理系統。
:::

:::warning
<span class="title">請注意！安裝順序</span>
若要使用<span class="focus2">nvm</span>控管 node 版本（專案開發可能使用不同的 node 版本，可在 terminal 中進行切換）
第一步必須先安裝<span class="focus2">nvm</span>，第二步才是安裝<span class="focus2">node</span>，如果安裝順序錯誤，請先移除 node 後，再安裝 nvm
:::
### :dart: [在Mac下徹底解除安裝node和npm的方法](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/199819/)<span class="small">:link:</span>

<!-- 解除安裝node -->
sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

* 各項版本號確認方式

node -v
npm -v

vue --version             <!-- 請看第3點 vue安裝 -->

nvm -v                    <!-- 查看NVM的版本號跟功能 -->
nvm --version
nvm list                  <!-- 會出現推薦及安裝過的node版本號 -->
nvm use [node版本號]       <!-- 切換 node 版本號 -->


### 3、[安裝 vue](https://cli.vuejs.org/guide/installation.html)<span class="small">:link:</span>
* 安裝 vue

npm install -g @vue/cli
# OR
yarn global add @vue/cli

* 確認 vue 版本號

vue --version

:::warning
<span class="title">同場加映，可以自己試試</span>
* [建立新的 vue 專案](https://medium.com/@rorast.power.game/vue-js%E7%B3%BB%E5%88%97%E4%BA%8C-%E4%BD%BF%E7%94%A8-vue-cli-3-79968e9fed7d)
* [Vue 學習筆記](https://book.vue.tw/CH1/1-1-introduction.html)

:::
### 4、下載 vue 專案範例，解壓縮
* 從git下載[『桶後溪專案』](https://github.com/HywebU00/2021_Vue_Tong-houForest_Car_regulation)<span class="small">:link:</span>
* 解壓縮後，在<span class="focus2">該資料夾上</span>開啟終端機，並執行 <b>npm install</b>，目的是為了在本地端產生<span class="focus2">node_modules 資料夾</span>
* 執行 <b>npm run serve</b>
#### 成功run起來會長這樣
將 Local: 那串網址貼入瀏覽器即可預覽


:::warning
<span class="title">為什麼要在本地端資料夾再執行一次 <b>npm install</b>？</span>

* 重新執行 <b>npm install</b> ，是因為<span class="focus2">node_modules 資料夾</span>檔案很大，不會一起推上git。所以下載至本地端後會缺失 node_modules 資料夾，導致 <b>npm run serve</b> 時發生錯誤。
* vue_demo 檔案本身很大，原因在於<span class="focus2">node_modules 資料夾</span>

:::

---

### 題外話、安裝vue環境，terminal compass watch 出錯
Lize 的狀況劇：
終端機從 bash 轉為 zsh，導致 compass watch 出錯

<!-- 錯誤訊息 -->
Library not loaded: /usr/local/opt/openssl@1.1/lib/libssl.1.1.dylib (LoadError)

#### 解決方式

[文章來源](https://medium.com/@ssscripting/fixing-library-not-loaded-usr-local-opt-openssl-1-1-lib-libssl-1-1-dylib-loaderror-d4c2a21ddf9)

1. 找不到<span class="focus2">libssl.1.1.dylib</span>
2. 查詢本機 <b>openssl</b> 版本，終端機輸入<span class="focus2">openssl version</span>，顯示為 LibreSSL 2.8.3
3. 使用 [homebrew](https://brew.sh/index_zh-tw)，安裝 [版本 openssl@1.1](https://formulae.brew.sh/formula/openssl@1.1)

<!-- 安裝 homebrew -->
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

<!-- 安裝 版本 openssl@1.1 -->
brew install openssl@1.1

4. 重開終端機，問題排除。

<style>
.small{ padding: 0 6px;}
.title{font-size: 1.2em; font-weight: 600;
line-height: 4;
}
b{ color: #cf1204;}
.focus { color: #B20050; }
.focus2 {
color: #222; border: solid 1px #c8c8c8;
display: inline-block;
padding: 2px 10px; margin: 0 4px;
border-radius: 4px;
background: #fff;
}
.focus3 {
color: #B20050; border: solid 1px #c8c8c8;
display: inline-block;
padding: 2px 10px; margin: 0 4px;
border-radius: 4px;
background: #fff;
}
</style>