vite 开发与学习

简介: vite 开发与学习

现在的前端太卷了

啥都要学

不废话了 开始学习vite:

先复制一些vite的特点和使用原因:

(复制自胖哥的博客.. http://jspang.com/detailed?id=66

Vite这个单词是一个法语单词,意思就是轻快的意思。

它和我们以前使用Vue-cli的作用基本相同,都是项目初始化构建工具,

相当于Vue项目构建的第二代产品,当然它也包含了项目的编译功能。

需要注意一下Vite的生产环境下打包是通过Rollup来完成的,

Rollup是JavaScriptd的模块bundler(打包器),可以将一小段代码编译为更大或更复杂的内容,例如库或应用程序。

也就是说Vite提供的是开发环境中的编译,打包工作是依靠的Rollup。

Vite特性介绍

Vite主打特点就是轻快冷服务启动。冷服务的意思是,在开发预览中,它是不进行打包的。

开发中可以实现热更新,也就是说在你开发的时候,只要一保存,结果就会更新。

按需进行更新编译,不会刷新全部DOM节点。这功能会加快我们的开发流程度。

当然Vite和Vue-cli还有很多不同的地方,如何理解这种不同那?Vite属于第二代升级产品,这就好比你去红浪漫,有你熟悉的姑娘,这非常好,当然轻车熟路。但是来了年轻漂亮的新菇娘,在我们钱包允许的情况下,都会选择尝试体验的。

说实话,我工作中也没有使用Vite,但是我自己的项目中,我愿意尝试这种新的东西。目前Vite还是属于Beta版本,官网Github虽然说在不久就会升级为正式版,但我对尤雨溪团队的理解,这个不久至少在半年以上。

所以自己学习,自己使用没有问题,工作中尽量不用太新的技术,我是吃过亏的。

看了胖哥的视频大多是讲直接搭建vue和react的直接的开发环境的

类似于vue-cli / creact-react-app

没有其它很特殊的地方:

直接写一下构建命令吧:

vite 构建vue版本:
npm init vite-app
cd
npm install
npm run dev
复制代码
vite 构建react版本
npm init vite-app --template react
npm install
npm run dev
复制代码
由于此篇文章的学习目的是vite的配置相关

后面的内容会更新一些配置相关的内容:

后续会更新

参考文档:https://vitejs.cn/guide/

相关文章
|
9月前
|
前端开发 JavaScript 开发者
Vite前端构建工具详解
Vite 是一款新兴的前端构建工具,它的出现带来了前端开发体验的革命性变化。本文将介绍 Vite 的基本概念和核心特性,并通过代码实例来演示其强大功能。
128 0
|
前端开发 JavaScript API
Vite学习(1)
最近前端团队升级了技术栈,开始使用vue3来开发新的需求。所以vue3的全家桶都要安排上了。今天先来学习一下全新的构建工具vite。
Vite学习(1)
|
2天前
|
存储 JavaScript 前端开发
vue 快速入门+vite前端构建工具
vue 快速入门+vite前端构建工具
7 0
|
1月前
|
资源调度 JavaScript 前端开发
Vite:下一代前端构建工具的快速上手
Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具,它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能,提供了几乎即时的开发环境启动速度和高度优化的开发体验。
46 2
|
1月前
|
资源调度 JavaScript Linux
VueCLI:Vue项目脚手架与构建工具技术详解
【4月更文挑战第24天】VueCLI是Vue.js官方的项目脚手架,简化创建与配置,提供丰富的插件系统,支持全生命周期功能,如代码编译、打包部署。它具有易于配置、跨平台支持等优势。通过安装、创建项目、运行及构建命令,开发者能快速搭建Vue应用。VueCLI允许自定义配置(vue.config.js)和安装各类插件,如vue-router、vuex,以适应不同项目需求,提高开发效率。
|
前端开发 JavaScript 开发者
前端工程化构建工具之Grunt
在前端工程化构建工具中,Grunt是一个非常流行的开源工具。
117 0
|
JavaScript 前端开发
Vite学习(2)
最近前端团队升级了技术栈,开始使用vue3来开发新的需求。所以vue3的全家桶都要安排上了。今天先来学习一下全新的构建工具vite。
Vite学习(2)
|
资源调度 JavaScript
vite 教程
首先先介绍一下vite,vite这个名字起源于法语就是很快的意思。应为他是冷服务不打包 用es6 import 来引入对应 的js。其次就是使用rollup 去打包。开发中有热更新等。
304 0
vite 教程
|
JSON 数据格式
脚手架开发入门
# 引言 今天和大家一起学习一下开发一个脚手架工具,作为我们初始化项目使用,因为我们组件库开发已经接近尾声了,接下来我们想除了正常通过npm下载引入配置之余,能提供一种更方便的模板初始化的途径,现在就让我们一起学习一下如何开发一个脚手架工具吧。 # 初始化 首先我们初始化一个node项目,创建一个空文件夹,然后我们打开终端控制台,输入如下内容`npm init -y`。初始化一个`package.json`文件,我们默认初始化的文件是这样的: ``` { "name": "demo-cli", "version": "1.0.0", "description": "",
|
前端开发 JavaScript 容器
Vite2 — 初体验
Vite2 — 初体验
185 0