VUE学习路径 – 码系统

Vue.js 是一个渐进式的前端框架，适合构建用户界面和单页应用（SPA）。以下是系统化的学习路径，从基础到进阶，帮助你高效掌握 Vue.js：

一、Vue.js 基础

1.核心概念

Vue 是什么？
- 渐进式 JavaScript 框架，易上手，灵活性强。
- 核心库只关注视图层，可逐步集成到现有项目。
Vue 2 vs. Vue 3
- Vue 3 默认使用 Composition API，性能优化更好（推荐学习 Vue 3）。

2.快速上手

安装 Vue

# 使用 npm 或 yarn 创建 Vue 项目
npm init vue@latest
# 或
yarn create vue

Hello World 示例

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Click Me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "Vue is awesome!";
    }
  }
};
</script>

关键点：

{{ }}：数据绑定（插值语法）。
@click：事件绑定。
data()：定义响应式数据。
methods：定义方法。

二、Vue 核心知识

1.模板语法

插值：{{ data }}
指令：
- v-if / v-else / v-show（条件渲染）
- v-for（列表渲染）
- v-bind（绑定属性，简写 :）
- v-on（绑定事件，简写 @）
- v-model（双向数据绑定）

2.组件化开发

组件定义：

<template>
  <div>
    <ChildComponent :propName="data" @customEvent="handleEvent" />
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: { ChildComponent },
  methods: {
    handleEvent(payload) {
      console.log("Event received:", payload);
    }
  }
};
</script>

Props（父 → 子通信）

Emits（子 → 父通信）

3.状态管理（Vuex / Pinia）

Vuex（Vue 2 官方状态管理）

// store.js
import { createStore } from "vuex";

export default createStore({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

Pinia（Vue 3 推荐）

// stores/counter.js
import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

三、进阶 Vue 开发

1.路由（Vue Router）

// router.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: () => import("./views/About.vue") }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

关键点：

<router-link> 导航
useRouter() / useRoute()（Composition API）

2.组合式 API（Composition API）

<script setup>
import { ref, computed } from "vue";

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">{{ count }} (x2: {{ doubleCount }})</button>
</template>

优势：

更好的代码组织（逻辑复用）。
更灵活的 TypeScript 支持。

3.常用工具库

四、实战项目推荐

Todo List（基础练习）
博客系统（Vue + Vue Router + Pinia）
电商网站（Vue + Vuex + Element Plus）
实时聊天应用（Vue + WebSocket）

五、学习资源

1.官方文档

2.免费课程

3.书籍

《Vue.js 设计与实现》（深入原理）
《Vue.js 实战》（适合初学者）

六、学习建议

从 Vue 3 开始（未来趋势）。
先学 Options API，再学 Composition API（渐进式学习）。
多写 Demo，理解响应式原理。
参与开源项目（GitHub 上找 Vue 项目贡献代码）。

总结：Vue 学习曲线平缓，适合前端初学者。1-2 周可掌握基础，1-2 个月可独立开发项目。坚持实战，你会很快成为 Vue 开发者！ 🚀

​一、Vue.js 基础