Vue3 -- 基于Vue3+TS+Vite项目【项目搭建及初始化】

兼容性注意： Vite 需要 Node.js 版本 18+ 或 20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。【摘抄自vite官网】

这里我用的node版本是 v18.20.2

创建项目：

创建项目我们可以使用npm、yarn、pnpm、bun

npm create vite@latest

yarn create vite

pnpm create vite

bun create vite

这里我要用pnpm！

使用 npm install -g pnpm 就可以全局安装pnpm哈小伙伴们
ok！

输入项目名字：

这里我输入的是 platform

选择框架：

我需要写的项目为vue3项目，所以我这里选择vue。【上下左右箭头的上下控制选择，然后回车】

选择语法：

该项目是基于vue3的，当然选择我们的官配–>TS闪亮登场！

这样一个项目就初步搭建好了，是不是很简单呢？
接着我们使用他的提示来运行项目：




在浏览器的效果如下：

查看项目：

从package.json文件中我们可以看到运行、打包命令；安装的依赖等相关内容。

vite 将静态页面放置在了根目录下面，而 vue cli 将静态页面放置在了 public 当中。

一般配置代理跨域在vite.config.js文件中

删除不必要文件：

1. 入口文件：main.ts删除style.css
   
   

2. 删除App.vue内部不必要内容
   

3. 删除component目录下的组件HelloWorld组件；

4. 删除里面的assets/vue.svg文件；
   
   tsconfig.app.json飘红的，关掉vscode重新打开就ok了。遇到飘红别心急，拍个照发个圈。保持好~ 心 ~ 态 ~（摆pose）
   于是你得到了一个非常干净的vue项目：【干净的像你和你女神的聊天框一样（邪恶的笑）】
   

.vscode文件作用：

难！道！真的！没有人！好奇过！.vscode 是揍嘛的吗？
没有好奇过的去站到墙边反思，学习不爱思考！！！

‌.vscode文件夹‌是Visual Studio Code（VSCode）编辑器的一种配置文件，主要用于自定义编辑器的行为、工作区设置以及特定语言的工作空间扩展。它通常出现在项目根目录下，包含多个配置文件，如settings.json、extensions.json、launch.json、tasks.json等，这些文件共同定义了项目的开发环境、调试配置、任务管理等‌。

好官方！好可怕！你36℃的文字怎么还是如！此！冷冰冰。ok~fine！看不懂没关系，反正偶尔用的也就是你最熟悉的settings.json。‌而settings.json‌是用来里存储项目级别的VSCode设置，覆盖用户级别的设置，如代码格式化工具、文件关联等‌。

博主有感而发：学习在于思考，没事多看官网

原文地址：https://blog.csdn.net/qq_53002037/article/details/143732633

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！