隨著前端越來(lái)越卷，再加上2023年前端崗位越來(lái)越難找工作了，我也淪為了無(wú)業(yè)游民人員，這里還是需要提醒大家，千萬(wàn)不要裸辭，我的話，可能是因?yàn)檎娴睦哿讼胄菹⑿菹?，身體健康比什么都重要，看著招聘的信息不是需要react就是vue3+ts，或者就是需要你會(huì)源碼，甚至?xí)蠖说囊恍┘夹g(shù)，可能有些人會(huì)焦慮，但是不要焦慮，因?yàn)槟阋嘈?，你看了我寫的vue3+ts，手把手教你學(xué)會(huì)，你就多了一項(xiàng)技術(shù)。

新建vite項(xiàng)目

都說(shuō)天下武功唯快不破，所以要學(xué)習(xí)vue3+ts,那我們肯定是需要一些框架來(lái)快速搭建的，vite就非常的適合。

vite的優(yōu)勢(shì)：
1、極速的服務(wù)啟動(dòng)
2、輕量快速的熱重載
3、豐富的功能
4、優(yōu)化的構(gòu)建
5、通用的插件
6、完全類型化的API

指令：npm init vite

當(dāng)然如果不愿意使用vite，單用vue的創(chuàng)建方法也是可以的
指令：vue create 'xxxx'
配置的話，選擇vue3相關(guān)的就行，當(dāng)然這篇文章主要是講vite，所以對(duì)于vue自身的創(chuàng)建方法我就不詳細(xì)講了。（看大家的需要，有需要的話，請(qǐng)留言）

創(chuàng)建完成之后的操作

1、npm install下載依賴
2、npm run dev啟動(dòng)項(xiàng)目

package.json相關(guān)知識(shí)點(diǎn)

ps:并不會(huì)詳細(xì)的介紹里面全部知識(shí)點(diǎn)，挑重點(diǎn)的講

dependencies

dependencies表示生產(chǎn)依賴

devDependencies

devDependencies表示開(kāi)發(fā)依賴

scripts

npm run dev 開(kāi)發(fā)環(huán)境下的啟動(dòng)命令
npm run build 打包命令
npm run preview 啟動(dòng)提供預(yù)覽的服務(wù)器(預(yù)覽的事打包的效果)

打包的時(shí)候，我們會(huì)注意dist文件里面，文件名都會(huì)帶上一串?dāng)?shù)字或者字母，有了解過(guò)的小伙伴一定知道，那就是md5加密，只要你修改了重新打包就會(huì)變，瀏覽器發(fā)現(xiàn)不是一樣的文件呢，就會(huì)進(jìn)行重新加載，而不是緩存。

npm run preview這個(gè)指令，大家可能也不太常用，當(dāng)打包的dist文件需要進(jìn)行預(yù)覽的話，就會(huì)使用這個(gè)指令，執(zhí)行指令就會(huì)開(kāi)辟一個(gè)新的地址給你。當(dāng)然了，前提條件是不要忘記先打包，在查看。