Day1、 Vue3 入门指南

「本专栏是我在学习 Vue3 过程中的总结与分享，旨在帮助初学者快速上手 Vue3。由于我也在持续学习中，如果有任何疏漏或错误，欢迎大家在评论区指正，我们一起进步！」
提示：使用该文档学习vue3需要有一些vue和vue2的基础才可以更好的学习噢~~
版权：未经允许，禁止转载！
鼓励：学习是一个缓慢的过程，唯有时间能证明一切，加油吧@所有人！！！

---

---

前言

Vue3 作为一款现代化的前端框架，凭借其出色的性能、灵活的Composition API 以及对 TypeScript 的友好支持，已经成为前端开发的热门选择。如果你对 Vue3 感兴趣，但还不知道如何开始，那么这篇文章就是为你准备的！

在接下来的内容中，我将带同学们快速了解 Vue3 的核心特点，并手把手教你如何从零开始创建一个 Vue3 项目。无论你是前端新手，还是已经熟悉其他框架的开发者，这篇文章都会帮助你轻松迈出 Vue3 的第一步。

让我们一起开始吧！

---

一、Vue3的简介

1. Vue3 是什么？

Vue3 是 Vue.js 框架的最新主要版本（当前稳定版本为 3.x），是一个用于构建用户界面的渐进式 JavaScript 框架。它的核心目标是帮助开发者高效地构建现代化的单页面应用（SPA）和动态网页。

2. Vue3 能做什么？

构建用户界面

Vue3 通过简洁的模板语法和响应式数据系统，将数据与 DOM 绑定，让开发者专注于逻辑和交互设计，而非手动操作 DOM。

开发单页面应用（SPA）

结合 Vue Router，可以轻松创建无刷新的多页面体验（如博客、管理系统、社交平台等）。

跨平台开发

移动端：通过 NativeScript-Vue 或 Ionic Vue 开发原生移动应用。

桌面端：通过 Electron + Vue3 开发跨平台桌面应用。

静态网站：通过 VitePress 或 Nuxt.js 生成静态站点。

3. Vue3 的核心特点

响应式系统

基于 JavaScript 的 Proxy 实现数据响应式，自动追踪数据变化并更新视图。

组件化开发

将页面拆分为独立、可复用的组件，提升代码组织和维护性。

声明式模板语法

通过类似 HTML 的模板语法，直观描述页面逻辑（如 v-if、v-for 等指令）。

轻量高效

体积更小（核心库仅约 10KB）、性能更快（虚拟 DOM 优化）。

4. 为什么选择 Vue3？

渐进式框架：可以从小功能逐步扩展到复杂应用。

灵活易上手：学习曲线平缓，文档丰富，适合新手和进阶开发者。

生态丰富：支持 Vue Router、Pinia（状态管理）、Vite（构建工具）等工具链。

新的内置组件：Fragment、Teleport、Suspense、…

其他改变：新的生命周期钩子、data 选项应始终被声明为一个函数、移除keyCode支持作为 v-on 的修饰符、…

---

二、创建Vue3工程

基于Vue CLI 创建Vue3工程（ 方式一 < 不推荐 > ）

1.参考：这里查看 Vue CLI 官方文档
2.提醒：目前vue-cli已处于维护模式，官方推荐基于 Vite 创建项目。
3.习惯：在我们项目库所处的文件夹里面（CTRL+右键）打开powershell窗口，将创建的vue3项目文件夹集中管理

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

## 执行创建命令
vue create 你的项目名字

##  这里选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x

## 启动
cd 进入你的项目所处的文件夹
npm run serve

基于 Vite 创建Vue3工程（ 方式二 < 推荐 > ）

vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：

• 轻量快速的热重载（HMR），能实现极速的服务启动。
• 对 TypeScript、JSX、CSS 等支持开箱即用。
• 真正的按需编译，不再等待整个应用编译完成。
• webpack构建 与 vite构建对比图如下：

不懂的地方都可以通过下方的官方文档获取⬇⬇⬇⬇，这里只是简述分析哈~

• 具体操作如下（点击查看官方文档）

## 1.创建命令（不一定使用npm 官方文档中提供了4种方式）
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No
## 实验性功能 建议选择No即可
√ Add Vue DevTools 7 extension for debugging? (experimental) No 

## 启动
## 提示:通过vs-code打开该项目文件夹，通过打开终端的方式直接进入到该项目中，就可以省略 cd 这一步骤了
cd 进入你的项目所处的文件夹
npm run dev

注意事项

1.推荐使用的vs-code插件(下载安装即可)

2.用vscode打开项目出现报错(解决方法)

针对的是使用Vite创建项目的同学们

在vscode打开的终端中，输入 npm i 指令之后重启vscode即可（用来下载TS所需的配置文件）

---

三、实现一个简单的效果

Vue3向下可以兼容Vue2的语法，且Vue3中的模板中可以没有根标签

<template>
  <div class="person">
    <h2>姓名：{{name}}h2>
    <h2>年龄：{{age}}h2>
    <button @click="changeName">修改名字button>
    <button @click="changeAge">年龄加一button>
  div>
template>
​
<script lang="ts">
  export default {
    name:'App',
    data() {
      return {
        name:'张三',
        age:18,
      }
    },
    methods:{
      changeName(){
        this.name = 'zhang-san'
      },
      changeAge(){
        this.age += 1
      }
    },
  }
script>

---

总结

本文带理解了 Vue3 的定位与核心能力，并通过两种方式完成了第一个项目的搭建，为后续深入学习打下基础。接下来的文章将逐步深入 Vue3 的进阶特性，敬请期待！

第一天重点了解一下 为什么要学习Vue3 以及 Vue3项目的创建 即可。

到这里就跟大家说再见了，有什么不懂的地方可以评论区探讨,错误的地方也感谢各路大神给我指点！给各位抱拳了！！！