安裝和構(gòu)建文件
第一步：安裝node.js
Node.js官網(wǎng)：https://nodejs.org/zh-cn/download/
第二步：開始構(gòu)建
按鍵盤左下角的windows徽標(biāo)鍵+R鍵，輸入cmd命令，回車確認(rèn)。（Win鍵在鍵盤上顯示為Windows旗幟，或標(biāo)有文字Win或Windows的按鍵。）
在打開的界面運(yùn)行以下命令
npm create vite@latest my-vue-app -- --template vue會(huì)有詢問你是否操作，輸入Y即可。
外面根據(jù)要求，輸入以下代碼，CD進(jìn)入到外面的項(xiàng)目目錄
cd my-vue-app然后執(zhí)行以下代碼，安裝項(xiàng)目需要的環(huán)境
npm install第三步：開始編碼
打開您的文件夾，在文件夾中輸入以下文本
C:\Users\Administrator\my-vue-app
在新打開的文件夾中開始編寫命令即可。
文件結(jié)構(gòu)及用途
|-node_modules -- 項(xiàng)目依賴包的目錄
|-public -- 項(xiàng)目公用文件
|--favicon.ico -- 網(wǎng)站地址欄前面的小圖標(biāo)
|-src -- 源文件目錄，程序員主要工作的地方
|-assets -- 靜態(tài)文件目錄，圖片圖標(biāo)，比如網(wǎng)站logo
|-components -- Vue3.x的自定義組件目錄
|--App.vue -- 項(xiàng)目的根組件，單頁應(yīng)用都需要的
|--index.css -- 一般項(xiàng)目的通用CSS樣式寫在這里，main.js引入
|--main.js -- 項(xiàng)目入口文件，SPA單頁應(yīng)用都需要入口文件
|--.gitignore -- git的管理配置文件，設(shè)置那些目錄或文件不管理
|-- index.html -- 項(xiàng)目的默認(rèn)首頁，Vue的組件需要掛載到這個(gè)文件上
|-- package-lock.json --項(xiàng)目包的鎖定文件，用于防止包版本不一樣導(dǎo)致的錯(cuò)誤
|-- package.json -- 項(xiàng)目配置文件，包管理、項(xiàng)目名稱、版本和命令文件
- .gitignore
- index.html
- package-lock.json
- package.json
- README.md
- vite.config.js
.gitignore是一個(gè)隱藏文件，用來配置Git版本管理工具需要忽略的文件或文件夾，在創(chuàng)建工程時(shí)，其默認(rèn)會(huì)配置好，將一些依賴、編譯產(chǎn)物、log日志等文件忽略，我們無需修改
package-lock.json：確保你項(xiàng)目中的依賴不會(huì)在你不知不覺中自動(dòng)升級(jí)
READEM.md是一個(gè)MarkDown格式文件，其中記錄了項(xiàng)目的編譯和調(diào)試方式。我們也可以將項(xiàng)目的介紹編寫在這個(gè)文件中。
vite.config.js：當(dāng)以命令方式運(yùn)行 vite 時(shí)，vite 會(huì)自動(dòng)解析項(xiàng)目根目錄下 vite.config.js 的文件。
文件夾
- node_moduls
- public
- src
- dist
node_moduls文件下存放的是NPM安裝的依賴模塊，這個(gè)文件夾默認(rèn)會(huì)被Git版本管理工具忽略，對(duì)于其中的文件，我們也無需手動(dòng)添加或修改
public文件夾用來放置一些公有的資源文件，例如網(wǎng)頁用的圖標(biāo)、靜態(tài)的HTML文件等
src是一個(gè)重要的文件夾，核心功能代碼文件都放在這個(gè)文件夾下，在默認(rèn)的模板工程中，這個(gè)個(gè)文件夾下還有assets和components兩個(gè)子文件夾，assets存放資源文件，components存放組件文件，
dist文件夾下存放打包后生成的文件（首次打包后才有此文件夾）
按照加載流程看一遍
index.html是我們的入口文件，這里掛導(dǎo)入了我們的main.js文件，
main.js中定義的根組件將掛載到id為“app”的div標(biāo)簽上（index.html），
單文件組件
將組件定義在單獨(dú)的文件中，以便于開發(fā)和維護(hù)
單文件組件通常需要定義3部分內(nèi)容，tamplate模板部分、script腳本代碼部分和style樣式代碼部分。
運(yùn)行
通過cmd打開控制臺(tái)，cd到我們的項(xiàng)目目錄，
cd my-vue-app執(zhí)行以下命令
npm run dev控制臺(tái)會(huì)輸出類似內(nèi)容
VITE v3.1.0 ready in 609 ms
? Local: http://127.0.0.1:5173/
? Network: use --host to expose將其中的網(wǎng)址在瀏覽器中打開，即可看到項(xiàng)目運(yùn)行的結(jié)果
此時(shí)，您可以正常的在項(xiàng)目中進(jìn)行代碼的編寫，瀏覽器端會(huì)自動(dòng)刷新并展示出您編寫代碼的效果。
若需停止此次運(yùn)行，可以同事按下Ctrl+c鍵，輸入Y再按下Enter鍵即可。
打包
通過cmd打開控制臺(tái)，cd到我們的項(xiàng)目目錄，
cd my-vue-app執(zhí)行以下命令
npm run build可以看到以下效果
打開我們項(xiàng)目下的dist目錄，可以看到打包好的文件
C:\Users\Administrator\my-vue-app\dist若想本地預(yù)覽打包好的文件有沒有問題，可以執(zhí)行以下命令
npm run preview現(xiàn)在，您可以將打包好的文件發(fā)給需要的人，
打包后的是純 html 文件，只需要一個(gè) web 環(huán)境就好了，不需要編譯了（nginx）
外面收到打包好的文件后，自己可以使用php_stydy創(chuàng)建網(wǎng)站服務(wù)，將打包好的文件放到網(wǎng)站根目錄即可。
自己啟動(dòng)一個(gè) node http 服務(wù)，node的server和express均可
