一、Vite概念介绍
1.Vite是一个轻量级的现代化前端构建工具，主要用于快速构建现代化的Web应用程序。与传统的打包工具不同，Vite采用了一种基于ES模块的开发服务器和构建方式，利用浏览器原生的import机制实现了更快的冷启动和热更新。
2.Vite的核心思想是在开发阶段保持快速的开发体验，它通过将源代码直接提供给浏览器来避免了传统打包工具中的耗时打包过程。这使得Vite能够实现即时的模块热更新，减少了开发者在修改代码后需要等待重新打包的时间，大大提高了开发效率。
二、项目初始化
- 安装Vite：使用npm或yarn安装Vite。
npm init vite@latest my-vite-app --template vue # Vue项目模板
- 进入项目目录：进入刚创建的项目目录。
cd my-vite-app
- 安装依赖：安装项目所需的依赖。
npm install
- 启动开发服务器：启动Vite的开发服务器。
npm run dev
三、整体架构
Vite的整体架构分为两个主要部分：开发服务器和构建过程。
- 开发服务器：Vite使用基于ES模块的开发服务器来提供源码给浏览器。开发服务器使用原生的JavaScript模块导入语法，直接将源码发送到浏览器，不需要事先打包。
- 构建过程：在生产环境中，Vite会将代码构建为优化后的静态资源，以便更好地适应浏览器的加载和缓存机制。Vite利用Rollup进行构建，并支持对各种类型的文件进行处理，如JavaScript、TypeScript、CSS等。
- Scss&CSS的目录结构（以svg图片为例）
import {Header } from "./comments/Header";
import logoUrl from './logo/svg';
function App(){
return (
<div>
<Hearer />
<img src={logoUrl} alt="" />
</div>
);
}
export default App;
四、创建案例
下面用Vite创建一个Vue.js项目，包含一个消息和一个按钮，点击按钮会增加计数器的值。
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vite!',
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
</script>
<style>
button {
padding: 8px 16px;
font-size: 16px;
}
</style>
