第一式 创建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文件需要进行预览的话,就会使用这个指令,执行指令就会开辟一个新的地址给你。当然了,前提条件是不要忘记先打包,在查看。

你可能感兴趣的:(第一式 创建vite项目以及package.json介绍)