用Vue.js框架實作自己的Blog – CH2 環境建置

在上回這裡對Vue有了基礎概念後，在開寫Vue之前肯定需要經歷一番環境建置的陣痛期啦～不過其實在建置Vue.js的環境我個人覺得還算友善，不像某Tensor開頭的機器學習框架，要建立GPU計算的環境真的是弄到懷疑人生……，今天就來跟大家分享一下小弟在建置Vue.js環境時遇到的過程以及遇到的狀況

首先，那個Node.js與NVM (Node Version Manager)

因為在學習Vue之前我主要都是利用SFTP auto save上傳到Host然後再看改動的方式開發，基本上沒有接觸過本地端的開發方式，所以也沒有使用過Node.js的經驗，所以在安裝Vue之前必須先進行Node.js的環境安裝，基本上這也是在所以過程中最讓我印象深刻的地方。

安裝Node.js有幾種方式，第一種就是直接上Node.js的官方網站下載直接安裝，我一開始也是直接利用這種方法，但後來後悔了；第二種是利用Node的版本控制工具 – NVM進行安裝，這是我蠻推薦的作法，畢竟在開發或維護不同的專案時，每個專案開發時的Node版本可能不盡相同，所以這時候NVM的優勢就是可以讓我們直接快速地進行Node.js的版本切換，不用再刪除重裝之類的。

要安裝NVM的方法基本上非常簡單，只需要使用他們官方的Github上說明的指令，即可在Terminal進行安裝：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

在下載完NVM之後可以嘗試在Terminal執行 nvm --version 如果他有回應相應的版本號，就代表NVM安裝成功了，接著就可以進一步利用NVM安裝Node.js。

利用NVM安裝Node.js

在安裝完NVM之後，可以先嘗試執行看看指令 nvm ls ，這個指令會顯示目前你的電腦中有安裝的版本以及預設使用的版本號，如果想要看看所有的Node.js版本號的話可以執行 nvm ls-remote ，然後在挑選好要安裝的版本之後，只要執行 nvm install NVM 就會幫我們把那個版本的Node.js安裝好，除了之定特定版本，也可以使用 nam install stable 安裝最新的穩定版本。

在安裝好Node.js之後，可以先執行 nvm ls 確認目前的預設版本，如果預設版本並不是我們要使用的版本號，可以使用 nvm use 指定使用特定版本的Node.js，指定完成後可以嘗試在Terminal 輸入 node –version 確認目前所使用Node.js的版本。

Vue.js環境安裝與Vue-Cli

在使用Vue.js框架進行開發時，可以利用CDN直接載入進行開發，不過如果要在本地端進行開發的話，就必須透過npm下載，只需要使用指令 npm install vue 即可使用。

不過Vue官方也有推出命令行工具 → Vue-Cli 這個工具可以幫助我們快速建立專案以及項目腳首架，另外也可以在建置專案時預設導入要使用的工具 EX.vue-router, vuex……。

Vue-Cli也可以透過NPM進行安裝：npm install -g @vue/cli ，在安裝完成之後基本上本地端的開發環境就建置的差不多了，不過要特別注意，Vue-Cli只能在8.9以上的Node.js版本中運行。

在安裝完成之後，我們可以使用 vue –version 確認是否正確安裝Vue，有跑出版本號就代表我們完成環境建置的環節了!接下來可以開開心心的建立專案開始玩這個前端框架囉~