青训营上课笔记
六.VIte
Vite是一种快速轻便的JavaScript构建工具，用于开发现代的Web应用程序。它的主要特点是快速的冷启动时间和即时的模块热更新。
1.安装Vite
npm init vite@latest my-app
cd my-app
npm install
2.启动Vite开发服务器
运行`npm run dev`命令会启动Vite的开发服务器，并自动打开一个浏览器窗口，显示开发界面。在开发服务器中，每个模块都会被自动编译和打包，并且支持模块热更新。
3.支持的语言
Vite支持使用JavaScript、TypeScript、CSS、HTML等多种语言进行开发。在开发服务器中，它会自动解析这些语言，并将其转换为浏览器可理解的格式。
4.构建生产版本
运行`npm run build`命令会构建一个生产版本的应用程序。Vite会对代码进行优化，并生成一个被压缩和分割的JavaScript包，以提高加载性能。
5.支持模块热更新
Vite支持模块热更新，它可以在开发过程中快速替换模块，无需刷新整个页面。这使得开发过程更加高效和快速。
6.零配置开发
Vite采用零配置的方式进行开发，意味着开发者无需在项目中创建或配置任何构建工具的配置文件。Vite会根据项目中的文件结构和依赖关系自动进行构建和打包。
7.插件生态系统
Vite有一个丰富的插件生态系统，可以帮助开发者扩展和定制开发工具的功能。开发者可以使用这些插件来优化代码、处理文件、添加特定功能等。
8.支持Vue和React
Vite原生支持Vue和React，并提供了官方的插件和模板，以便开发者可以更加方便地使用这些框架进行开发。
9.快速冷启动时间
Vite在开发服务器启动时具有极快的冷启动时间。这是因为Vite采用了按需编译的方式，只有在需要时才编译特定的模块，而不是像传统的打包工具一样，将所有模块都编译打包。
10.支持开发模式和生产模式
Vite支持在开发模式和生产模式之间进行切换。在开发模式下，Vite会启动一个快速的开发服务器，并提供模块热更新和调试功能。在生产模式下，Vite会进行代码优化和分割，以提高加载性能。
11.内置的开发服务器
Vite使用自己内置的开发服务器，而不是像其他构建工具一样依赖于打包工具。这使得开发服务器能够更快地编译和重新加载模块，并提供更好的开发体验。
12.高度可扩展
Vite的架构设计使得它非常可扩展。开发者可以根据自己的需求选择适合的插件，并且可以根据需要编写自定义插件来扩展Vite的功能。
13.集成测试
Vite支持集成测试，开发者可以编写测试用例，并使用各种测试工具（如Jest或Mocha）进行集成测试。
14.干净的错误日志
Vite的错误日志非常干净和易读，它会显示准确的错误信息，方便开发者快速定位并解决问题。
15.可配置的构建选项
尽管Vite是一个零配置的工具，但开发者仍然可以根据自己的需求进行一些配置。例如是否使用TypeScript、构建输出的路径等。
16.实例
a.安装Vite
// 在命令行中执行以下命令，安装Vite
npm init vite@latest my-vue-app
cd my-vue-app
npm install
b.启动开发服务器
// 执行以下命令，启动Vite的开发服务器,Vite会自动启动开发服务器，并在浏览器中打开项目。
npm run dev
c.创建Vue组件
// 在`src`目录中创建一个Vue组件，比如`HelloWorld.vue`文件，添加以下代码
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vite!'
}
}
}
</script>
<style>
.hello {
background-color: #eee;
padding: 20px;
text-align: center;
}
</style>
d.在主文件中引入组件
// 打开`src/main.js`文件，并修改其内容如下：
import { createApp } from 'vue'
import HelloWorld from './HelloWorld.vue'
createApp(HelloWorld).mount('#app')
e.在index.html中添加根节点
// 打开`public/index.html`文件，添加一个具有唯一ID的根节点
<body>
<div id="app"></div>
</body>
f.构建生产版本
// 执行以下命令，构建生产版本的应用程序
npm run build
g.查看构建结果
在项目根目录下会生成一个`dist`文件夹，其中包含生成的生产文件。可以通过在浏览器中打开`index.html`文件来查看构建结果。
