Vue 工程化开发（基于构建工具）：下一代的前端工具链 Vite 的安装及使用步骤

vite-show.pngVite官网：https://cn.vitejs.dev/

⚠️ 兼容性注意 本教程适用于新版本项目 Vue2、Vue3（*） 开发人群。
Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

准备工作

在安装使用 Vite 之前，请务必先确保环境的正确，需要安装以下工具：其中 Node.js 必须安装，其他可选

  • Node.js js 运行环境

  • nvm nodejs 管理工具

  • nrm 镜像管理工具

具体详细的配置请参考：Node 安装教程：安装配置 Node.js & 使用 nvm 管理多版本 Node 以及 nrm 镜像管理工具

Vite+Vue3 项目创建

可供参考的文章：手把手教你使用Vite创建Vue3项目

注意：不论是何种方式，一定要在自己欲创建项目目录的路径下执行此命令！

npm create vite@latest 创建，根据提示操作即可。

创建项目：

npm create vite@latest

启动项目：

npm run dev

以下为部分截图示例：