第一式 创建vite项目以及package.json介绍

随着前端越来越卷，再加上2023年前端岗位越来越难找工作了，我也沦为了无业游民人员，这里还是需要提醒大家，千万不要裸辞，我的话，可能是因为真的累了想休息休息吧，身体健康比什么都重要，看着招聘的信息不是需要react就是vue3+ts，或者就是需要你会源码，甚至会后端的一些技术，可能有些人会焦虑，但是不要焦虑，因为你要相信，你看了我写的vue3+ts，手把手教你学会，你就多了一项技术。

新建vite项目

都说天下武功唯快不破，所以要学习vue3+ts,那我们肯定是需要一些框架来快速搭建的，vite就非常的适合。

vite的优势：
1、极速的服务启动
2、轻量快速的热重载
3、丰富的功能
4、优化的构建
5、通用的插件
6、完全类型化的API

指令：npm init vite

当然如果不愿意使用vite，单用vue的创建方法也是可以的
指令：vue create 'xxxx'
配置的话，选择vue3相关的就行，当然这篇文章主要是讲vite，所以对于vue自身的创建方法我就不详细讲了。（看大家的需要，有需要的话，请留言）

创建完成之后的操作

1、npm install下载依赖
2、npm run dev启动项目

package.json相关知识点

ps:并不会详细的介绍里面全部知识点，挑重点的讲

dependencies

dependencies表示生产依赖

devDependencies

devDependencies表示开发依赖

scripts

npm run dev 开发环境下的启动命令
npm run build 打包命令
npm run preview 启动提供预览的服务器(预览的事打包的效果)

打包的时候，我们会注意dist文件里面，文件名都会带上一串数字或者字母，有了解过的小伙伴一定知道，那就是md5加密，只要你修改了重新打包就会变，浏览器发现不是一样的文件呢，就会进行重新加载，而不是缓存。

npm run preview这个指令，大家可能也不太常用，当打包的dist文件需要进行预览的话，就会使用这个指令，执行指令就会开辟一个新的地址给你。当然了，前提条件是不要忘记先打包，在查看。