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

文章目录

[重生之我在学Vue--第1天 Vue 3 基础与开发环境搭建](#重生之我在学Vue--第1天 Vue 3 基础与开发环境搭建)
- 前言
- [一、Vue 3 的特点与核心概念](#一、Vue 3 的特点与核心概念)
- 二、搭建开发环境
- - [1. 安装 Node.js](#1. 安装 Node.js)
  - [2. 使用 Vite 创建 Vue 3 项目](#2. 使用 Vite 创建 Vue 3 项目)
  - [3. 理解项目结构](#3. 理解项目结构)
- [三、编写第一个 Vue 组件](#三、编写第一个 Vue 组件)
- - [1. 修改 `App.vue`](#1. 修改 App.vue)
  - [2. 代码解析](#2. 代码解析)
  - [3. 查看效果](#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+）。可以通过以下命令检查版本：

bash 复制代码

node -v
npm -v

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

2. 使用 Vite 创建 Vue 3 项目

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

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

创建项目

在终端中运行以下命令：

bash 复制代码

# 通过 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（根据需求）。

进入项目目录并安装依赖

bash 复制代码

cd my-vue3-app
npm install

启动开发服务器

bash 复制代码

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 文件，将内容替换为以下代码：

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：
  - 定义按钮的样式，包括内边距、字体大小、上边距和鼠标样式。

3. 查看效果

保存文件后，浏览器会自动刷新，你会看到一个按钮和动态计数器。点击按钮，计数会递增。

四、总结

通过第一天的学习，我们完成了以下内容：

了解了 Vue 3 的核心特点和概念。
使用 Vite 快速搭建了 Vue 3 的开发环境。
编写了一个简单的 Vue 组件，初步体验了 Composition API 的使用。

五、明日预告

明天，我们将深入学习 Vue 3 的 Composition API 和响应式系统，掌握 ref、reactive、computed、watch 等核心功能，进一步完善我们的项目。

搭建了 Vue 3 的开发环境。

编写了一个简单的 Vue 组件，初步体验了 Composition API 的使用。

五、明日预告

明天，我们将深入学习 Vue 3 的 Composition API 和响应式系统，掌握 ref、reactive、computed、watch 等核心功能，进一步完善我们的项目。

学习 Vue 3 的旅程才刚刚开始，继续加油吧！ 🚀

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