使用vite创建vue3工程
创始人
2025-05-29 14:13:06
0

定义

什么是vite?-----新一代前端构建工具

优势

  • 开发环境中,无需打包操作,可快速的冷启动---最牛的地方
  • 轻量快速的热重载(HMR)---一修改代码就局部刷新,webpack也具备,但vite更快
  • 真正的按需编译,不再等待整个应用编译完成

webpack与vite构建区别

webpack的工作模式:

进入入口文件-->分析路由-->分析模块-->然后将其进行打包---->最终才会提示服务器准备好了默认8080。

所以我们每次在npm run serve的时候等待的时间就是这个打包的时间

 vite的工作模式:

他一上来就是服务器已经准备好了,其实是一个空壳服务器,并没有将文件进行打包,几乎与webpack的流程反着来。然后当你发起一个请求的时候,他才会从入口文件进入-->接着找到对应的路由-->再去分析对应的模块,属于现用先分析的模式,动态引入和代码分割

利用vite创建vue3工程

npm init vite-app 你的工程名称

 若遇到npm info: node: --openssl-legacy-provider is not allowed in NODE_OPTIONS的话,就输入set NODE_OPTIONS="",可以解决,然后在进行npm等命令的操作就不会报错了。

 此时可以看到,创建的工程里面并没有node包

 需要我们手动npm i

我们启动项目 npm run dev

相当之快~

 

 今天这篇文章就粗略的讲了一下新一代构建工具vite和webpack的区别,及其它的优势。具体参数使用后续更新。

相关内容

热门资讯

中证A500ETF摩根(560... 8月22日,截止午间收盘,中证A500ETF摩根(560530)涨1.19%,报1.106元,成交额...
A500ETF易方达(1593... 8月22日,截止午间收盘,A500ETF易方达(159361)涨1.28%,报1.104元,成交额1...
何小鹏斥资约2.5亿港元增持小... 每经记者|孙磊    每经编辑|裴健如 8月21日晚间,小鹏汽车发布公告称,公司联...
中证500ETF基金(1593... 8月22日,截止午间收盘,中证500ETF基金(159337)涨0.94%,报1.509元,成交额2...
中证A500ETF华安(159... 8月22日,截止午间收盘,中证A500ETF华安(159359)涨1.15%,报1.139元,成交额...
科创AIETF(588790)... 8月22日,截止午间收盘,科创AIETF(588790)涨4.83%,报0.760元,成交额6.98...
创业板50ETF嘉实(1593... 8月22日,截止午间收盘,创业板50ETF嘉实(159373)涨2.61%,报1.296元,成交额1...
港股异动丨航空股大幅走低 中国... 港股航空股大幅下跌,其中,中国国航跌近7%表现最弱,中国东方航空跌近5%,中国南方航空跌超3%,美兰...
电网设备ETF(159326)... 8月22日,截止午间收盘,电网设备ETF(159326)跌0.25%,报1.198元,成交额409....
红利ETF国企(530880)... 8月22日,截止午间收盘,红利ETF国企(530880)跌0.67%,报1.034元,成交额29.0...