Vite

前端构建工具概述

前端构建工具是现代前端工程化的核心工具，用于将源代码（Vue/React/TS/LESS等）编译、打包、优化为浏览器可运行的静态资源，实现模块化管理、自动化处理与性能提升。

主要作用

编译转换：处理 ES6+、TypeScript、JSX、CSS 预处理器等
资源打包：合并、压缩 JS/CSS/图片等静态资源
模块管理：支持 ESM、CommonJS 等模块化规范
开发服务：提供本地服务、热更新 HMR、代理等能力
优化构建：Tree Shaking、代码分割、兼容处理、产物压缩

主流工具

Webpack：生态强大、配置复杂，适合大型项目，开发阶段需全量打包
Vite：基于原生 ESM + esbuild，启动快、热更新快，是现代框架首选
Rollup、Parcel、Turbo 等也属于常用构建/打包工具

核心价值

统一开发流程，提升开发效率，保障代码质量与线上运行性能，是现代化前端项目必不可少的基础设施。

Vite 概述

Vite 是一款面向现代前端工程的下一代构建与开发工具，由 Vue 作者尤雨溪主导开发，为 Vue、React 等框架提供高效的构建方案。

graph TD subgraph g1[开发源代码] A[JS/TS/Vue] B[CSS/SCSS] C[图片/字体] end D[前端构建工具]:::primary subgraph g2[构建输出结果] E[打包JS] F[压缩CSS] G[优化静态资源] end A --> D B --> D C --> D D --> E D --> F D --> G

其核心特性包括： - 基于原生 ES Module 实现极速冷启动，开发阶段无需全量打包 - 支持高效的热模块替换（HMR），代码修改后页面实时更新 - 生产环境采用 Rollup 进行打包，输出结构优化、体积更小 - 内置对 TypeScript、JSX、CSS 预处理器等的开箱即用支持 - 轻量化配置，兼顾开发体验与构建性能

Vite依赖Node.js，建议使用最新版本的Node.js。

Vite + Vue 3 Hello World

创建项目；在目标目录下创建项目目录 my-vue-hello。

# 创建项目
npm create vite@latest my-vue-hello -- --template vue

在浏览中访问默认HelloWorld页面（http://localhost:5173/）。

修改my-vue-hello/src/components/HelloWorld.vue为自己的HelloWorld组件。

<template>
  <div>
    <h1>Hello, Vue 3 + Vite!</h1>
  </div>
</template>

启动项目。进入项目目录 my-vue-hello，执行以下命令：
```
# 启动项目
npm run dev
```

Vite + Vue 3 + Element Plus Hello World

创建项目并安装依赖

# 创建 vite + vue 项目
npm create vite@latest my-element-app -- --template vue

cd my-element-app

# 安装依赖
npm install

# 安装 Element Plus
npm install element-plus

修改 src/main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

修改 src/App.vue

<template>
  <div class="app-container" style="padding: 30px;">
    <h1>Hello Element Plus</h1>

    <el-card style="max-width: 400px; margin-top: 20px;">
      <template #header>
        示例卡片
      </template>
      <p>这是基于 Vite + Vue 3 + Element Plus 的 Hello World</p>
      <el-button type="primary" @click="handleClick">
        点击我
      </el-button>
    </el-card>
  </div>
</template>

<script setup>
const handleClick = () => {
  alert('Hello World!')
}
</script>

启动项目
```
npm run dev
```

5.打开浏览器即可看到：

Element Plus 按钮
Element Plus 卡片
点击可弹出 Hello World