一施敢、初識 Vite+vue3+Ts+pinia
先初識吧，先獻(xiàn)上官網(wǎng)：
Vite中文網(wǎng)
Vue3中文網(wǎng)
pinia官網(wǎng) / pinia中文文檔
element-plus官網(wǎng)（PC UI庫）
Vant4官網(wǎng) （MB UI庫）
二关贵、相關(guān)環(huán)境安裝
基礎(chǔ)環(huán)境Node 16.8.0遇骑，這個(gè)就不說了吧。 沒有的可以去這里下載：阿里NODE下載鏡像地址
node -v // v16.8.0
npm -v // 7.21.0
// 安裝 vite
npm install vite -g
...
vite -v // vite/3.0.2 win32-x64 node-v16.8.0
// ----------------------------------------------------
// 安裝 vue/cli
npm install -g @vue/cli
...
vue -V // (注意這里是大V)@vue/cli 5.0.8
至此揖曾，基礎(chǔ)環(huán)境完畢落萎。下面開始構(gòu)建項(xiàng)目。
三炭剪、創(chuàng)建項(xiàng)目
沒啥好說的练链，跟著官方文檔走：
npm init vite@latest
Project name: cq-function
Select a framework: vue
Select a variant: vue-ts
Scaffolding project in ****\cq-function...
Done. Now run:
cd cq-function
npm install
npm run dev
到這里，項(xiàng)目安裝完畢奴拦，然后就讓你進(jìn)入了媒鼓。
cd cq-function
npm install
......// 經(jīng)過10來秒的等待
npm run dev
VITE v3.0.2 ready in 360 ms
? Local: http://127.0.0.1:5173/
? Network: use --host to expose
頁面就出來了，至此、初始+創(chuàng)建完事
image.png
PS：此時(shí)可以直接npm run build打包
踩坑：
如遇：'HelloWorld' is declared but its value is never read.Vetur(6133)
打開編輯器 設(shè)置-> 搜索vetur 找到下圖：取消打鉤就可以了
image.png
完成上面就可以進(jìn)行第二步開發(fā)了：
Vite+vue3+Ts+pinia實(shí)戰(zhàn)（二：路由绿鸣、pinia疚沐、UI庫安裝）
