步驟1：安裝符合要求的node版本
目前官網要求使用的node.js版本為18.3及其以上
所以我們要安裝node.js 18.3及其以上版本
?NVM安裝教程：一個項目學習Vue3---NVM和NPM安裝-CSDN博客
若不想安裝NVM，可以直接下載適合自己的node版本Node.js — 在任何地方運行 JavaScript (nodejs.org)
安裝好后從步驟2開始
nvm ls 
若存在18.3.0則不需要重新安裝，若不存在，可以參考上一篇文章，先安裝nvm版本管理工具，使用一下命令進行安裝18.3.0
nvm install 18.3.0
nvm use 18.3.0再次運行nvm ls 則可以看到版本已經指向了18.3.0
步驟2：設置Node的鏡像庫
若切換了版本nrm和鏡像庫都需要重新設置一次
npm config set registry https://registry.npmmirror.com
npm install -g nrm執行
nrm ls可以看到鏡像已經指向淘寶的鏡像地址
步驟3：創建第一個Vue應用
創建一個文件夾，使用vscode工具或者其他文本編輯工具打開該文件夾
在vscode中
創建一個命令窗口
在底部執行命令,則會創建一個最新的vue項目，至此vue項目創建完成
npm create vue@latest
創建完成后執行
npm run dev下方會輸出端口和地址，點擊即可打開項目
其他：創建過程中的日志分析
? Project name: … <your-project-name>
PS：讓你輸入項目名稱
? Add TypeScript? … No / Yes
PS：是否使用TypeScript
TypeScript：是一種增強型JS 官方地址：TypeScript中文網 · TypeScript——JavaScript的超集 (tslang.cn)
? Add JSX Support? … No / Yes
PS：是否使用JSX
JSX：允許JS中寫HTML代碼 官方地址：JSX 簡介 – React (reactjs.org)
? Add Vue Router for Single Page Application development? … No / Yes
PS：是否為單頁面添加路由
Vue Router：頁面跳轉時路由器，官方地址：Vue Router | Vue.js 的官方路由 (vuejs.org)
? Add Pinia for state management? … No / Yes
PS：是否使用Pinia管理狀態,官網地址：Pinia | The intuitive store for Vue.js (vuejs.org)
Pinia ： Vue 的專屬狀態管理庫，它允許你跨組件或頁面共享狀態。
? Add Vitest for Unit testing? … No / Yes
Vitest : 一種測試工具，官網地址:Vitest | 下一代測試框架
PS：是否使用極速單元測試框架Vitest 進行單元測試
? Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
PS：是否使用端到端測試工具
Cypress
Cypress 是一個現代化的端到端測試工具，專注于提供可靠性、快速性和易用性。以下是它的一些主要特點：
-
自動化和調試: Cypress 允許開發者在測試運行時進行實時調試，能夠以可預測的方式模擬用戶行為。
-
斷言和測試交互性: Cypress 提供了強大的斷言庫，支持對頁面元素的直接訪問和交互，使得編寫和維護測試用例更為直觀和高效。
-
可視化測試運行: Cypress 提供可視化的測試運行界面，可以實時查看測試的執行情況和結果。
Cypress 在社區中受到廣泛歡迎，特別適合于需要高度交互性和快速反饋的應用程序。
Nightwatch.js
Nightwatch.js 是一個基于Node.js的端到端測試框架，它注重于簡化測試的編寫和管理。以下是它的一些主要特點：
-
基于WebDriver協議: Nightwatch.js 使用WebDriver協議與瀏覽器進行交互，支持多種主流瀏覽器的測試。
-
易用的API: Nightwatch.js 提供了簡潔明了的API，使得測試用例的編寫變得更加直觀和簡單。
-
并行測試和測試報告: Nightwatch.js 支持并行測試運行，并且能夠生成詳細的測試報告，幫助團隊分析和追蹤測試結果。
Nightwatch.js 適合于那些需要與多種瀏覽器進行集成測試或需要更靈活配置的項目。
Playwright
Playwright 是一個由Microsoft開發的跨瀏覽器自動化測試工具，它相對較新但已經獲得了廣泛的關注。以下是它的一些主要特點：
-
跨瀏覽器支持: Playwright 支持多種瀏覽器，包括 Chromium（谷歌Chrome）、WebKit（Safari）和 Mozilla Firefox。
-
自動化和可靠性: Playwright 設計用于在多種瀏覽器和設備上執行可靠的自動化測試，支持復雜的用戶場景和交互操作。
-
強大的API和調試能力: Playwright 提供了現代化的API，并且支持在測試運行時進行調試，幫助開發者更輕松地編寫和維護復雜的測試用例。
Playwright 特別適合需要跨瀏覽器測試和在多種環境中驗證應用程序穩定性的項目。
總結
-
Cypress 提供了強大的自動化測試能力和實時調試功能，適合需要高度交互性的應用。
-
Nightwatch.js 簡化了端到端測試的編寫和管理，適合需要與多種瀏覽器進行集成測試的項目。
-
Playwright 是一個跨瀏覽器的自動化測試工具，具有強大的API和靈活的測試調試能力。
? Add ESLint for code quality? … No / Yes
PS：是否使用ESLint 提高代碼質量 官方地址：ESLint 中文網 (nodejs.cn)
? Add Prettier for code formatting? … No / Yes
PS：是否使用Prettier格式化代碼 官方地址：Prettier 中文網 · Prettier 是一個“有態度”的代碼格式化工具
? Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes PS：是否使用 Vue DevTools 7 對你的項目進行debugger 官方地址：Home | Vue Devtools (vuejs.org)
為了學習期間，我這邊是全部yes了，根據自己需求操作，以上后面分開展開看
關注公眾號：資小庫，快速答疑解惑
