[ Vue.js ] 建立Vue專案

使用Visual Studio Code。
安裝Node.js後，以npm安裝Vue CLI來建立Vue專案。

步驟

• 安裝Node.js
• npm 安裝Vue CLI
• Vue CLI 建立一個Vue專案

安裝Node.js

在安裝 Vue CLI 之前，必須先安裝 Node.js與npm。

Node.js

Node.js 是能夠在伺服器端運行 JavaScript 的開放原始碼、跨平台執行環境。
可以在Node.js官網下載: https://nodejs.org/en/

LTS為穩定版 Current為最新版

下載完安裝檔後，就Next到安裝完成即可。

Finish

npm

npm（全稱 Node Package Manager，即「node包管理器」），是由JavaScript編寫的軟體套件管理系統，可以讓使用者輕鬆下載其他的套件(package)或模組(module)，npm會隨著Node.js自動安裝。

Visual Studio Code

若要確認版本與更新版本，可以在開啟 Terminal 終端機下指令。

選擇檔案→喜好設定→設定。

功能→終端機→Integrated › Default Profile: Windows選擇Git Bash。

終端機輸入:
node --version
若終端機回覆版本號，則表示Node.js安裝成功。

終端機輸入:
npm --version
終端機會回覆npm版本。

終端機輸入:
npm update -g npm
更新npm。

npm 安裝Vue CLI

透過npm全域安裝vue-cli，安裝完後即可使用vue指令。

終端機輸入:
npm install -g @vue/cli
安裝Vue CLI。

等待一陣子，待vue-cli安裝完畢。

終端機輸入:
vue --version
終端機會回覆Vue CLI版本@vue/cli 4.5.13，即表示安裝成功。

Vue CLI 建立一個Vue專案

終端機使用Vue CLI建立Vue專案。

終端機輸入:
vue create [專案名稱]
這邊我輸入 vue create vue_project，建立一個名叫vue_project的專案。

接著會看到畫面:

選擇Vue的版本(相關套件預設會一併安裝babel與eslint)，若這邊選擇Manually select features，可以再自行選擇其他想一併安裝的套件。

這邊我選擇Manually select features，Enter下一步:

可以看到說明，按下空白鍵是選擇，按下a是全選，i擇是反選擇(改選為目前未勾選的項目)。

勾選完想一併安裝的套件後，在Choose Vue version選項按下Enter，選擇Vue版本:

選擇ESLint風格:

Lint檢查程式碼的時機:

Babel, PostCSS, ESLint ...等等的Config檔放置位子，多數情況下會放在 package.json 統一管理:

將以上設定設為之後專案的預設選項:

儲存預設:

接下來會開始建立專案，建立完成的畫面:

終端機輸入
cd vue_project
切換目錄到剛剛建立的專案資料夾。

再輸入
npm run serve
(若顯示"node"不是內部或外部命令、可執行的程式或批次檔。
則在本機右鍵→內容→進階系統設定→進階→環境變數→Path→新增Node.js所安裝的位置，ex:C:\Program Files\nodejs)
啟動專案，會看到以下畫面:

在瀏覽器輸入上面的連結 http://localhost:8083/即可看到執行的專案畫面:

直接開啟資料夾，也能看到建立好的專案: