https://blog.csdn.net/hyk521/article/details/105117432/

一、前言
1、本例環境
node.js：v12.14.1

npm：v6.13.4

vue：@vue/cli 4.2.3

2、node.js環境安裝與測試
由於vue的安裝與建立依賴node.js（JavaScript的執行環境）裡的npm（包管理和分發工具），因此需要先確保安裝node.js。

檢測方式：開啟cmd命令視窗（Window + R，輸入cmd然後回車），輸入 node -v 回車，正常顯示node.js版本代表已安裝。

因為npm會隨著node.js一起安裝，所以，只要是node.js正常安裝，就代表npm已經安裝。

檢測方式：cmd命令視窗輸入 npm -v 回車，能正常顯示npm版本。

沒有安裝的也不用擔心，下載node.js安裝包，然後一直“下一步”點下去就可以安裝。

下載地址：https://nodejs.org/zh-cn/

二、安裝vue腳手架：Vue CLI
官網：https://cli.vuejs.org/zh/

按照官方文件說明，安裝命令為“npm install -g @vue/cli”。然而，原生npm的下載速度，大家都懂的...

因此，我們使用淘寶映象來安裝，命令：npm install -g @vue/cli --registry=https://registry.npm.taobao.org

等個三分鐘左右，安裝完成。cmd命令視窗輸入 vue -V（V大寫） 回車，能正常顯示@vue/cli版本。

三、建立vue專案
首先我們計劃在D盤vueTest資料夾下建立專案，命令視窗輸入 d: 回車，再輸入 mkdir vueTest 回車建立 vueTest 資料夾，再輸入 cd vueTest 回車進入 vueTest 資料夾下。

1、vue create
1.1.1、cmd命令視窗輸入 vue create vueinit001 回車

default (bable，eslint） // 預設

Manually select features // 手動 **選擇手動建立專案

1.1.2、如果不需要太多功能的話可以選擇快速建立。選擇第一個直接回車，進行專案建立

1.1.3、cmd視窗輸入命令 cd vueinit001 回車進入 vueinit001 專案中，再輸入 npm run serve 回車啟動服務

1.1.4、瀏覽器位址列輸入 http://localhost:8080/ ，正常開啟網頁表示專案建立成功

1.2.1、cmd命令視窗輸入 vue create vueinit002 回車

1.2.2、這次我們選擇手動建立專案，選擇第二個回車（鍵盤上下鍵選擇）

1.2.3、選擇自己需要的特性（上下鍵移動鍵，空格鍵是否選中，a 鍵切換選擇所有，i 鍵反轉選擇選項），然後回車

( ) Babel // 支援高階語法轉換

( ) TypeScript // 支援使用 TypeScript 書寫原始碼

( ) Progressive Web App (PWA) Support // 支援PWA

( ) Router // 路由

( ) Vuex // store

( ) CSS Pre-processors // CSS 前處理器

( ) Linter / Formatter // 程式碼風格檢查和格式化

( ) Unit Testing // 支援單元測試

( ) E2E Testing // 支援E2E測試

本次我們選擇：Babel，Router，Vuex，CSS Pre-processors。

至於程式碼格式化，現在的IDE開發工具中都有格式化外掛，無需另行下載。

1.2.4、這一步提示我們是否使用歷史路由器，輸入 n ，回車

1.2.5、這一步提示我們在專案裡面需要支援何種動態樣式語言，我們選擇第二個（上下鍵移動鍵），回車

1.2.6、這一步提示我們選擇配置檔案的位置，因為每個外掛都有自己單獨的配置檔案，我們選擇第一個，回車

1.2.7、這一步提示我們是否將當前配置選項儲存起來，方便下次建立專案時使用。輸入 n ，回車

1.2.8、下載依賴包，建立專案

1.2.9、cmd視窗輸入命令 cd vueinit002 回車進入 vueinit001 專案中，再輸入 npm run serve 回車啟動服務

1.2.10、瀏覽器位址列輸入 http://localhost:8080/ ，正常開啟網頁表示專案建立成功

2、使用圖形化介面
2.1、開啟cmd命令視窗，輸入 vue ui 回車，啟動圖形化介面

2.2、啟動成功後，會自動開啟圖形化介面檢視

2.3、點選“建立”，進入專案建立頁面

2.4、預設是在C盤根目錄下，選擇自己想要建立專案的資料夾

2.4.1、返回上一層：點選下圖圖示

2.4.2、進入資料夾內：單擊資料夾

2.4.3、選擇D盤：操作步驟如下

2.4.4、新建資料夾：操作步驟如下

2.5、點選“在此建立新專案”，進入建立新專案頁面

2.6、輸入專案名（示例：vueinit003）

2.7、包管理器，選擇 npm

2.8、下拉頁面，初始化git倉庫，預設選中，本次聯絡取消選中

2.9、選擇“下一步”，進入專案預設頁面

2.10、專案預設 設定，同上述的 1、vue create ，這裡我們選擇預設，點選“建立專案”

2.11、專案建立中，同時命令視窗顯示建立具體資訊

2.12、專案建立完成，會自動進入專案管理頁面

2.13、點選“任務”進入任務管理頁面

2.14、點選“serve”進入專案編譯管理頁面

2.15、點選“執行”開始編譯

2.16、編譯成功後，點選“啟動app”，會自動開啟專案

3、拉取 2.x 模板 (舊版本)
3.1、安裝橋接工具

依照官方文件說明，使用舊版本的 vue init 功能，需要安裝一個橋接工具。同理，我們使用淘寶映象。

命令：npm install -g @vue/cli-init --registry=https://registry.npm.taobao.org

3.2、在D盤vueTest資料夾下建立名為“vueinit004”的專案

命令：vue init webpack 專案名

3.3、確認專案名，直接回車

3.4、專案描述，可不寫，這裡直接回車

3.5、作者，可不寫，這裡直接回車

3.6、vue的編譯方式：執行環境 + 編譯器；僅執行環境。這裡我們選擇第一個，回車

3.7、是否下載路由，根據自個需求選擇。這裡不選擇，輸入 n ，回車

3.8、是否使用ESLint美化程式碼，根據自個需求選擇。這裡不選擇，輸入 n ，回車

3.9、是否使用單元測試，輸入 n ，回車

3.10、是否使用E2E測試，輸入 n ，回車

3.11、建立專案後的執行方式：npm；yarn；自行選擇。這裡我們選擇npm方式，回車

3.12、建立專案

3.13、專案建立完成，輸入 cd vueinit004 進入專案

3.14、輸入 npm run dev 啟動專案，瀏覽器位址列輸入 http://localhost:8080 ，進入專案頁面

3.15、停止專案，安裝專案依賴包

命令視窗，Ctrl + C 出現終止操作提示符，輸入 N 停止專案

安裝專案依賴包，同理，我們使用淘寶映象。

命令：npm install --registry=https://registry.npm.taobao.org

安裝成功後，專案資料夾內會生成一個名為“node_modules”的資料夾

3.16、同 3.14：輸入 npm run dev 啟動專案，瀏覽器位址列輸入 http://localhost:8080 ，正常進入專案頁面表示專案建立完成

四、結尾
上面詳細說明了三種vue專案的建立步驟，個人更傾向於使用圖形化介面建立，因為檢視給人的感覺更直接，具體使用哪一種看個人習慣。
————————————————
版權宣告：本文為CSDN博主「幸運小男神」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/hyk521/article/details/105117432/