vite安装及使用

没特殊要求的项目，还是怎么简单怎么来╮(╯▽╰)╭

一、Vite 基础知识

1. 什么是 Vite？

• Vite 是一个前端构建工具，专注于开发服务器速度和优化构建过程。
• 特点：
  • 快速冷启动：利用 ES 模块的原生支持，实现快速的开发服务器启动。
  • 即时热更新：在开发过程中，修改代码后可以立即看到效果，无需等待重新构建。
  • 高效的构建：使用 Rollup 进行生产构建，生成高效的打包文件。

2. Vite 的主要优势

• 快速开发：冷启动时间极短，开发体验极佳。
• 热模块替换（HMR）：代码修改后立即更新，无需刷新页面。
• 按需加载：仅在需要时加载模块，减少初始加载时间。
• 现代构建：利用现代浏览器特性，提供高效的构建和优化。

3. Vite 的工作原理

• 开发服务器：
  • 使用 ES 模块的原生支持，通过 HTTP 服务器提供模块。
  • 支持热模块替换（HMR），实现即时更新。
• 生产构建：
  • 使用 Rollup 进行代码打包。
  • 支持 Tree-shaking、代码分割等优化技术。

二、Vite 的安装和使用

1. 安装 Node.js

• Vite 需要 Node.js 环境，建议使用最新版本的 Node.js。

  # 检查 Node.js 版本
  node -v
  # 安装 Node.js：https://nodejs.org/
  

2. 创建 Vite 项目

• 使用 Vite CLI 创建项目：

  # 使用 npm
  npm init vite@latest my-vue-app --template vue# 使用 yarn
  yarn create vite my-vue-app --template vue
  

3. 安装依赖

• 进入项目目录并安装依赖：