Vue.js 生态系统深度探索与项目实战：从零搭建到 AI 赋能开发

Flask小酒馆

2026-07-17 09:54

阅读 519

作者：老张｜技术团队培训负责人

写了这篇教程，是因为每年带应届生入职，我发现一个规律：会写 Vue 的人很多，但真正理解 Vue 生态、能把项目跑通的人很少。再加上今年 AI 工具爆发，很多新人连 ChatGPT 的 Function Calling 都没听过，更别提用 AI 辅助写代码了。所以我决定把这几年带新人的经验浓缩成这一篇文章，从零开始，带你把 Vue 生态走一遍，顺便教你怎么用 AI 工具提效。

一、Vue.js 到底是什么？

我当初学的时候，老师第一句话就是："Vue 是一个渐进式 JavaScript 框架。"我当时一脸懵，什么叫渐进式？

现在我用大白话给你解释：

Vue.js 是一个帮你高效构建网页界面的工具。

想象你要盖房子：

原生 JavaScript 就像你自己一块砖一块砖地砌
jQuery 像给你提供了一些现成的工具（锤子、锯子）
Vue 就像给你一套完整的施工图纸 + 预制构件，你只需要按图纸拼装

Vue 的核心思想是数据驱动视图。你只需要关心数据是什么，Vue 会自动帮你把界面更新好。

// 原生 JS：你需要手动操作 DOM
document.getElementById('count').innerText = count + 1

// Vue：你只需要改数据，界面自动变
this.count++  // 界面自动更新，不用你管 DOM

二、Vue 生态系统全景图

很多人以为 Vue 就是一个库，其实它是一个生态。我带的新人里，80% 的人只用了 Vue 本体，其他工具一概不知。这就像买了手机只用来打电话一样浪费。

下面这张表，是我要求每个新人必须了解的 Vue 生态核心工具：

工具名称	作用	是否必学	学习优先级
Vue 3	核心框架	✅ 必学	⭐⭐⭐⭐⭐
Vue Router	路由管理（页面跳转）	✅ 必学	⭐⭐⭐⭐⭐
Pinia	状态管理（全局数据共享）	✅ 必学	⭐⭐⭐⭐
Vite	构建工具（开发服务器）	✅ 必学	⭐⭐⭐⭐⭐
Vue CLI	旧版构建工具（了解即可）	⚠️ 了解	⭐⭐
Element Plus	UI 组件库	✅ 必学	⭐⭐⭐⭐
Axios	HTTP 请求库	✅ 必学	⭐⭐⭐⭐⭐
VueUse	组合式 API 工具集	⚠️ 进阶	⭐⭐⭐
Nuxt.js	SSR 服务端渲染框架	⚠️ 进阶	⭐⭐

我当初学的时候，最大的坑就是不知道先学什么，东一榔头西一棒子。现在我把学习顺序给你排好了：

Vue 3 → Vite → Vue Router → Pinia → Axios → Element Plus → 实战项目

三、环境准备：5 分钟搭好开发环境

别怕，环境搭建其实很简单。跟着我一步步来。

3.1 安装 Node.js

Node.js 是运行 JavaScript 的环境，Vue 的工具链都依赖它。

打开 https://nodejs.org
下载 LTS（长期支持版）
安装完成后，打开终端验证：

node -v    # 应该显示 v18.x.x 或更高
npm -v     # 应该显示 9.x.x 或更高

3.2 安装 VS Code

推荐用 VS Code 作为编辑器，装以下插件：

插件名称	作用
Volar	Vue 3 语法支持（必装）
ESLint	代码规范检查
Prettier	代码格式化
Auto Rename Tag	自动重命名配对标签
Chinese (Simplified)	中文语言包

3.3 用 Vite 创建 Vue 3 项目

# 创建项目
npm create vite@latest my-vue-app

# 进入项目
cd my-vue-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

打开浏览器访问 http://localhost:5173，看到 Vue 的欢迎页面，恭喜，环境搭好了！

💡 新手常见问题：npm install 很慢怎么办？

用国内镜像源：
npm config set registry https://registry.npmmirror.com

四、核心概念：用大白话讲明白

4.1 组件化思维

Vue 的核心思想是组件化。什么叫组件？

我当初学的时候，老师举了个例子：乐高积木。一个页面就像一座乐高城堡，由一块块积木拼成。每一块积木就是一个组件。

<!-- Header.vue -->
<template>
  <header>
    <h1>我的网站</h1>
    <nav>首页 | 关于 | 联系</nav>
  </header>
</template>

