搭建vite-vue3-ts项目，踩坑必看~

小鱼儿心语：宁愿做方向正确的乌龟，不做方向错误的兔子。

前两章的内容自认为是多余的，也可以算是我踩过的坑吧，着实困扰了我很久，但是现在是完全走出了泥潭，天无绝人之路吧，很长时间我都处在困顿当中，想到了各种原因各种办法，都无法成功解决，

• vite-vue3-ts项目运行后hmr热更新失效的问题；
• 搭建vite-vue3-ts项目的过程也十分的艰辛，一步错步步错；
• 还有搭建项目时的各种报错问题，有因为Program Files中间有空格报错，还有因为node版本过低报错，险些因为它们把重要文件夹名字改了，把node版本也改了，，不然会使之前的vue2.0旧项目运行报错；

这些都是我遇到的所有的坑，坑很深，怎么都爬不出来的那种，百度了不知道多少天，各种各样解决办法都去尝试，无奈还是不行，于是我让自己大脑冷静了一段时间，就在我不以为然的搜索着，咦，突然间的瞎猫碰上死耗子，就成功了，并且运行之后，hmr是有效的，当然了这也离不开很多天的搜索结果，反反复复搜索，好多命令都已经刻在了我的脑子里，接下来就跟大家好好讲讲我是怎么一步一步运行的~

直入主题：搭建vite-vue3-ts项目

npm install vite -g //首先全局安装vite，我是用的全局安装

npm install vite -D //局部安装也是可以的，看自身需求吧

首先打开要新建项目的文件夹地址
npm init vite
编辑好自己项目的名称，选择Vue，选择TypeScript即可

搭建vite-vue3-ts项目.png

搭建完成后我们就可以根据提示执行下一步命令：

• cd vite-project
• npm install
• npm run dev

hmr.png
可以看到运行成功后，修改/src/components/HelloWorld.vue页面可以及时热更新，hmr实时生效！
效果图是这样的：
vite+vue3.png
这就是很简单的一个搭建vite-vue3-ts项目的方法，可能不同电脑的配置各有不同，搭建的方式也会不同，可能会有不太适用的情况，这还需要小伙伴们根据自己电脑的情况来具体实现啦，总之呢不要放弃探索，一定会在某个时间点成功的，今天就分享这些吧~