開發(fā)環(huán)境準備：Windows10、Windows11

NodeJS，安裝官網(wǎng)最新LTS版即可

下載地址：https://nodejs.org/??????安裝一路下一步，默認即可

==========================================================

1、檢查 Node版本、npm包管理工具版本，命令如下：

打開cmd命令，輸入如下命令：

node -v npm -v

?

2、安裝 Vue腳手架

(1) Vue-cli2.0和之后版本命令不同，若之前安裝過2.0版可以先卸載，命令如下：

npm uninstall -g vue-cli

?

(2) 安裝最新版本vue-cli腳手架，命令如下：

npm install -g @vue/cli

?

3、創(chuàng)建項目

(1) 切換到指定的目錄

(2) 創(chuàng)建項目 ，命令如下(示例)：

vue create vue_demo

?

(3) 配置項目

按 上下鍵進行選擇，回車進行確認

?(4) 選擇需要配置的項目

?配置項說明：
( ) Babel//轉碼器，可以將ES6代碼轉為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。
( ) TypeScript// TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含并擴展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運行
( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的狀態(tài)管理模式）
( ) CSS Pre-processors // CSS 預處理器（如：less、sass）
( ) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測試（unit tests）
( ) E2E Testing // e2e（end to end) 測試

(5) 選擇Vue的版本，一般選擇3.x

?

(6)選擇ESLint代碼校驗規(guī)則

?

(7)選擇如何存放的位置

?In dedicated config files // 獨立文件放置
In package.json // 放package.json里

?

(8) 是否存儲當前配置

?

(9)創(chuàng)建項目

?(10)啟動項目
切換目錄——運行服務,命令如下圖：

?

?

(11)終止Vue項目

連續(xù)按2次ctrl+C 或關閉命令窗口

?

(12) 項目結構說明

項目結構說明：

??? 1、node_modules：用于存放項目中各種依賴包

??? 2、public：用于存放靜態(tài)資源

??????? index.html：生成項目的入口文件

??? (1)src：Vue的源代碼文件

??????? assets：用于存放著各種靜態(tài)文件，比如圖片
??????? components：應用程序的組件
??????? App.vue：應用程序根組件
??????? main.js：入口文件，主要作用是初始化 vue 實例

其他配置文件

??? eslintrc.js: eslint代碼檢查的相關配置放到這里。

??? .gitignore：配置git上傳想要忽略的文件格式。

??? babel.config.js：是一個工具鏈，主要用于在當前和較舊的瀏覽器或環(huán)境中將ES6的代碼轉換向后兼容（低版本ES）。

??? package.json：模塊基本信息項目開發(fā)所需要的模塊，版本，項目名稱

??? package-lock.json：是在npm install時候生成的一份文件，用于記錄當前狀態(tài)下實際安裝的各個npm package的具體來源和版本號
---------------------------------------------------------------------------

??? public文件目錄和src/assets目錄區(qū)別：

??????? public一般不用動，在vue-cli在進行build的時候，public下面的文件會原封不動的添加到dist中，不會被合并、壓縮；不會被webpack打包工具所處理。
??????? src/assets目錄，build之后，assets目錄中的文件，會被合并到一個文件中，然后進行壓縮。多用來存放業(yè)務級的js、css等。

?================================

補充：

?完整選擇步驟如上圖所示

Visual Studio Code 開發(fā)插件安裝：Vue Volar extension Pack