<!-- Footer.vue -->
<template>
  <footer>
    <p>© 2024 我的网站</p>
  </footer>
</template>

<!-- App.vue - 把组件拼起来 -->
<template>
  <Header />
  <main>
    <p>这里是页面内容</p>
  </main>
  <Footer />
</template>

<script setup>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
</script>

4.2 响应式数据

响应式是 Vue 最强大的特性。简单说就是：数据变了，界面自动变。

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="count++">加 1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 定义响应式数据
const count = ref(0)

// 点击按钮，count 加 1
// 界面会自动更新，不需要手动操作 DOM
</script>

我当初学的时候，最不理解的就是 ref 和 reactive 的区别。现在给你讲清楚：

特性	ref	reactive
适用类型	基本类型 + 对象	只能用于对象
访问方式	需要 `.value`	不需要 `.value`
使用场景	简单数据	复杂对象

import { ref, reactive } from 'vue'

// ref 用法
const count = ref(0)
console.log(count.value)  // 需要 .value

// reactive 用法
const user = reactive({
  name: '张三',
  age: 25
})
console.log(user.name)  // 不需要 .value

4.3 生命周期

每个 Vue 组件都有自己的"一生"，从创建到销毁，经历不同的阶段。

组件生命周期流程：
创建 → 挂载 → 更新 → 卸载
 │       │       │       │
 │       │       │       └── onUnmounted（组件销毁后）
 │       │       └── onUpdated（数据更新后）
 │       └── onMounted（组件挂载到页面后）
 └── onCreated（组件创建时）

<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件已经挂载到页面了')
  // 这里可以发起 API 请求、操作 DOM
})

onUnmounted(() => {
  console.log('组件即将销毁')
  // 这里清理定时器、取消事件监听
})
</script>

五、Vue Router：页面路由管理

一个真正的网站不可能只有一个页面。Vue Router 就是帮你管理多个页面的工具。

5.1 安装和配置

npm install vue-router@4

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')  // 懒加载
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: () => import('../views/UserDetail.vue')
  }
]

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

export default router

// main.js 中引入路由
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

5.2 在组件中使用

<!-- App.vue -->
<template>
  <nav>
    <!-- 用 router-link 代替 a 标签 -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>

  <!-- 路由匹配的组件会渲染在这里 -->
  <router-view />
</template>

<!-- 在组件中编程式导航 -->
<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 跳转到指定页面
const goToUser = (id) => {
  router.push(`/user/${id}`)
}

// 获取路由参数
const userId = route.params.id
</script>

六、Pinia：状态管理

你有没有遇到过这种情况：组件 A 的数据，组件 B 也要用？用 props 一层层传太麻烦了。Pinia 就是解决这个问题的。

我当初学 Vuex 的时候被各种概念搞得头大，Pinia 就简单多了。

6.1 安装和使用

npm install pinia

// src/stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  // 状态（state）
  const count = ref(0)

  // 计算属性（getter）
  const doubleCount = computed(() => count.value * 2)

  // 方法（action）
  function increment() {
    count.value++
  }

  function reset() {
    count.value = 0
  }

  return { count, doubleCount, increment, reset }
})

<!-- 在组件中使用 -->
<template>
  <div>
    <p>计数：{{ counter.count }}</p>
    <p>双倍：{{ counter.doubleCount }}</p>
    <button @click="counter.increment()">加 1</button>
    <button @click="counter.reset()">重置</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

七、实战项目：待办事项应用

光说不练假把式。现在我们来做一个完整的待办事项应用，把前面学的东西全用上。

7.1 项目结构

src/
├── components/
│   ├── TodoInput.vue      # 输入组件
│   ├── TodoList.vue       # 列表组件
│   └── TodoItem.vue       # 单项组件
├── stores/
│   └── todoStore.js       # 状态管理
├── App.vue
└── main.js

7.2 状态管理

// src/stores/todoStore.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useTodoStore = defineStore('todo', () => {
  const todos = ref([])
  let nextId = 1

  const finishedCount = computed(() =>
    todos.value.filter(t => t.finished).length
  )

  const unfinishedCount = computed(() =>
    todos.value.filter(t => !t.finished).length
  )

  function addTodo(title) {
    todos.value.push({
      id: nextId++,
      title,
      finished: false,
      createdAt: new Date().toLocaleString()
    })
  }

  function toggleTodo(id) {
    const todo = todos.value.find(t => t.id === id)
    if (todo) {
      todo.finished = !todo.finished
    }
  }

  function removeTodo(id) {
    todos.value = todos.value.filter(t => t.id !== id)
  }

  return {
    todos,
    finishedCount,
    unfinishedCount,
    addTodo,
    toggleTodo,
    removeTodo
  }
})

