Vue3 基础概念与环境搭建过程详解

更新时间：2025年02月17日 08:47:11 作者：Code_Cracke

本文介绍了Vue3的基础概念,包括响应式系统、组合式API和更好的TypeScript支持,同时,文章手把手教你如何搭建Vue3开发环境,使用Vite创建项目,并解析了项目的结构,通过这些内容,读者可以快速上手Vue3,并为后续的学习打下坚实的基础,感兴趣的朋友一起看看吧

前言

首先需要提醒大家的是，Vue2 已经在2023年停止维护，为了能更好地适应前端开发的发展趋势以及获得更好的性能和功能，我们将从这篇文章开始进入Vue3的阶段。如果对Vue2有想了解的小伙伴可以自行查询学习。本文将带你了解 Vue3 的基础概念，并手把手教你完成环境搭建，为后续的阶段打下坚实的基础。

一、Vue3 简介

Vue3 是 Vue.js 的最新主要版本，于 2020 年 9 月正式发布。它在性能、可维护性和开发体验方面都有了显著的改进。相比 Vue2，Vue3 的主要特点包括：

更高效的响应式系统：使用Proxy替代了Object.defineProperty，解决了数组和深层嵌套对象监听的问题。
组合式 API（Composition API）：提供了更灵活的方式来组织组件逻辑，尤其适合复杂场景下的代码复用。
更好的 TypeScript 支持：Vue3 内置对 TypeScript 的友好支持，使得类型推导更加准确。
体积更小，性能更高：通过 Tree-shaking 和优化核心库，Vue3 的体积更小，运行效率更高。

二、Vue3 基础概念

（一）响应式系统的改进

Vue3 的响应式系统是其最重要的改进之一。在 Vue2 中，响应式依赖于 Object.defineProperty，这种方式存在以下问题：

无法监听对象属性的动态添加或删除。
对数组的操作支持有限。

Vue3 使用了 ES6 的Proxy来实现响应式，解决了这些问题。例如：

