小鱼儿心语:宁愿做方向正确的乌龟,不做方向错误的兔子。
前两章的内容自认为是多余的,也可以算是我踩过的坑吧,着实困扰了我很久,但是现在是完全走出了泥潭,天无绝人之路吧,很长时间我都处在困顿当中,想到了各种原因各种办法,都无法成功解决,
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
即可
搭建完成后我们就可以根据提示执行下一步命令:
cd vite-project
npm install
npm run dev
可以看到运行成功后,修改
/src/components/HelloWorld.vue
页面可以及时热更新,hmr实时生效!效果图是这样的:
这就是很简单的一个搭建vite-vue3-ts项目的方法,可能不同电脑的配置各有不同,搭建的方式也会不同,可能会有不太适用的情况,这还需要小伙伴们根据自己电脑的情况来具体实现啦,总之呢不要放弃探索,一定会在某个时间点成功的,今天就分享这些吧~