7.3 输入组件

<!-- src/components/TodoInput.vue -->
<template>
  <div class="todo-input">
    <input
      v-model="newTodo"
      @keyup.enter="handleAdd"
      placeholder="输入待办事项，按回车添加"
    />
    <button @click="handleAdd">添加</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useTodoStore } from '@/stores/todoStore'

const todoStore = useTodoStore()
const newTodo = ref('')

function handleAdd() {
  const title = newTodo.value.trim()
  if (!title) return

  todoStore.addTodo(title)
  newTodo.value = ''
}
</script>

<style scoped>
.todo-input {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.todo-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.todo-input button {
  padding: 10px 20px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

7.4 列表和单项组件

<!-- src/components/TodoItem.vue -->
<template>
  <li :class="{ finished: todo.finished }">
    <input
      type="checkbox"
      :checked="todo.finished"
      @change="todoStore.toggleTodo(todo.id)"
    />
    <span>{{ todo.title }}</span>
    <button @click="todoStore.removeTodo(todo.id)">删除</button>
  </li>
</template>

<script setup>
import { useTodoStore } from '@/stores/todoStore'

const props = defineProps({
  todo: {
    type: Object,
    required: true
  }
})

const todoStore = useTodoStore()
</script>

<style scoped>
li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

li.finished span {
  text-decoration: line-through;
  color: #999;
}

li button {
  margin-left: auto;
  background: #ff4d4f;
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

<!-- src/components/TodoList.vue -->
<template>
  <div>
    <ul>
      <TodoItem
        v-for="todo in todoStore.todos"
        :key="todo.id"
        :todo="todo"
      />
    </ul>
    <div class="stats" v-if="todoStore.todos.length">
      <p>已完成：{{ todoStore.finishedCount }}</p>
      <p>未完成：{{ todoStore.unfinishedCount }}</p>
    </div>
  </div>
</template>

<script setup>
import { useTodoStore } from '@/stores/todoStore'
import TodoItem from './TodoItem.vue'

const todoStore = useTodoStore()
</script>

7.5 组装页面

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>📝 我的待办事项</h1>
    <TodoInput />
    <TodoList />
  </div>
</template>

<script setup>
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
</script>

<style>
#app {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  font-family: sans-serif;
}

h1 {
  text-align: center;
  color: #42b883;
}
</style>

到这里，一个功能完整的待办事项应用就完成了。你可以跑起来看看效果。

八、AI 赋能开发：ChatGPT 与 Function Calling

2024 年了，不会用 AI 工具的前端不是好前端。我带的新人里，会用 AI 辅助开发的，效率是不用的 3 倍以上。

8.1 ChatGPT 辅助编码

ChatGPT 不只是聊天机器人，它是你的编程助手。

使用技巧：
1. 描述清楚需求，给出上下文
2. 让它解释代码，而不只是生成代码
3. 让它帮你 debug
4. 让它帮你写测试用例

举个例子，你可以这样问 ChatGPT：

我有一个 Vue 3 组件，需要在用户输入搜索关键词时，延迟 300ms 再发起请求（防抖），请帮我用组合式 API 实现一个自定义 Hook。

ChatGPT 会给你生成这样的代码：

// useDebounce.js
import { ref, watch } from 'vue'

export function useDebounce(value, delay = 300) {
  const debouncedValue = ref(value.value)
  let timer

  watch(value, (newVal) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      debouncedValue.value = newVal
    }, delay)
  })

  return debouncedValue
}

8.2 AI 写作辅助

AI 写作不只是写文章，在前端开发中，它可以帮你：

生成组件文档
编写 README
生成 API 接口文档
编写单元测试

// 你可以让 ChatGPT 帮你写组件的 JSDoc 注释
/**
 * TodoInput 组件
 *
 * @description 待办事项输入组件，支持回车和按钮两种方式添加
 * @example
 * <TodoInput @add="handleAdd" />
 *
 * @events
 * - add(title: string) 当用户添加新待办时触发
 */

8.3 Function Calling：让 AI 调用你的代码

这是今年最重要的 AI 能力之一。Function Calling 让 ChatGPT 可以调用你定义的函数。

什么意思？举个例子：

用户说："帮我查一下北京明天的天气"

传统 AI 只能回答文字。但有了 Function Calling，AI 可以：

识别出用户想查天气
自动调用你定义的 getWeather 函数
拿到结果后，用自然语言回复用户

