Vite学习(2)

简介: 最近前端团队升级了技术栈,开始使用vue3来开发新的需求。所以vue3的全家桶都要安排上了。今天先来学习一下全新的构建工具vite。

搭建第一个 Vite 项目

  • Vite 需要 Node.js 版本 >= 12.0.0。(Vite要求Node版本是大于12版本的

这里纠正一下版本,中文官网写12,英文官网写14,去github上看写14,当然高一点好,但不要最新)

  • 使用 NPM:image.png然后按照提示操作即可!还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + Vue 项目,运行:image.png执行完命令后就可以看到image.png按照操作执行之后查看文件就能看到生成的模板文件目录image.png然后再编辑器中打开工程文件查看代码,安装依赖image.png查看package.json文件image.png执行 npm run dev 启动程序image.png这启动程序给人的感觉就一个字 真快!.
  • index.html 与项目根目录

在一个 Vite 项目中,index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的:在开发期间 Vite 是一个服务器,而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析

与静态 HTTP 服务器类似,Vite 也有 “根目录” 的概念,即服务文件的位置,在接下来的文档中你将看到它会以 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析,因此你可以像在普通的静态文件服务器上一样编写代码(并且功能更强大!)。Vite 还能够处理依赖关系,解析处于根目录外的文件位置,这使得它即使在基于 monorepo 的方案中也十分有用。

Vite 也支持多个 .html 作入口点的 多页面应用模式。

参考

Vite中文网

相关文章
|
5月前
|
缓存 前端开发 JavaScript
Vite详解
Vite详解
100 3
|
前端开发 JavaScript 开发者
Vite前端构建工具详解
Vite 是一款新兴的前端构建工具,它的出现带来了前端开发体验的革命性变化。本文将介绍 Vite 的基本概念和核心特性,并通过代码实例来演示其强大功能。
163 0
|
前端开发 JavaScript API
Vite学习(1)
最近前端团队升级了技术栈,开始使用vue3来开发新的需求。所以vue3的全家桶都要安排上了。今天先来学习一下全新的构建工具vite。
Vite学习(1)
|
2月前
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
121 3
使用vite搭建一个React项目!真香!
|
2月前
|
JavaScript 前端开发
什么是前端构建工具?vite和vite脚手架的关系!
【8月更文挑战第1天】前端构建工具简析
57 4
|
4月前
|
存储 JavaScript 前端开发
vue 快速入门+vite前端构建工具
vue 快速入门+vite前端构建工具
67 0
|
5月前
|
JavaScript
Vite使用dayjs
Vite使用dayjs
82 0
|
缓存 前端开发 JavaScript
Vite的原理
Vite的原理
76 0
|
资源调度 JavaScript
vite 教程
首先先介绍一下vite,vite这个名字起源于法语就是很快的意思。应为他是冷服务不打包 用es6 import 来引入对应 的js。其次就是使用rollup 去打包。开发中有热更新等。
343 0
vite 教程