Vite 的学习笔记 | 青训营

Eren7Y琳
27 阅读4分钟

前言

在计算机专业的学习中，掌握知识点是至关重要的。然而，仅仅听课和阅读教材可能并不足以真正理解和应用所学的内容。在这个信息爆炸的时代，我们需要更加主动和高效地学习，以提升自己在计算机领域的竞争力。而实践记录和笔记，作为学习的得力助手，能够帮助我们更好地理解知识点，加深记忆，并提供一个有组织的学习框架。我们可以不断总结和反思，发现自己的不足之处，并逐步提升自己的学习能力和解决问题的能力~让我们一起开启笔记/实践记录的学习之旅吧！

image.png

Vite 的学习笔记

今天我们来学习和记录一下前端性能优化与调试技巧的实战内容，这篇文章记录学习的是前端 Vite 的内容。

关于 Vite

Vite是一个基于现代浏览器原生 ES 模块导入功能的轻量级开发服务器。它专注于快速的冷启动和实时的模块热更新，旨在提供极佳的开发体验和效率。

在传统的前端开发中，构建工具一般会将所有源代码转换成可以在浏览器中运行的静态资源，例如将 ECMAScript 6+ 代码转换成 ECMAScript 5 代码、将 SCSS 转换成 CSS，并将它们打包成一个或多个 Bundle 文件。每次修改代码后，整个项目都需要重新构建并重新加载页面，这造成了较长的构建时间和刷新开销。

Vite 采用了一种全新的开发方式。它利用现代浏览器原生支持的 ES 模块导入功能，通过按需编译和服务端渲染，将模块作为浏览器原生 ES 模块运行。这使得 Vite 在启动和热更新时非常快速。

关于 Vite 特点

Vite 的特点包括：

  1. 快速的冷启动：Vite 使用了真正的按需编译方式，仅在需要时编译单个文件，而不是整个项目。这大大缩短了启动时间，并避免了不必要的构建过程。
  2. 实时的模块热更新：Vite 在开发过程中，利用浏览器原生的模块热替换特性，实现了对模块的快速热更新。修改代码后，只有被修改的模块会被重新编译和重新加载，而不需要刷新整个页面。
  3. 原生 ES 模块支持：Vite 利用现代浏览器对 ES 模块的原生支持，不需要额外的打包步骤或构建工具，直接在浏览器中运行 ES 模块化的代码，提供了更快的加载速度和更好的兼容性。
  4. 开箱即用：Vite 内置了对常见前端框架（如 Vue、React）的支持，并提供了预配置的开发环境。只需几个简单的命令，即可创建并启动一个基于 Vite 的项目。
  5. 插件扩展：Vite 提供了插件系统，可以方便地扩展功能。你可以使用官方提供的插件或自定义插件来满足特定的需求，从而更好地适应你的项目。

Vite 入门代码案例

  1. 打开终端，使用以下命令安装 Vite：
npm init vite@latest my-app

这会创建一个新的目录 my-app，并根据提示选择所需的项目模板，例如 Vue、React、Vanilla JavaScript 等。

  1. 进入新创建的目录：
cd my-app
  1. 安装依赖并启动开发服务器：
npm install 
npm run dev

这将启动 Vite 开发服务器，并在浏览器中打开默认的开发页面。

接下来，演示一个简单的示例，展示如何使用 Vite 创建一个基于 Vue 的应用。

  1. 首先，确保已经按照上述步骤创建了一个 Vite 项目，并进入项目目录。
  2. 在终端中使用以下命令安装 Vue：
npm install vue@next
  1. 创建一个新的文件 App.vue，并添加以下代码：
<template>
	<div>
	  <h1>Hello Vite + Vue</h1>
	  <p>{{ message }}</p>
	</div>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		message: 'Welcome to Vite + Vue'
	  };
	}
  };
  </script>
  1. 打开 main.js 文件，删除原有的代码，并添加以下代码：
import { createApp } from 'vue'; 
import App from './App.vue'; 
createApp(App).mount('#app');
  1. 在浏览器中打开 index.html 文件，你将看到页面显示 "Hello Vite + Vue" 和 "Welcome to Vite + Vue"。

文章仅为个人学习笔记，如有错误，欢迎指正。

avatar
文章
阅读
粉丝