// 定义函数供 AI 调用
const functions = {
  getWeather: async (city) => {
    // 实际项目中这里会调用天气 API
    const weatherData = {
      city,
      temperature: '25°C',
      condition: '晴',
      humidity: '60%'
    }
    return weatherData
  },

  searchTodos: async (keyword) => {
    // 在你的待办应用中，让 AI 帮你搜索待办
    const results = todoStore.todos.filter(t =>
      t.title.includes(keyword)
    )
    return results
  }
}

// 告诉 AI 有哪些函数可以调用
const toolDefinitions = [
  {
    type: 'function',
    function: {
      name: 'getWeather',
      description: '获取指定城市的天气信息',
      parameters: {
        type: 'object',
        properties: {
          city: {
            type: 'string',
            description: '城市名称，如：北京、上海'
          }
        },
        required: ['city']
      }
    }
  },
  {
    type: 'function',
    function: {
      name: 'searchTodos',
      description: '搜索待办事项',
      parameters: {
        type: 'object',
        properties: {
          keyword: {
            type: 'string',
            description: '搜索关键词'
          }
        },
        required: ['keyword']
      }
    }
  }
]

<!-- 在 Vue 组件中使用 AI 对话 -->
<template>
  <div class="ai-chat">
    <div class="messages">
      <div v-for="msg in messages" :key="msg.id" :class="msg.role">
        {{ msg.content }}
      </div>
    </div>
    <input v-model="userInput" @keyup.enter="sendMessage" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const messages = ref([])
const userInput = ref('')

async function sendMessage() {
  const content = userInput.value.trim()
  if (!content) return

  messages.value.push({ id: Date.now(), role: 'user', content })
  userInput.value = ''

  // 调用 AI API（伪代码）
  const response = await callAIWithFunctions(content, toolDefinitions)

  // 如果 AI 决定调用函数
  if (response.functionCall) {
    const { name, arguments: args } = response.functionCall
    const result = await functions[name](...Object.values(args))

    // 把函数结果再发给 AI，让它生成自然语言回复
    const finalResponse = await callAI(
      `用户问了：${content}，函数返回结果：${JSON.stringify(result)}`
    )
    messages.value.push({
      id: Date.now(),
      role: 'assistant',
      content: finalResponse
    })
  } else {
    messages.value.push({
      id: Date.now(),
      role: 'assistant',
      content: response.content
    })
  }
}
</script>

💡 实际应用场景：

场景 Function Calling 的作用

智能客服调用订单查询、退款等内部 API

数据看板调用数据查询函数，生成报表

待办管理用自然语言添加、搜索、删除待办

代码助手调用代码分析、格式化等工具函数

场景	Function Calling 的作用
智能客服	调用订单查询、退款等内部 API
数据看板	调用数据查询函数，生成报表
待办管理	用自然语言添加、搜索、删除待办
代码助手	调用代码分析、格式化等工具函数

九、常见问题解答

我带新人这么多年，这些问题几乎每个人都会遇到：

Q1：`npm install` 报错 ERESOLVE 怎么办？

# 方法一：清除缓存重装
rm -rf node_modules package-lock.json
npm install

# 方法二：使用 --legacy-peer-deps
npm install --legacy-peer-deps

Q2：页面刷新后 404 怎么解决？

这是 Vue Router 的经典问题。开发环境没问题，部署到服务器就 404。

解决方案取决于你的服务器：

# Nginx 配置
location / {
  try_files $uri $uri/ /index.html;
}

// 或者改用 hash 模式（URL 会带 #）
const router = createRouter({
  history: createWebHashHistory(),  // 改这里
  routes
})

Q3：组件之间怎么通信？

关系	方式
父 → 子	props
子 → 父	emit
兄弟组件	Pinia / 事件总线
跨层级	Pinia / provide-inject

Q4：为什么我的响应式数据不生效？

90% 的情况是忘记了解包：

// ❌ 错误
const count = ref(0)
console.log(count)  // 打印的是 Ref 对象，不是数字

// ✅ 正确
console.log(count.value)  // 才是数字 0

// 在 template 中会自动解包，不需要 .value
// {{ count }}  ✅ 正确

十、学习建议和避坑指南

10.1 学习路径建议

第一阶段（1-2 周）：
├── Vue 3 基础语法
├── 组件化开发
├── 响应式原理
└── 完成一个 Todo 应用

第二阶段（2-3 周）：
├── Vue Router 路由
├── Pinia 状态管理
├── Axios 网络请求
└── 完成一个多页面应用

第三阶段（3-4 周）：
├── Element Plus 组件库
├── 权限控制
├── 接口联调
└── 完成一个后台管理系统

