vite项目踩坑日记(一)

158 阅读2分钟

我正在参与掘金创作者训练营第5期, 点击了解活动详情

前言: 最近工作要求做一个h5页面。一个全新的模块,于是我有了一个大胆的想法,在询问了公司前端负责人后,我决定采用最新的技术搭建这个新系统的框架~没错,你们猜对了,就是

  • vue3.2
  • vite2.x
  • pinia
  • ts

搭建的项目!

说实话,内心慌得一批,压根没啥经验~废话不多说了,上代码!

第一步初始化安装

  兼容性注意
  Vite 需要 [Node.js](https://nodejs.org/en/ "Node.js") 版本 >= 12.0.0 !!!

使用 NPM:

npm init vite@latest

我当时使用这个命令的时候安装的是2.9.9版本的vite,现在大家安装可能就是3.0版本的vite了吧

image.png

  • 我们起一个名称

image.png 注意: 因为我是vue项目,这里的我们选择vue版本,vite默认创建的是vue3.0的版本

第二步: 继续选择vue版本

image.png 因为我用到了ts所以我选择vue-ts

image.png 这样我们就创建好我们的vite项目了

image.png

这个时候虽然项目初始化完成了,但是没有下载依赖包。需要在你当前项目文件目录中下载所需要的依赖包,如下图展示:

image.png

启动命令方式: image.png

  • 启动后得到页面: image.png

总结: 最后整个项目算是跑起来了,这里还有一点需要说明,整个项目会通过vite创建但是并不会安装对应的包文件,所以需要自己通过npm去下载nodemodules的包,或者通过pnpm下载包,这里我就是通过pnpm下载的,不得不说,vite启动是相当的快啊~

最后,vite相关系列的文章会继续更新,如有不同意见的小伙伴可以在评论区留言,大家一起讨论,学习呀~ (如果觉得本篇文章对您有帮助请一键三连给个小星星多多支持支持呀~)