Vue3 开发环境搭建及循序渐进学习指南

Vue3 是目前流行的前端框架之一，相比 Vue2 有不少改进和新特性。对于初学者来说，先搭建好开发环境，再按阶段学习核心知识，能更高效地掌握 Vue3。下面详细介绍环境搭建步骤和学习路径。

一、搭建 Vue3 开发环境

1. 安装基础工具

Node.js：Vue3 的项目构建依赖 Node.js 环境，同时需要 npm（Node.js 自带的包管理工具）。

下载地址：Node.js 官网，推荐安装 LTS（长期支持）版本。

验证安装：打开终端输入以下命令，能显示版本号即安装成功。

bash 复制代码

node -v  # 如 v22.13.1
npm -v   # 如 11.4.0

代码编辑器：推荐使用 VS Code（免费且对 Vue 支持友好）。

下载地址：VS Code 官网。

必装插件（提高开发效率）：

- Volar：Vue3 官方推荐的语法高亮、代码提示插件（替代 Vue2 的 Vetur）。

- TypeScript Vue Plugin (Volar) ：支持 Vue 中 TypeScript 的类型检查。

2. 创建 Vue3 项目

使用 Vue 官方的脚手架工具create-vue（替代旧版的vue-cli）快速创建项目。

步骤：

打开终端，输入以下命令创建项目（my-vue3-app是项目名，可自定义）：

perl 复制代码

npm create vue@latest my-vue3-app

按照终端提示选择配置（初学者推荐以下选项）：

yaml 复制代码

√ Project name: >> my-vue3-app        # 项目名
√ Add TypeScript? >> No               # 暂不使用TypeScript，后续再学
√ Add JSX Support? >> No              # 暂不使用JSX
√ Add Vue Router for Single Page Application development? >> Yes  # 路由（必选，用于页面跳转）
√ Add Pinia for state management? >> Yes  # 状态管理（可选，复杂项目需要）
√ Add Vitest for Unit Testing? >> No  # 暂不使用单元测试
√ Add an End-to-End Testing Solution? >> No  # 暂不使用端到端测试
√ Add ESLint for code quality? >> Yes  # 代码检查工具（规范代码）
√ Add Prettier for code formatting? >> Yes  # 代码格式化工具

bash 复制代码

cd my-vue3-app  # 进入项目文件夹
npm install     # 安装依赖包

启动开发服务器：

arduino 复制代码

npm run dev

终端会显示项目访问地址（通常是http://localhost:5173/），打开浏览器访问，能看到 Vue3 的欢迎页面即创建成功。

3. 项目目录结构（核心文件说明）

csharp 复制代码

my-vue3-app/
├─ node_modules/      # 依赖包（无需手动修改）
├─ public/            # 静态资源（如图片、favicon.ico）
├─ src/               # 源代码（开发的核心目录）
│  ├─ assets/         # 样式、图片等资源
│  ├─ components/     # 可复用的组件（如按钮、卡片）
│  ├─ router/         # 路由配置（页面跳转规则）
│  ├─ views/          # 页面组件（与路由对应）
│  ├─ App.vue         # 根组件（所有页面的入口）
│  └─ main.js         # 入口文件（启动Vue应用）
├─ package.json       # 项目配置（脚本命令、依赖等）
└─ vite.config.js     # 构建工具配置（Vue3默认用Vite）

二、循序渐进学习 Vue3 的路径

阶段 1：基础核心概念（1-2 周）

目标：掌握 Vue3 的基本用法，能写简单的交互页面。

模板语法与数据绑定

- 插值表达式：{{ message }}显示数据。

- 指令：v-bind（简写:）绑定属性，v-on（简写@）绑定事件。

- 示例：在src/components/HelloWorld.vue中修改

xml 复制代码

<template>
  <h1>{{ title }}</h1>
  <button @click="count++">点击次数: {{ count }}</button>
</template>
<script setup>
// 声明响应式数据
let title = "Hello Vue3";
let count = 0;
</script>

响应式数据（ ref 和 reactive ）

ini 复制代码

<script setup>
import { ref, reactive } from 'vue';
// 基本类型用ref
const age = ref(18);
age.value = 19; // 修改值
// 对象用reactive
const user = reactive({ name: "张三" });
user.name = "李四"; // 直接修改属性
</script>

- ref：用于基本类型（数字、字符串等），访问时需加.value（模板中不用）。

- reactive：用于对象 / 数组，直接修改属性即可响应式更新。

计算属性与侦听器

xml 复制代码

<script setup>
import { ref, computed, watch } from 'vue';
const num = ref(2);
// 计算属性：num的平方
const square = computed(() => num.value * num.value);
// 侦听器：监听num变化
watch(num, (newVal) => {
  console.log("num变成了：", newVal);
});
</script>

