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/