Vite4的使用非常简单，以下是一个基本的入门指南，帮助你开始使用Vite4进行前端开发：
1. 安装 Vite
首先，你需要确保你的系统上安装了Node.js（版本12.0.0或更高）。然后，可以使用以下命令全局安装Vite：
npm install -g vite
2. 创建项目
Vite 提供了一个创建项目的简便命令。你可以使用以下命令创建一个新的 Vite 项目：
npm init vite@latest
这条命令会引导你通过一系列的交互提示来设置项目。你可以指定项目名称、选择模板等。
3. 安装依赖
进入到你创建的项目目录并安装依赖：
cd my-vite-project
npm install
4. 启动开发服务器
在项目目录中，运行以下命令启动开发服务器：
npm run dev
默认情况下，开发服务器会在 http://localhost:5173 上运行。你可以在浏览器中打开这个地址，查看你的应用。
5. 项目结构
一个典型的 Vite 项目目录结构可能如下：
my-vite-project/
├── index.html
├── package.json
├── src/
│ ├── main.js
│ └── App.vue
└── vite.config.js
6. 配置 Vite
你可以在 vite.config.js 文件中配置 Vite。一个简单的配置示例如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 3000
}
})
7. 使用插件
Vite 支持各种插件来扩展其功能。比如，如果你在使用 Vue.js，你可以使用 @vitejs/plugin-vue 插件。插件通常在 vite.config.js 文件中配置。
8. 构建生产版本
当你准备将应用部署到生产环境时，可以使用以下命令构建生产版本：
npm run build
这将生成一个 dist 目录，包含构建后的文件。
示例项目
以下是一个使用 Vite4 和 Vue.js 的简单示例：
- 创建项目：
npm init vite@latest my-vite-vue-project --template vue
cd my-vite-vue-project
npm install
- 启动开发服务器：
npm run dev
- 编辑
src/App.vue文件：
<template>
<div id="app">
<h1>Hello Vite + Vue!</h1>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style scoped>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
通过上述步骤，你可以快速启动并运行一个基于 Vite4 的前端项目。Vite 的文档也非常详细，建议你在开发过程中参考 Vite 官方文档 以获取更多信息和高级配置。
