1.4 使用Vite创建Vue 3项目
大家好，今天我们将一起学习如何使用 Vite 创建一个 Vue 3 项目。Vite 是一个现代的前端构建工具，它以极快的速度提供了丰富的功能，如模块热替换（HMR），能够即时更新模块，而无需重新加载页面或清除应用程序状态。
什么是 Vite
首先，让我们简单了解一下 Vite。Vite 读作 /vit/，是一个轻量级的前端构建工具，它特别为现代 web 应用设计。与以往的构建工具不同，Vite 在开发环境下使用原生 ES 模块导入，这样可以跳过打包过程，实现快速的冷启动和热更新。
Vite 的优点
- 快速启动：Vite 在启动时只加载项目入口文件，而不是整个项目，这大大加快了启动速度。
- 模块热替换：Vite 提供了快速的 HMR，能够即时更新代码，而不需要重新加载页面。
- 按需加载：Vite 支持 ES 模块的动态导入，可以实现按需加载资源，减少首屏加载时间。
- 易于配置：Vite 默认配置简单，但同时也提供了丰富的插件系统，可以根据需要进行扩展。
注意事项
使用 Vite 前，请确保你的 Node.js 版本至少为 14.18。部分模板可能需要更高版本的 Node.js。此外，如果你使用的是 Windows 操作系统，建议使用 Windows 10 或更高版本，以获得最佳体验。
创建 Vue 3 项目
现在，让我们开始创建一个 Vue 3 项目。
手动创建项目
- 安装 Vite：我们可以使用 npm 或 yarn 来创建项目。对于 npm 用户，可以使用命令
npm create vite@latest，而对于 yarn 用户，可以使用yarn create vite。 - 设置项目名称：在创建过程中，系统会提示你输入项目名称，例如
vite-project。 - 选择框架和变体：选择 Vue 作为框架，并选择 JavaScript 或 TypeScript 作为语言。
- 完成项目创建：按照提示完成项目创建后，进入项目目录，安装依赖，并启动项目。
通过模板自动创建项目
如果你想要快速开始，可以使用 Vite 提供的模板。以下是使用 yarn 创建一个基于 Vue 3 的 Vite 项目的命令：
yarn create vite hello-vite --template vue
启动项目
- 安装依赖：进入项目目录，执行
yarn命令安装所有依赖。 - 启动服务：使用
yarn dev命令启动开发服务器。 - 访问项目：在浏览器中访问
http://localhost:5173，你将看到 Vue 应用的首页。
Vue 3 项目目录结构
创建项目后，你会看到一个清晰的目录结构，包括 src、public、node_modules 等目录，以及 package.json、vite.config.js 等配置文件。
Vue 3 项目运行过程
项目运行过程
当你执行 yarn dev 命令时，Vite 会启动一个开发服务器，并通过 src/main.js 文件将 src/App.vue 组件渲染到 index.html 文件的指定区域。
项目关键文件
src/App.vue：项目的根组件，可以引用其他组件。index.html：页面的入口文件，预留了 Vue 应用实例控制的区域。src/main.js：项目的入口文件，用于创建 Vue 应用实例。
通过今天的学习，你应该能够掌握如何使用 Vite 创建并启动一个 Vue 3 项目。Vite 的高效和易用性，相信会为你的前端开发带来极大的便利。
原文地址：https://blog.csdn.net/howard2005/article/details/142856945
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！