vite的介绍

Vite(法语意为 "快速的",发音 /vit/,发音同 "veet")是一种新型前端构建工具

优势

  • 💡 极速的服务启动,使用原生 ESM 文件,无需打包

  • ⚡️ 轻量快速的热重载,始终极快的模块热重载(HMR)

  • 🛠️丰富的功能,对 TypeScript、JSX、CSS 等支持开箱即用

  • 📦等等

为什么选 Vite ?

传统方式

  • 基于打包器的方式启动,必须优先抓取并构建你的整个应用,然后才能提供服务。

  • 更新速度会随着应用体积增长而直线下降。

vite 方式

  • Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作。

  • Vite 只需要在浏览器请求源码时进行转换并 按需提供源码

  • 根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。

Vite 的基本使用

vite快捷使用

如果想要快速创建一个vue3项目,可以使用如下命令

  • 创建普通vue项目yarn create vite vite-demo --template vue

  • 创建基于ts模板的项目 yarn create vite vite-demo-ts --template vue-ts

相关推荐
玫城9 小时前
[ VUE ] 封装通用数组校验组件,el-input内使用
前端·javascript·vue.js
弓.长.13 小时前
React Native 鸿蒙跨平台开发:实现一个多功能单位转换器
javascript·react native·react.js
南半球与北海道#13 小时前
前端打印(三联纸票据打印)
前端·vue.js·打印
摘星编程13 小时前
React Native for OpenHarmony 实战:ToggleSwitch 切换开关详解
javascript·react native·react.js
董世昌4113 小时前
深入浅出 JavaScript 常用事件:从原理到实战的全维度解析
前端
满栀58514 小时前
分页插件制作
开发语言·前端·javascript·jquery
qq_4061761414 小时前
深入剖析JavaScript原型与原型链:从底层机制到实战应用
开发语言·前端·javascript·原型模式
弓.长.14 小时前
React Native 鸿蒙跨平台开发:BottomSheet 底部面板详解
javascript·react native·react.js
开开心心_Every15 小时前
免费窗口置顶小工具:支持多窗口置顶操作
服务器·前端·学习·macos·edge·powerpoint·phpstorm
摘星编程15 小时前
React Native for OpenHarmony 实战:Permissions 权限管理详解
javascript·react native·react.js