创建 Vue 3 工程

一、创建工程的两种方式

创建 Vue 3 工程主要有两种方式。一种是使用 vue-cli，这是一个基于 webpack 的脚手架，能够帮助我们快速搭建 Vue 3 项目。

参考文档：

https://cli.vuejs.org/zh/guide/creating-a-project.html

另一种是使用 Vite，这是 Vue 官方新推出的构建工具，也是官方推荐用于创建 Vue 3 工程的方式。

https://cn.vuejs.org/guide/quick-start#creating-a-vue-application

二、Vite 的优势

Vite 与传统的 webpack 构建方式相比，有诸多优势。它轻量快速，热承载能力出色，能够急速启动服务。在执行项目启动时，Vite 的速度远超 webpack。此外，Vite 对 TypeScript（ts）、JSX 以及 CSS 等支持开箱即用，无需额外配置，即可直接编写 ts 代码。最重要的是，Vite 实现了真正的按需编译。

三、按需编译的原理

按需编译是 Vite 的一大亮点。我们可以通过对比 webpack 和 Vite 的构建流程图来理解这一概念。在 webpack 的构建流程中，从入口文件开始，需要先分析路由，再对每个模块进行处理，最后才能告知服务器准备就绪，整个过程较为耗时，尤其是当项目中的路由、模块和组件数量较多时，启动速度会变得非常慢。而 Vite 的流程则大为不同，它一上来就告知服务器已就位，项目启动。当从入口文件进入后，Vite 会根据你的需求即时处理相关模块，未被访问的部分则不会进行处理，这种方式大大提高了构建效率，类似于懒加载的机制，即用时再处理并展示。

四、创建 Vue 3 工程的具体步骤

（一）环境准备

在创建工程之前，需要确保电脑上已安装 Node.js 环境。如果没有安装，可以通过搜索 Node.js，找到中文网或官网进行下载安装。安装完成后，需要重启电脑。可以通过在命令行输入 node 来检测是否已成功安装 Node.js 环境，如果显示版本号则表示已安装，若提示不是内部或外部命令，则需安装 Node.js。

（二）执行创建命令

根据 Vue 官方文档，可以使用特定的命令来创建基于 Vite 的 Vue 3 项目。可以直接使用官方提供的命令，也可以从官网获取最新命令。在合适的目录下，右键打开终端，输入命令并回车执行。

这里我们使用Vite来创建

执行命令npm create vue@latest即可

（三）项目配置

在创建过程中，会有一些配置选项。项目名称需遵循一定原则，不能出现中文和特殊字符，建议使用纯小写字母、数字和下划线组合。接下来，会询问是否添加 TypeScript 支持，由于 Vue 3 拥抱了 TypeScript，因此建议选择“是”。对于是否添加 JSX 支持，这里选择“否”。关于是否配置路由环境，建议选择“否”，以便后续手动配置路由，更深入地学习。状态管理、单元测试、端到端测试以及 ESLint 语法检查等选项，根据实际需求选择，这里建议选择“否”，以便自由编写代码。

这样一个工程就创建完成了，接下来我们分析一下项目的工程

五、工程文件结构分析

（一）VS Code 插件

打开创建好的工程，建议使用 VS Code 进行开发。VS Code 对 Vue 3 有很好的支持，Vue 官方还针对 VS Code 出品了两个插件。如果 VS Code 未安装这些插件，会自动提示安装。

（二）文件夹和文件介绍

• .vscode文件夹：这里是vscode的插件的配置信息。

• json 文件：配置插件相关。

• public 文件夹：脚手架的根目录，包含页签图标等。

• src 文件夹：存放前端工程师的工作成果，如 .vue、.js、.css 等文件。

• .gitignore 文件：git 的忽略文件，不能删除。

• env.d.ts文件：这个文件不能删除，这个文件的作用是让ts认识你写的文件，写就是声明文件，如果标红的话通过npm i来安装依赖

• tsconfig.json 文件：让 TypeScript 认识各种文件，如图片、视频等，不能随意修改。

• index.html 文件：入口文件，对于 Vite 工程来说，入口文件是 index.html 而不是 main.js 或 main.ts。这里是引入main.ts main.ts支撑整个英语而运行。

• package.json 文件：包的管理文件，也称为依赖声明文件。这里有前端启动项目的短命令

• README.md 文件：对工程的简单介绍，可根据需要删除。

• tsconfig.*.json 文件：TS 的配置文件，需保留。

• vite.config.js 文件：整个工程的配置文件，后续会用到。

六、启动项目

拿到前端项目后，需查看 package.json 文件中的短命令，如 dev。通过执行 npm run dev 命令来启动项目。启动后，可在浏览器中查看项目效果。如果修改 index.html 文件中的内容，重新启动项目后，可在浏览器中看到修改后的效果。