第四阶段（持续）：
├── TypeScript + Vue
├── 单元测试
├── 性能优化
├── AI 工具辅助开发
└── 源码阅读

10.2 避坑指南

不要一上来就学源码。我当初花了两周看 Vue 源码，结果啥也没学会。先把 API 用熟，再看源码。
不要同时学 Vue 2 和 Vue 3。现在直接学 Vue 3，Vue 2 已经停止维护了。
不要跳过官方文档。Vue 的官方文档是我见过写得最好的技术文档之一，地址：https://cn.vuejs.org
不要只看不练。看懂了不代表会写了。每个知识点都要动手敲一遍。
善用 AI 工具。遇到报错，先把报错信息复制给 ChatGPT，80% 的问题它能帮你解决。但记住，AI 给你的代码一定要理解后再用，不要无脑复制。

10.3 推荐资源

资源	说明
Vue 官方文档	最权威的学习资料
Vue Mastery	视频教程，讲得很好
Vue.js 设计与实现（霍春阳）	深入理解 Vue 原理
GitHub 优秀项目	看别人的代码学最佳实践

结语

写到这里，这篇文章已经涵盖了 Vue 生态的核心内容和 AI 辅助开发的基本用法。

我带过很多应届生，最终成长最快的，不是天赋最高的，而是动手最多、最善于利用工具的。Vue 生态很大，你不需要一次学完，按照我给你的路径，一步一步来就好。

最后送你一句话：代码是写出来的，不是看出来的。

打开你的编辑器，现在就开始写吧。

📌 如果这篇文章对你有帮助，欢迎收藏和转发。有问题可以在评论区留言，我会定期回复。

下一篇文章预告：《Vue 3 + TypeScript 企业级项目实战》

标签:ChatGPTFunction CallingAI写作

最热最新

暂无评论

为你推荐

暂无相关推荐

Vue.js 生态系统深度探索与项目实战：从零搭建到 AI 赋能开发

一、Vue.js 到底是什么？

二、Vue 生态系统全景图

三、环境准备：5 分钟搭好开发环境

3.1 安装 Node.js

3.2 安装 VS Code

3.3 用 Vite 创建 Vue 3 项目

四、核心概念：用大白话讲明白

4.1 组件化思维

4.2 响应式数据

4.3 生命周期

五、Vue Router：页面路由管理

5.1 安装和配置

5.2 在组件中使用

六、Pinia：状态管理

6.1 安装和使用

七、实战项目：待办事项应用

7.1 项目结构

7.2 状态管理

7.3 输入组件

7.4 列表和单项组件

7.5 组装页面

八、AI 赋能开发：ChatGPT 与 Function Calling

8.1 ChatGPT 辅助编码

8.2 AI 写作辅助

8.3 Function Calling：让 AI 调用你的代码

九、常见问题解答

Q1：`npm install` 报错 ERESOLVE 怎么办？

Q2：页面刷新后 404 怎么解决？

Q3：组件之间怎么通信？

Q4：为什么我的响应式数据不生效？

十、学习建议和避坑指南

10.1 学习路径建议

10.2 避坑指南

10.3 推荐资源

结语

评论 0

为你推荐

精选内容

Vue.js 生态系统深度探索与项目实战：从零搭建到 AI 赋能开发

一、Vue.js 到底是什么？

二、Vue 生态系统全景图

三、环境准备：5 分钟搭好开发环境

3.1 安装 Node.js

3.2 安装 VS Code

3.3 用 Vite 创建 Vue 3 项目

四、核心概念：用大白话讲明白

4.1 组件化思维

4.2 响应式数据

4.3 生命周期

五、Vue Router：页面路由管理

5.1 安装和配置

5.2 在组件中使用

六、Pinia：状态管理

6.1 安装和使用

七、实战项目：待办事项应用

7.1 项目结构

7.2 状态管理

7.3 输入组件

7.4 列表和单项组件

7.5 组装页面

八、AI 赋能开发：ChatGPT 与 Function Calling

8.1 ChatGPT 辅助编码

8.2 AI 写作辅助

8.3 Function Calling：让 AI 调用你的代码

九、常见问题解答

Q1：npm install 报错 ERESOLVE 怎么办？

Q2：页面刷新后 404 怎么解决？

Q3：组件之间怎么通信？

Q4：为什么我的响应式数据不生效？

十、学习建议和避坑指南

10.1 学习路径建议

10.2 避坑指南

10.3 推荐资源

结语

评论 0

为你推荐

相关推荐

精选内容

Q1：`npm install` 报错 ERESOLVE 怎么办？