重生之我在学Vue--第1天 Vue 3 基础与开发环境搭建

重生之我在学Vue–第1天 Vue 3 基础与开发环境搭建

文章目录

重生之我在学Vue--第1天 Vue 3 基础与开发环境搭建
- 前言
- 一、Vue 3 的特点与核心概念
- 二、搭建开发环境
- - 1. 安装 Node.js
  - 2. 使用 Vite 创建 Vue 3 项目
  - - 创建项目
    - 进入项目目录并安装依赖
    - 启动开发服务器
  - 3. 理解项目结构
- 三、编写第一个 Vue 组件
- - 1. 修改 `App.vue`
  - 2. 代码解析
  - 3. 查看效果
- 四、总结
- 五、明日预告
- 五、明日预告

前言

在现代前端开发中，Vue.js 已经成为一款备受欢迎的框架，尤其是 Vue 3 的推出，让开发者能够以更高效、更优雅的方式构建用户界面。今天是学习 Vue 3 的第1天，我们将从零开始，搭建开发环境，了解 Vue 3 的核心概念，并编写第一个简单的组件。

Vue3 官方中文文档传送点：简介 | Vue.js

Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

一、Vue 3 的特点与核心概念

在正式开始之前，我们需要了解 Vue 3 的一些核心特点和概念：

Composition API：
- Vue 3 引入了 Composition API，这种写法相比 Options API 更加灵活，尤其在复杂项目中更易于代码复用和逻辑组织。
- 通过 setup() 函数，你可以将逻辑集中在一个地方，而不是分散在多个选项中（如 data、methods 等）。
性能优化：
- Vue 3 使用了基于 Proxy 的响应式系统，相比 Vue 2 的 Object.defineProperty，性能更高。
- 支持 Tree-shaking，未使用的功能不会被打包到生产代码中。
更好的 TypeScript 支持：
- Vue 3 的设计完全考虑了 TypeScript，可以更自然地使用类型检查和类型推导。
新特性：
- 新增的 <Fragment>、<Teleport> 和 <Suspense> 等功能，扩展了 Vue 的应用场景。

二、搭建开发环境

1. 安装 Node.js

Vue 3 的开发需要依赖 Node.js 环境。首先，确保你已经安装了 Node.js（建议版本 16+）。可以通过以下命令检查版本：

node -v
npm -v

如果未安装，可以前往 Node.js 官网下载并安装。

安装教程传送点：2024最新版Node.js下载安装及环境配置教程【保姆级】_nodejs下载-CSDN博客

2. 使用 Vite 创建 Vue 3 项目

Vite 是 Vue 3 官方推荐的构建工具，它启动速度快、配置简单，非常适合现代前端开发。

Vite 官方中文教程：为什么选 Vite | Vite 官方中文文档

创建项目

在终端中运行以下命令：

# 通过 npm 创建项目
npm create vite@latest my-vue3-app# 或者使用 yarn
yarn create vite my-vue3-app

在提示中选择以下选项：

Project name：输入项目名称（如 my-vue3-app）。
Framework：选择 Vue。
Variant：选择 JavaScript 或 TypeScript（根据需求）。

进入项目目录并安装依赖

cd my-vue3-app
npm install

启动开发服务器

npm run dev

打开浏览器，访问 http://localhost:5173，你会看到一个默认的 Vue 3 项目页面。

3. 理解项目结构

打开项目目录，你会看到以下重要文件和文件夹：

src/：存放源代码的文件夹。
- main.js：项目的入口文件，负责初始化 Vue 应用。
- App.vue：根组件，所有页面组件的父组件。
index.html：项目的 HTML 模板文件。
vite.config.js：Vite 的配置文件。

三、编写第一个 Vue 组件

接下来，我们将编写一个简单的 Vue 组件，展示“Hello, Vue 3!”。

1. 修改 `App.vue`

打开 src/App.vue 文件，将内容替换为以下代码：

<template><div id="app"><h1>{{ message }}</h1><button @click="increment">点击次数：{{ count }}</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const message = ref('Hello, Vue 3!');const count = ref(0);const increment = () => {count.value++;};return {message,count,increment,};},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;margin-top: 50px;
}
button {padding: 10px 20px;font-size: 16px;margin-top: 20px;cursor: pointer;
}
</style>

2. 代码解析

模板部分：
- 使用 {{ message }} 进行数据绑定，显示动态内容。
- 使用 @click 绑定点击事件，触发 increment 函数。
逻辑部分：
- import { ref } from 'vue';：
  - 引入 Vue 3 的 ref 函数，用于创建响应式数据。
- const message = ref('Hello, Vue 3!');：
  - 定义一个响应式变量 message，初始值为 "Hello, Vue 3!"。
- const count = ref(0);：
  - 定义一个响应式变量 count，初始值为 0。
- const increment = () => { count.value++; };：
  - 定义一个方法 increment，每次调用时将 count 的值加 1。
  - 注意：ref 创建的响应式变量需要通过 .value 访问和修改。
- return { message, count, increment };：
  - 将变量和方法返回给模板，使其在模板中可以直接使用。
样式部分：
- #app：
  - 设置全局字体样式和页面布局。
- button：
  - 定义按钮的样式，包括内边距、字体大小、上边距和鼠标样式。