const handler = {
  get(target, key, receiver) {
    console.log(`获取属性: ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`设置属性: ${key} = ${value}`);
    return Reflect.set(target, key, value, receiver);
  }
};
const state = new Proxy({ count: 0 }, handler);
state.count++; // 输出：获取属性: count，设置属性: count = 1

通过Proxy，Vue3 能够全面监听对象和数组的变化，从而提升性能和开发体验。

（二）组合式 API

组合式 API 是 Vue3 引入的一项重要特性，旨在解决 Vue2 中选项式 API 在复杂组件中逻辑分散的问题。它的核心思想是将相关的逻辑组合在一起，而不是按照选项（如data、methods）来组织。

示例代码

import { ref, computed } from 'vue';
export default {
  setup() {
    const count = ref(0); // 定义一个响应式变量
    const doubleCount = computed(() => count.value * 2); // 计算属性
    function increment() {
      count.value++;
    }
    return {
      count,
      doubleCount,
      increment
    };
  }
};

在这个例子中，所有与计数相关的逻辑都被集中到setup函数中，代码更加清晰易读

（三）更好的类型推导

Vue3 内置了对 TypeScript 的深度支持，开发者可以直接在组件中使用类型声明，减少类型错误的发生。例如：

import { defineComponent, ref } from 'vue';
interface User {
  name: string;
  age: number;
}
export default defineComponent({
  setup() {
    const user = ref<User>({ name: 'Alice', age: 25 });
    function updateAge(newAge: number) {
      user.value.age = newAge;
    }
    return { user, updateAge };
  }
});

通过 TypeScript，我们可以确保数据类型的正确性，提高代码的健壮性。

三、环境搭建

（一）安装 Node.js

在搭建 Vue3 开发环境之前，我们需要先安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许我们在服务器端运行 JavaScript。

访问Node.js 官方网站。
根据您的操作系统（Windows、macOS 或 Linux），选择对应的安装包并下载。
安装完成后，可以通过以下命令检查是否安装成功：

node -v
npm -v

如果能够正确输出版本号，则说明安装成功。

（二）使用 Vite 创建 Vue3 项目

相比于传统的 Vue CLI，Vite是一个更现代化的构建工具，具有更快的冷启动速度和热更新能力。接下来，我们将使用Vite来创建一个 Vue3 项目。

全局安装create-vue

打开终端或命令提示符，运行以下命令以全局安装create-vue：

npm install -g create-vue

创建 Vue3 项目

使用以下命令创建一个新的 Vue3 项目：

create-vue my-vue3-project

在创建过程中，系统会提示您选择一些配置选项，例如：

是否使用 TypeScript？
是否使用 Pinia（Vuex 的替代方案）？
是否启用测试工具（如 Vitest 和 Cypress）？

您可以根据实际需求进行选择。如果不确定，可以选择默认配置。

创建完成后，进入项目目录并安装依赖：

cd my-vue3-project
npm install

启动开发服务器

安装完成后，运行以下命令启动开发服务器：

npm run dev

启动成功后，终端会显示一个本地访问地址（通常是http://localhost:5173）。打开浏览器访问该地址，即可看到项目运行效果。

四、项目结构解析

创建好项目后，我们来看一下 Vue3 项目的基本结构（以默认配置为例）：

my-vue3-project
├── node_modules/        # 项目依赖的模块
├── public/              # 静态资源，如 favicon.ico 等
├── src/                 # 项目的源代码 
│   ├── assets/          # 图片、样式等资源
│   ├── components/      # 自定义组件
│   ├── views/           # 页面视图
│   ├── App.vue          # 根组件
│   ├── main.ts          # 入口文件（TypeScript）
├── .gitignore           # Git 忽略配置
├── index.html           # 页面模板
├── package.json         # 项目依赖和脚本配置
├── tsconfig.json        # TypeScript 配置（如果选择使用 TypeScript）
└── vite.config.ts       # Vite 配置文件

关键文件说明

index.html

项目的基础 HTML 文件，所有的内容都会被注入到这个文件中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite + Vue3</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

main.ts

项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 上。

import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

App.vue

根组件，定义了应用的整体结构。

<template>
  <div id="app">
    <h1>Hello Vue3 with Vite</h1>
  </div>
</template>
<script lang="ts">
export default {
  name: 'App'
};
</script>
<style>
#app {
  text-align: center;
  color: #2c3e50;
}
</style>

五、总结

在本篇文章中，我们了解了 Vue3 的基础概念，并通过Vite成功搭建了开发环境。相比于传统的 Vue CLI，Vite提供了更快的开发体验，特别适合现代前端项目的需求。接下来，我们将深入学习 Vue3 的更多特性和功能，逐步提升我们的开发能力。

到此这篇关于Vue3基础概念与环境搭建的文章就介绍到这了,更多相关Vue3基础概念与环境搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue路由切换时取消之前的所有请求操作
这篇文章主要介绍了vue路由切换时取消之前的所有请求操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
VUE实现强制渲染,强制更新
今天小编就为大家分享一篇VUE实现强制渲染,强制更新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
Vue eventBus事件总线封装后再用的方式
EventBus称为事件总线,当两个组件属于不同的两个组件分支,或者两个组件没有任何联系的时候,不想使用Vuex这样的库来进行数据通信,就可以通过事件总线来进行通信,这篇文章主要给大家介绍了关于Vue eventBus事件总线封装后再用的相关资料,需要的朋友可以参考下
2022-06-06
vue如何利用axios调用后台api接口
这篇文章主要介绍了vue如何利用axios调用后台api接口问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue select选择框数据变化监听方法
今天小编就为大家分享一篇vue select选择框数据变化监听方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue加入购物车判断token添加登录提示功能
加入购物车，是一个登录后的用户才能进行的操作，所以需要进行鉴权判断，判断用户token是否存在，这篇文章主要介绍了Vue加入购物车判断token添加登录提示,需要的朋友可以参考下
2023-11-11
vue中使用Animate.css的教程详解
Animate.css这个动画库,很多的动画在这个库里面都定义好了,我们用的时候可以直接使用里面的类名就可以,下面我们就来看看如何在vue项目中使用Animate.css吧
2023-08-08
解决vue cli4升级sass-loader(v8)后报错问题
这篇文章主要介绍了解决vue cli4升级sass-loader(v8)后报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue + echarts实现中国省份地图点击联动
这篇文章主要介绍了vue + echarts实现中国地图省份点击联动,需要的朋友可以参考下
2022-04-04
npm安装vue@cli报错的简单处理方式
最近工作中遇到了报错,现在将解决的办法分享给大家,下面这篇文章主要给大家介绍了关于npm安装vue@cli报错的简单处理方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-12-12