Vite构建项目记录

背景

微信推送了一些公众号文章,所 vite 已经跟新到 v6 版本了,于是构建一个 vite 项目看下啥变化

过程

直接打开 https://vite.dev/ 官网,切换问中文语言,找到此处 https://cn.vite.dev/guide/#scaffolding-your-first-vite-project 文档告诉我们,直接执行

npm create vite@latest
// 之前记得文档让执行
npm create vite
// 不过个人理解, vite 肯定是想推广他的新版本,那就索性带上 latest 吧

随后按照提示,一步步来,如下

vite 初始化项目截图

上面基本就是构建完了,在 vscode 中打开效果如下:

vite构建完项目后预览图

这个目录解构感觉给 v5 版本差不多。


随后又初始化一个项目,这次是自定一些选项,过程如下:

执行 npm-create-vite过程图

这次构建时,选择提示用户的交互模式构建的。选择了 vue-router、pinia、prettier 等。目录解构如下:

选择了一些依赖包后构建效果图

这个目录解构确实是给上面的对比是有一些区别的。其中默认安装了一个插件,vueDevTools ,在 vite.config.ts 中有体现,页面表现效果如下:

vueDevTools表现效果

不过我们不喜欢可以删除之!如下:

删除vueDevTools

posted on   天空蓝~  阅读(79)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek-R1本地部署如何选择适合你的版本?看这里
· 开源的 DeepSeek-R1「GitHub 热点速览」
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 揭秘 Sdcb Chats 如何解析 DeepSeek-R1 思维链
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示