像前面文章中提到vue是一套漸進式的框架，他適合在各種不同的需求中使用，無論你是只想用它來綁定一些表單資料或是使用他Virtual DOM特性，甚至更深入的使用他做SPA（Single Page Application），都是vue所歡迎的，而我們選擇接觸他的時機是因為我們前面文章提到的元件設計並不能跨頁使用，我們期望能突破這個障礙，而方法就是使用vue cli（Command Line Interface）。

有了學習的原因之後，更能驅動我們認識一項新技術，當然vue-cli能提供的當然不僅止於跨頁面的組件設計，也包含很多對於網頁設計上非常方便的功能，例如：結合webpack做檔案的整合與壓縮、結合Babel來轉譯Javascript去相容於舊版本的瀏覽器…等等，可說是好處多多，當然再學習上會有一些門檻，接下來就讓我們突破這個門檻，先把自己的開發環境給建置好吧！

要使用vue cli之前，要先安裝好node.js，對於Windows的用戶來說，這是非常方面的事情，只要前往node.js的官網下載安裝檔並進行安裝即可，過程中也幾乎都只要按「下一步」就好。

上圖可以看到Node.js也有Mac的版本，但因為透過下載pkg安裝後會很難將他移除，node.js版本更新的很快，建議透過以下的方式進行安裝，對於軟體管理上會比較方便，甚至可以在一台電腦安裝多個版本的node.js，當然如果對於以上考量不在意的，也可以透過軟體下載的方式進行安裝，這樣就可以跳過下一個章節（Windows用戶可以跳過下一個章節）。

Mac 安裝 node.js

安裝Homebrew

首先我們需要安裝Mac的套件管理工具「Homebrew」，官網首頁就有提供下載的方法：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

複製首頁中的安裝文字，貼在終端機內：

按下Enter之後就等待安裝完成吧！

安裝NVM（Node Version Manager）

前面有提到Node.js的版本很多，有時候我們可能要安裝多個版本來測試，所以我們可以透過NVM來進行版本管理，NVM的官網也有提供安裝方式說明：

網站上提供了curl的方式進行安裝，不過因為我們已經安裝Homebrew，所以只要在終端機輸入「brew install nvm」，就可以安裝完成。

就安裝完畢了，但為了使用NVM，我們需要設定一個配置文件放入一些環境變數（官網上有提供環境變數的字串）

按照官網說明我建立了一個檔名為「.zshrc」的純文字檔案，並將下方框內的文字複製貼入，並將檔案存放在個人資料夾的根目錄裡面（系統檔預設是隱藏的，可以按下「cmd+shift+.」打開隱藏檔）。

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

接下來關閉終端機重新開啟，並輸入「nvm –version」會出現安裝的版本，若能夠執行就表示安裝完成，下面是我執行的結果。

安裝Node.js

如前面所述，我們安裝NVM就是期望可以透過它來安裝Node.js，並且夠過他來進行版本管理，我們就先利用它來安裝Node.js吧！

首先可以看看目前可以安裝node.js的版本，在終端機輸入「nvm ls-remote」，將會列示出目前所有可以安裝的版本。

我們可以透過「nvm install v12.18.0」來指定安裝版本，如果不想自訂安裝版本，也可以輸入「nvm install node」來安裝目前最新的版本，在安裝後可以透過「nvm ls」來檢視目前已經安裝的版本。

從上圖可以看到我們目前安裝了兩個版本的node.js，分別是：v12.18.0, v14.4.0，而目前使用的版本是v12.18.0（前方有個箭頭），也可以透過「node -v」來確定目前載入的版本，可以使用「nvm use v14.4.0」來切換載入的版本。

以上大致上就是在Mac中我們透過套件管理來安裝Node.js的相關工作，接下來我們就準備要來安裝vue cli了！

安裝vue cli

安裝完Node.js之後，我們可以開始安裝vue cli，在vue cli的官網中也有提到安裝方式

在終端機的畫面中輸入「npm install -g @vue/cli」進行安裝，如果Mac用戶在安裝中遇到了權限的問題，必須輸入「sudo npm install -g @vue/cli –unsafe-perm 」。

安裝完成後輸入「vue -V」可以看到安裝的vue版本就表示安裝已經成功囉，下一篇文章我們就要來看看怎麼樣透過vue cli來開啟我們的第一個專案。