vite初体验

vite 是什么

vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具,它具有以下特点:

1.快速的冷启动

2.即时的模块热更新

3.真正的按需编译

Vite介绍

Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。同时不仅有 Vue 文件支持,还搞定了热更新,而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。

英文文档

中文文档

GitHub

搭建第一个 Vite 项目

兼容性注意

Vite 需要Node.js版本 >= 12.0.0。

使用 NPM:

npm init @vitejs/app

使用 Yarn:

yarn create @vitejs/app

通过如下命令搭建

npm init vite-app

cd

npm install

npm run dev

搭建后的项目目录结构如下:

因为 Vite 是一个基于原生 ESM 的开发服务器,所以可以看出是秒启动的。

初始化搭建的demo也比较简单

看下package.json里的代码:

{

"name": "vite-app",

"version": "0.0.0",

"scripts": {

"dev": "vite",

"build": "vite build"

},

"dependencies": {

"vue": "^3.0.4"

},

"devDependencies": {

"vite": "^1.0.0-rc.13",

"@vue/compiler-sfc": "^3.0.4"

}

}

可以看出vite 是和 vue 3 搭配使用的。

vue 3 无论性能、包大小还有 ts 加持方面,vue 3 都远优于 vue 2的。 

而build的过程,是利用 Rollup 进行构建的。


原文链接:https://jue.leheavengame.com/article/6056e7cb937a725c2e4019c2

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 练气第28天感悟,感觉左脚没那么麻了,刚开始练气的时候,不仅心里很烦躁而且左脚也麻得厉害,背部也很胀痛,很难受,坚...
    心随意动0808阅读 1,346评论 0 1
  • 下了个一手服装的软件,每天起早贪黑的在网页上逛哒,总觉得有半数以上的衣服自己穿了都能演绎出俊逸脱俗的气质。。。落...
    拈花飞天阅读 761评论 0 1
  • 非常感恩。最近有许多友友把自己写的稿子发给我,请我修改、提建议…… 看到友友们这样抬举我,承蒙友友们的厚爱...
    美丽蒙恩阅读 2,463评论 0 12
  • 使用你的第一天 今天做了教知的模拟的三四套卷子,重新修正了简答题 许多知识不复习就会忘记 明天整理下美术课程标准~...
    充能柚子i阅读 1,216评论 0 0
  • 大学生活是怎样?可能是诗意,也可能是失意...... 军训篇:大一新生刚刚结束军训,可能军训磨练了他们的品...
    去图书馆好运来阅读 4,423评论 0 17

友情链接更多精彩内容