Vue 3 入门教程 - 1、基础概念与环境搭建

一、Vue 3 简介

Vue.js 是一款流行的 JavaScript 前端框架，用于构建用户界面。Vue 3 作为其最新版本，带来了诸多令人瞩目的新特性与性能优化，为开发者打造了更为高效、灵活的开发体验。

1.1 Vue 3 的优势

• 性能提升：对虚拟 DOM 进行了重构，优化了编译器和运行时性能，在大型应用中渲染速度大幅提升。同时支持 Tree - Shaking，有效减小了打包体积。

• API 革新：引入全新的 Composition API，使开发者能够以更灵活、可复用的方式组织逻辑，显著提升代码的可读性与维护性。

• 更好的 TypeScript 支持：增强了类型推断能力，与 TypeScript 兼容性更佳，为使用 TypeScript 进行开发的项目提供了更友好的环境。

1.2 Vue 3 与 Vue 2 的区别

• 响应式系统：Vue 2 使用 Object.defineProperty 来实现响应式，而 Vue 3 采用 ES6 的 Proxy 对象。Proxy 能更高效且完整地进行对象代理，可深度监听对象变化，包括属性的添加和删除。

• API 风格：Vue 2 主要采用选项式 API（Options API），而 Vue 3 引入的组合式 API（Composition API）提供了一种全新的组织代码逻辑的方式，更便于逻辑复用，尤其适用于大型应用中组件间的状态管理和逻辑共享。

• 生命周期钩子：Vue 3 中生命周期钩子名称前缀增加了 on，例如 onMounted，并且在 Composition API 中以函数形式使用，需要导入对应的生命周期钩子。同时，Vue 3 移除了 beforeDestroy，改为 onBeforeUnmount，新增了 unmounted 对应 Vue 2 的 destroyed 钩子。

二、环境搭建

在开始使用 Vue 3 进行开发之前，我们需要先搭建好开发环境。主要包括安装 Node.js 和创建 Vue 项目。

2.1 安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许我们在服务器端运行 JavaScript 代码。Vue 项目的创建和运行依赖于 Node.js。

前往 Node.js 官方网站 下载并安装适合你操作系统的版本。安装完成后，打开终端或命令提示符，输入以下命令检查是否安装成功：

node -v

npm -v

这两条命令会分别显示 Node.js 和 npm（Node.js 的包管理器）的版本号。如果成功显示版本号，则说明安装成功。

2.2 创建 Vue 项目

2.2.1 使用 create - vue 创建项目

create - vue 是 Vue 官方新的脚手架工具，底层基于 vite（下一代前端工具链），能为开发提供极速响应。

确保你已经安装了 16.0 或更高版本的 Node.js。打开终端，进入你想要创建项目的目录，执行以下命令：

npm create vue@latest

执行该命令后，会出现一系列交互式选项：

• 请输入项目名称：输入你想要的项目名称，例如 my - vue3 - project。

• 是否使用 TypeScript 语法：如果你熟悉 TypeScript 或者项目需要，可以选择 Yes，否则选择 No。

• 是否启用 JSX 支持：如果项目中需要使用 JSX 语法（一种类似 XML 的 JavaScript 扩展语法），选择 Yes，否则选择 No。

• 是否引入 Vue Router 进行单页面应用开发：如果项目需要路由功能（例如实现页面之间的跳转），选择 Yes，否则选择 No。

• 是否引入 Pinia 用于状态管理：如果项目需要进行状态管理（例如管理全局状态），选择 Yes，否则选择 No。

• 是否引入 Vitest 用于单元测试：如果项目需要进行单元测试，选择 Yes，否则选择 No。

• 是否要引入一款端到端（End to End）测试工具：根据项目测试需求选择是否引入端到端测试工具。

• 是否引入 ESLint 用于代码质量检测：如果希望对代码进行质量检测和规范，选择 Yes，否则选择 No。

按照需求选择完成后，等待项目创建完成。创建完成后，进入项目目录：

cd my - vue3 - project

然后安装项目依赖：

npm install

最后，启动项目：

npm run dev

启动成功后，在浏览器中访问 http://localhost:5173/，你将看到 Vue 项目的默认页面。

2.2.2 使用 Vue CLI 创建项目（了解）

Vue CLI 是 Vue.js 官方的脚手架工具，虽然 create - vue 是官方新推荐的方式，但 Vue CLI 仍然被广泛使用。如果你之前安装过旧版本的 Vue CLI，可能需要先卸载：

npm uninstall -g vue - cli

然后全局安装 Vue CLI：

npm install -g @vue/cli

安装完成后，在终端进入你想要创建项目的目录，执行以下命令创建一个新的 Vue 3 项目：

vue create my - vue3 - project

在创建过程中，你可以选择默认的配置（babel、eslint 等），也可以手动选择需要的特性，如 Vue Router（路由管理）、Vuex（状态管理）等。创建完成后，同样进入项目目录，安装依赖并启动项目：

cd my - vue3 - project
npm install
npm run serve

启动成功后，在浏览器中访问 http://localhost:8080/，即可看到项目页面。

2.3 Vue 3 项目结构

以使用 create - vue 创建的项目为例，其目录结构大致如下：

my - vue3 - project/

├── node_modules/ # 项目依赖的第三方包

├── public/ # 公共静态资源

│ ├── assets/ # 静态资源，如图片、字体等

│ ├── index.html # 应用的 HTML 模板

├── src/ # 项目源代码

│ ├── assets/ # 项目内的静态资源

│ ├── components/ # 组件目录

│ │ ├── HelloWorld.vue # 示例组件

│ ├── main.js # 入口文件，初始化 Vue 实例

│ ├── App.vue # 根组件

├── package.json # 项目依赖和配置

├── package - lock.json # 精确锁定项目依赖版本的文件

├── tsconfig.json # TypeScript 配置（如果使用 TypeScript）

├── vite.config.ts # Vite 配置文件（如果使用 Vite）

• public 目录：用于存放公共静态资源，如 index.html 是项目的入口 HTML 文件，该目录下的资源会直接被复制到最终的打包目录中。

• src 目录：是项目的源代码目录，所有的 Vue 组件、JavaScript 逻辑、样式等主要代码都存放在此目录下。

• • assets 目录：用于存放项目内的静态资源，如图片、样式文件等。

• • components 目录：用于存放 Vue 组件，每个组件通常是一个 .vue 文件，一个 Vue 项目由多个组件组合而成。

• • main.js：项目的入口文件，在该文件中创建 Vue 应用实例，并进行一些全局配置，例如挂载根组件、注册全局组件、引入路由和状态管理等（如果项目使用了这些功能）。

• • App.vue：项目的根组件，整个应用的结构和样式通常从这个组件开始构建，其他组件会被引入到该组件中进行组合。

• package.json：记录了项目的依赖包信息以及一些脚本命令，通过 npm install 命令会根据此文件安装项目所需的依赖包。

• package - lock.json：用于精确锁定项目依赖包的版本，确保在不同环境下安装的依赖包版本一致。

• tsconfig.json：如果项目使用了 TypeScript，该文件用于配置 TypeScript 的编译选项。

• vite.config.ts：如果项目使用了 Vite 构建工具，该文件用于配置 Vite 的相关选项，例如自定义别名、配置代理等。

了解项目结构有助于我们更好地组织和管理代码，在后续开发中能够快速找到对应的文件和逻辑。