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中文网

相关文章
|
1月前
|
缓存 前端开发 JavaScript
Vite的原理
Vite的原理
22 0
|
2月前
VUE+Vite 搭建项目
VUE+Vite 搭建项目
|
5月前
|
存储 JavaScript 前端开发
搭建你的项目脚手架 —— vue3.x + typescript4.x + vite2.x + pinia2.x(二)
搭建你的项目脚手架 —— vue3.x + typescript4.x + vite2.x + pinia2.x
112 0
|
5月前
|
JavaScript 前端开发 开发工具
搭建你的项目脚手架 —— vue3.x + typescript4.x + vite2.x + pinia2.x(一)
搭建你的项目脚手架 —— vue3.x + typescript4.x + vite2.x + pinia2.x
80 0
|
5月前
|
前端开发 JavaScript 容器
Vite2 — 初体验
Vite2 — 初体验
51 0
|
5月前
|
资源调度 JavaScript
vite 教程
首先先介绍一下vite,vite这个名字起源于法语就是很快的意思。应为他是冷服务不打包 用es6 import 来引入对应 的js。其次就是使用rollup 去打包。开发中有热更新等。
110 0
vite 教程
|
8月前
|
JavaScript 前端开发
|
8月前
|
资源调度 前端开发 JavaScript
Vite教程 安装
Vite教程 安装
746 0
Vite教程 安装
|
10月前
|
JSON 资源调度 JavaScript
|
前端开发 JavaScript API
Vite学习(1)
最近前端团队升级了技术栈,开始使用vue3来开发新的需求。所以vue3的全家桶都要安排上了。今天先来学习一下全新的构建工具vite。
Vite学习(1)
http://www.vxiaotou.com