Vue.js 3.x 必修课｜003｜创建基于Vite的Vue3项目

本文链接：https://blog.csdn.net/weixin_42539021/article/details/140826838

欢迎关注公众号：CodeFit。

创作不易，如果你觉得这篇文章对您有帮助，请不要忘了点赞、分享和关注，为我的 持续创作 提供动力！

欢迎订阅《Vue 3.x 必修课｜2024》：http://t.csdnimg.cn/hHRrM

精品内容，物超所值，一杯咖啡的价格（9.9 元）只为持续创作提供动力。

1. 前言

最新的官方推荐方法是使用 create-vue，这是 Vue 官方的项目脚手架工具。
创建项目的命令和以前略有变化。现在推荐使用：
```
npm create vue@latest
```
这个命令会启动一个交互式的过程，让你选择项目的配置，包括是否使用 TypeScript、是否使用 Vite 等。
Vite 是 Vue3 项目的推荐构建工具，不了解的同学可以查看后面的补充内容。

2. 环境搭建：使用 create-vue 创建 Vue3 + TypeScript 项目

现在开始介绍如何使用最新的官方推荐方法创建一个 Vue3 + TypeScript 项目。

我们将使用 create-vue，这是 Vue 官方的项目脚手架工具，它默认使用 Vite 作为构建工具。

2.1 前置要求

确保你的系统中已安装：

Node.js（推荐 v18 或更高版本）
npm（通常随 Node.js 一起安装）、yarn 或 pnpm

以 Node.js 自带的 npm 举例，通过以下命令检查版本：

node --version
npm --version

运行结果：

当前 Node.js 的长期支持（LTS）版本的情况（截至本文更新 202407）：

Node.js 20.x 是最新的 LTS 版本，代号为 “Iron”。
Node.js 18.x 也是一个活跃的 LTS 版本。

另外，在 Node.js 中，偶数版本（如 18.x, 20.x）通常是 LTS 版本。

2.2 具体步骤

步骤 1：创建项目

打开终端。
运行以下命令：
```
npm create vue@latest
```
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
如果你第一次运行，那么会提示安装 create-vue

输入 y 后，你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，如下：
- Project name （项目名称）
- Add JSX Support? （是否添加 JSX 支持）
- Add Vue Router for Single Page Application development? （是否添加 Vue Router）
- Add Pinia for state management? （是否添加 Pinia 状态管理）
- Add Vitest for Unit Testing? （是否添加 Vitest 进行单元测试）
- Add an End-to-End Testing Solution? （是否添加端到端测试方案）
- Add ESLint for code quality? （是否添加 ESLint）
- Add Prettier for code formatting? （是否添加 Prettier）
根据你的需求选择这些选项。

如果不确定是否要开启某个功能，你可以直接按下回车键，代表选择 No。

结果如下所示：

当然，对于一个基本的 Vue3 + TypeScript 项目，至少选择 **TypeScript** 为 Yes。

步骤 2：进入项目目录并安装依赖

进入新创建的项目目录：
```
cd <你的项目名>
```
安装项目依赖：
```
npm install
```
执行结果：

步骤 3：启动开发服务器

安装完依赖后，启动开发服务器：

npm run dev

执行结果：

这将启动 Vite 的开发服务器。你会看到一个本地 URL，通常是 http://localhost:5173。

现在，可以在浏览器中打开这个 URL 来查看我们刚才创建的 Vue 3 应用啦.

步骤 4：探索项目结构

create-vue 创建的项目结构可能会根据你选择的选项有所不同。

一个典型的使用 Vite 作为构建工具的 Vue 3 + TypeScript 的项目结构如下。

your-project-name（Vue.js 3.x 必修课 By CodeFit）/      -- 项目文件夹
├── public/              -- 公共目录
│   └── favicon.ico        -- 网站的图标文件
├── src/                 -- 源代码目录
│   ├── assets/            -- 存放静态资源，如图片、字体等
│   ├── components/        -- 存放 Vue 组件
│   ├── App.vue            -- 应用的根组件
│   └── main.ts            -- 应用的入口文件，用于初始化 Vue 应用
├── .gitignore           -- 指定 Git 应该忽略的文件
├── env.d.ts             -- 环境变量的类型声明文件
├── index.html           -- 应用的 HTML 模板
├── package-lock.json    -- 锁定依赖包的版本信息
├── package.json         -- 项目的配置文件，包含依赖和脚本等信息
├── README.md            -- 项目说明文档
├── tsconfig.app.json    -- TypeScript 配置文件（针对应用）
├── tsconfig.json        -- 主 TypeScript 配置文件
├── tsconfig.node.json   -- TypeScript 配置文件（针对 Node.js 环境）
└── vite.config.ts       -- Vite 构建工具的配置文件

我们主要的编码开发工作将在 src 目录中进行，其他则大部分是配置文件，用于设置项目的各种参数和行为。

步骤 5：开始开发

现在我们可以开始在 src 目录下编写你的 Vue 组件和 TypeScript 代码了。

例如，可以修改 src/App.vue 文件来开始你的开发。

3. 总结

使用 create-vue 创建 Vue3 + TypeScript 项目是目前最新和推荐的方法。

它提供了一个灵活的设置过程，让你可以根据项目需求选择所需的功能。

如果你是刚开始接触 Vue 或现代前端开发，可能会觉得这个项目目录结构有些复杂。

但不用担心，前期我们可以先专注 src 目录中的内容，特别是 App.vue 和 components 目录，这些是我们主要编写代码的地方。

随着课程的进展，其他文件的作用也会变得更清晰。

Happy coding!

补充内容：Vite介绍

Vite：当前流行的前端构建工具

1. 什么是 Vite？

Vite（法语中 “快速” 的意思）是一个由 Vue.js 的创建者尤雨溪带领开发的新一代前端构建工具。

它旨在提供更快速的开发体验，适用于现代 web 项目。

Vite 利用了现代浏览器的新特性，如 ES 模块，并结合了 esbuild 和 Rollup 的优势，提供近乎即时的服务器启动和闪电般的热模块替换（HMR）。

2. Vite 的核心特性

极速的服务器启动：Vite 通过在一开始就将应用中的模块区分为依赖和源码两类，并使用 esbuild 预构建依赖，大大提升了开发服务器启动时间。
快速的热模块替换（HMR）：无论应用大小如何，都可以保持快速更新。Vite 只需精确地使已编辑的模块与其最近的 HMR 边界之间的链失活，使得无论应用大小如何，HMR 始终能保持快速更新。
真正的按需编译：Vite 以原生 ESM 方式提供源码。这实际上是让浏览器接管了部分打包程序的工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。
优化的构建：当需要打包到生产环境时，Vite 使用 Rollup 进行构建，输出高度优化的静态资源，并且可以轻松地部署到任何地方。
灵活的插件系统：Vite 支持使用 Rollup 兼容的插件，并且在开发环境中也可以使用特定的 Vite 插件，提供了强大的可扩展性。

3. Vite 的工作原理

3.1 开发阶段

依赖预构建：Vite 使用 esbuild 在首次启动时预构建依赖。由于 esbuild 使用 Go 编写，比基于 JavaScript 的打包器预构建依赖快 10-100 倍。
ES 模块支持：Vite 利用浏览器原生的 ES 模块支持，直接提供源码，无需打包。
按需编译：当浏览器请求某个模块时，Vite 才会编译该模块。这意味着在开发模式下，你的源代码并不会被打包在一起。
源码转换：Vite 使用 esbuild 进行源码转换，如 TypeScript 和 JSX 的转译，这比传统工具快得多。