- computed：根据已有数据计算新数据（自动缓存）。

- watch：监听数据变化并执行操作。

条件渲染与列表渲染

xml 复制代码

<template>
  <!-- 条件渲染 -->
  <p v-if="isShow">显示这段文字</p>
  
  <!-- 列表渲染 -->
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ index + 1 }}. {{ item }}
    </li>
  </ul>
</template>
<script setup>
import { ref } from 'vue';
const isShow = ref(true);
const list = ref(["苹果", "香蕉", "橙子"]);
</script>

- v-if/v-else：根据条件显示元素。

- v-for：循环渲染列表。

阶段 2：组件化开发（1 周）

目标：理解组件的复用和通信，构建模块化页面。

组件的创建与使用

xml 复制代码

<!-- Button.vue -->
<template>
  <button class="my-btn">{{ text }}</button>
</template>
<script setup>
// 接收父组件传入的参数
const props = defineProps({
  text: { type: String, default: "按钮" }
});
</script>

在父组件中使用：

xml 复制代码

<template>
  <Button text="点击我" />
</template>
<script setup>
import Button from './components/Button.vue';
</script>

- 在src/components中创建组件（如Button.vue），通过import在其他组件中使用。

组件通信

xml 复制代码

<!-- 子组件 Button.vue -->
<script setup>
const emit = defineEmits(['click']);
// 点击时向父组件发送事件
const handleClick = () => {
  emit('click', '来自子组件的数据');
};
</script>

父组件接收：

xml 复制代码

<template>
  <Button @click="handleBtnClick" />
</template>
<script setup>
const handleBtnClick = (data) => {
  console.log("收到子组件数据：", data);
};
</script>

- 父传子：通过props（如上面的text参数）。

- 子传父：通过emit触发事件。

阶段 3：路由与状态管理（1-2 周）

目标：实现多页面跳转和全局数据管理。

Vue Router（路由）

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

xml 复制代码

<template>
  <!-- 声明式跳转 -->
  <router-link to="/about">去关于页</router-link>
  
  <!-- 编程式跳转 -->
  <button @click="goAbout">去关于页</button>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const goAbout = () => {
  router.push('/about'); // 编程式跳转
};
</script>

- 配置路由：在src/router/index.js中定义页面路径与组件的对应关系。

- 页面跳转：使用（声明式）或useRouter（编程式）。

Pinia（状态管理）

javascript 复制代码

// src/stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }), // 全局状态
  actions: {
    increment() {
      this.count++; // 修改状态
    }
  }
});

xml 复制代码

<template>
  <p>全局计数：{{ counterStore.count }}</p>
  <button @click="counterStore.increment">+1</button>
</template>
<script setup>
import { useCounterStore } from '../stores/counter';
const counterStore = useCounterStore(); // 获取存储实例
</script>

- 创建存储：在src/stores中定义全局数据（替代 Vue2 的 Vuex）。

- 在组件中使用：

阶段 4：进阶特性与实战（2-4 周）

目标：掌握 Vue3 的高级功能，通过实战项目巩固知识。

Composition API 深度应用

xml 复制代码

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  console.log("组件已挂载到页面");
});
</script>

- setup语法糖：简化组件逻辑（已在前面示例中使用）。

- 生命周期钩子：如onMounted（组件挂载后执行）、onUpdated（组件更新后执行）。

自定义指令

xml 复制代码

<script setup>
// 注册自定义指令 v-focus
const vFocus = {
  mounted: (el) => el.focus() // 元素挂载后自动聚焦
};
</script>
<template>
  <input v-focus placeholder="自动聚焦">
</template>

- 封装常用操作（如聚焦输入框、拖拽等）。

实战项目

- 推荐练手项目：

- - 待办清单（Todo List）：练习组件通信、状态管理。

- - 个人博客页面：练习路由、动态渲染。

- - 天气应用：练习网络请求（fetch或axios）。

三、学习资源推荐

官方文档 ：Vue3 官方指南（最权威，建议反复阅读）。

视频教程：B 站搜索 "Vue3 入门到精通"（选择播放量高、适合初学者的）。

练习平台：CodeSandbox（在线编辑 Vue 项目，无需本地配置）。

总结

学习 Vue3 的关键是 "先基础后进阶，多写多练"。环境搭建好后，先掌握模板语法、响应式数据等核心概念，再逐步学习组件、路由和状态管理，最后通过实战项目巩固。遇到问题时，多查官方文档和社区（如 Stack Overflow、Vue 论坛），积累经验后会越来越顺手。