安裝環(huán)境，打開(kāi)命令行（win+r）
node -v
14.15.1
npm -v
6.14.8
安裝v3腳手架
npm install -g @vue/cli
//卸載Vue3腳手架
npm uninstall @vue/cli -g
查看vue版本
vue -V
@vue/cli 5.0.8
安裝vite
npm install vite –g
查看vite版本
vite -v
vite/2.9.14 win32-x64 node-v14.15.1
vue3+vite創(chuàng)建項(xiàng)目
Vite
Vite 是一個(gè) web 開(kāi)發(fā)構(gòu)建工具，由于其原生 ES 模塊導(dǎo)入方式，可以實(shí)現(xiàn)閃電般的冷服務(wù)器啟動(dòng)。
通過(guò)在終端中運(yùn)行以下命令，可以使用 Vite 快速構(gòu)建 Vue 項(xiàng)目。
使用 npm：
# npm 6.x
$ npm init vite@latest <project-name> --template vue
# npm 7+，需要加上額外的雙短橫線
$ npm init vite@latest <project-name> -- --template vue
$ cd <project-name>
$ npm install
$ npm run dev
創(chuàng)建啟動(dòng)demo項(xiàng)目
npm init vite@latest demo --template vue
$ cd demo
$ npm install
$ npm run dev
這邊有人會(huì)奇怪，vite不是冷加載很快嗎為什么安裝依賴(lài)還是和以前一樣啊，不是一回事哈，不要混淆。我們可以看到啟動(dòng)項(xiàng)目非常的快，這里vite就是按需加載和webpack有不一樣，我這里用了352ms就啟動(dòng)了。這里我們發(fā)現(xiàn)不再是我們熟悉的8080端口了而是3000端口
接下來(lái)發(fā)現(xiàn)network不是ip+端口號(hào)，而是出現(xiàn)了Network: use --host to expose，說(shuō)明無(wú)法通過(guò)ip+端口號(hào)訪問(wèn)到我們頁(yè)面
不要慌，下面來(lái)講。我們先打開(kāi)vscode，你們隨意
可以看到目錄結(jié)構(gòu)和之前還是有區(qū)別的，首先我們的入口頁(yè)index.html不在當(dāng)在public中了，其次就是不再是vue.config.js換成了vite.config.js，都是一些配置項(xiàng)，上面提到我們不能通過(guò)ip打開(kāi)，我們就可以在這里配置
vite.config.js配置server
