Vue 项目构建

vite 脚手架工具介绍

vite 是一个新型的前端构建工具，旨在提高及其快速的开发体验，主要用于构建现代化的 Web 应用程序。

vite 的中文官网：https://cn.vitejs.dev/

vite 组成

它主要由两个组成部分，开发服务器和构建指令。

开发服务器：提供实时的开发环境，方便及时查看代码变化，默认端口是5173。
构建指令：用于将开发中的代码转换、优化和打包，以便于在生产环境中部署。

vite 的特点

快速启动服务：利用原生 ES 模块的加载器，使用按需编译的方式，可以快速启动项目。
即使热更新：修改代码后，可以及时看到最新的效果，无需手动刷新。
内置开发服务器：自带开发服务器，支持自动路由、API代理等功能，简化了开发流程。
强大的插件系统：提供了丰富的插件系统，允许开发者根据需求扩展其功能。

vite 为前端开发提供了一种快速且高效的体验，特别是在大型项目或者需要高度优化的场景下，展现出了明显的优势。

安装 node.js

创建项目需要 node.js 环境，请确保您已有的版本 >= 16.0

官网地址：https://nodejs.org/en

进入官网下载最新版本的 node.js，下载完成之后双击安装包进行安装，可自定义路径。

环境变量配置

在安装时勾选 Add to PATH 安装后会自动配置系统环境变量。

检验是否环境配置成功，在命令行输入如下命令：

# 成功展示版本即为配置成功
node -v
npm -v

如若配置失败，可尝试手动配置环境，将安装路径添加至环境配置中即可。

创建项目

前提：已安装 16.0 或更高版本的 Node.js

使用 vite 初始化vue项目，在一个空目录执行：npm create vue

输入项目名称，选项均选否。

执行结果如下图所示，此时已成功创建项目。

启动服务

推荐直接使用 vscode 打开项目，使用 terminal 执行以下步骤，或者进入项目根目录下执行。

首先需要安装依赖，执行以下命令进行安装：npm install

安装完成之后会展示添加的依赖数量，证明安装成功，例如：added 25 packages in 2m

启动开发服务器，成功启动效果如下所示：npm run dev

访问在线项目：http://localhost:5173/

至此，vite 创建项目以及启动服务均已完成。

项目结构

使用 vite 创建的项目默认包含以下模块，具体作用如下：

node_modules：依赖库。
public：静态资源。
src：组件源码。
- index.html：首页
- assets：资源（图片）。
- components：存放公共组件的地方。
- App.vue：根组件。
- main.js：Vue 项目入口。
package-lock.json：依赖的详细信息。
package.json：包依赖文件。
vite.config.js：vite的配置信息。

代码执行流程

在典型的 Vue 项目中，大部分的逻辑和代码都集中在 src 目录下。启动服务后，所呈现的页面也是在这个目录中生成的。

生成逻辑如下图所示：

Vite 在启动服务后，会从入口文件开始解析。通常情况下，main.js 文件负责挂载一个 Vue 实例，该实例在 index.html 中定义。除此之外，main.js 也会导入根组件 App.vue 以渲染具体的页面内容。根组件中可能引用了项目所需的其他子组件。这就是 Vite 解析 Vue 项目启动时的流程。

总结

本节介绍了 vite 脚手架工具，以及如何使用 vite 创建一个 vue 项目，并阐述了vue项目的结构和构建流程。