前言

目前主流的前端框架有三者，React、Angular、Vue，會想選擇Vue的原因是Vue為這三者之中最易學習的框架，剛出社會時算是全端開發者的我，那時沒什麼框架的概念，殊不知一接觸後，滿是後悔沒早點學習框架。後續將會有關於Vue的一系列的文章，想紀錄一下學習筆記，本文先來分享Vue的安裝。

Windows 10 Vue安裝

官網上有說明安裝方法。

獨立版本
至官網下載檔案放置在專案中，並用引入，有分開發及產品版本。
CDN引入
可至cdnjs或jsdelivr搜尋，若是不知道使用哪個，可直接引入官網上的CDN。
NPM
先安裝Node.js，安裝完成後，用檢視版本指令來查看是否成功。
```
$ node -v
```
使用node套件管理(npm)來安裝vue及vue-cli，vue沒有包含vue相關指令的，因此還需要安裝vue-cli工具來提高開發效率，而vue-cli是vue.js提供給開發者能夠快速使用vue指令操作的工具。
```
$ npm install vue
#全局安裝
$ npm install -g vue-cli
```
全局安裝vue-cli後，往後要新增vue專案都不需要再安裝即可使用vue相關指令，此時請注意畫面是否有出現vue-init相關的路徑，可以先把路徑記下來後續會提到用途。
```
$ vue -V
```
要確認是否有安裝成功可使用檢視版本的指令來查看。
在這裡遇到了一個問題，vue: command not found，查了一下發現是環境變數沒設定的關係，到"控制台->系統及安全性->系統->進階系統設定->環境變數"中的Path新增，路徑為全局安裝vue-cli的地方，即為在上面提到的vue-init路徑，新增完後就可以使用vue指令了。
```
C:\Users\ASUS\AppData\Roaming\npm
```
開始建立專案
```
$ vue create project_name
$ cd project_name
$ npm install
#建置
$ npm run build
#啟動
$ npm run serve
```
新增專案時會有三種可選，前兩者為預設，第三個選項為自行選擇要安裝的項目，詳細可到官網上查看，在這裡我選擇第一個安裝，完成後需先安裝相關套件再啟動，到localhost:8080(預設是8080)查看有畫面就完成了。