Vue.js 生态系统深度探索与项目实战：从零开始搭建你的第一个应用

LeetCode逃兵

2026-03-02 14:28

阅读 593

大家好，我是你们的老朋友，一名985高校毕业的全栈工程师，也在掘金上写了好几年的前端入门教程。今天我想和大家聊聊 Vue.js——这个我职业生涯中用得最多、也最推荐给初学者的前端框架。

为什么写这篇教程？因为最近有不少刚入行的朋友私信我：“Vue到底要学哪些东西？官方文档太散了，生态又庞大，不知道从哪下手。”我当初学的时候也是一头雾水：Vue 2、Vue 3、Composition API、Vite、Pinia、Vue Router……光是名字就让人眼花缭乱。所以，我决定写一篇真正面向零基础的实战指南，带你一步步走进 Vue 的世界。

更重要的是，我会特别强调安全意识——在开发中，很多新手会忽略数据验证、XSS 防护等问题，这在真实项目中可能带来严重风险。别担心，我会在合适的地方提醒你。

一、Vue.js 是什么？能做什么？

简单来说，Vue.js 是一个用于构建用户界面的 JavaScript 框架。你可以用它来开发网页、手机 App（通过框架如 UniApp）、甚至桌面应用（通过 Electron）。

它的核心优势是：

上手快：语法接近原生 HTML + JavaScript
渐进式：你可以只用它的一部分，也可以构建大型应用
生态完善：有官方工具链支持，社区活跃

📌 小贴士：Vue 3 是当前主流版本（2024年），我们全程使用 Vue 3 + Vite 开发。

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

第一步：安装 Node.js

Vue 项目依赖 Node.js。请前往 https://nodejs.org 下载 LTS 版本（长期支持版），安装时一路“下一步”即可。

安装完成后，打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），输入：

node -v
npm -v

如果看到版本号（如 v18.17.0 和 9.6.7），说明安装成功。

第二步：创建 Vue 项目

我们使用官方推荐的 Vite 构建工具（比旧的 Vue CLI 更快）：

npm create vue@latest my-vue-app

执行后，你会看到一系列选项。对于新手，建议按以下选择：

问题	推荐选择
Add TypeScript?	No（先学 JS，再进阶 TS）
Add JSX Support?	No
Add Vue Router?	Yes（路由很重要）
Add Pinia?	Yes（状态管理）
Add Vitest?	No
Add Cypress?	No
Add ESLint?	Yes（代码规范）
Add Prettier?	Yes（自动格式化）

然后进入项目目录并启动：

cd my-vue-app
npm install
npm run dev

浏览器会自动打开 http://localhost:5173，看到 Vue 的欢迎页面，恭喜你！环境搭建完成 ✅

三、核心概念：用最简单的语言讲清楚

1. 响应式数据（Reactivity）

这是 Vue 的魔法所在。当你修改数据，页面会自动更新。

<!-- src/App.vue -->
<script setup>
import { ref } from 'vue'

// 定义响应式变量
const count = ref(0)

// 修改函数
function increment() {
  count.value++ // 注意：ref 变量要用 .value 访问
}
</script>

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

💡 我当初学的时候总忘记写 .value，结果数据不更新。记住：在 <script> 里操作 ref 要加 .value，在 <template> 里不用！

2. 组件化（Component）

Vue 应用由一个个组件组成。比如上面的 App.vue 就是一个组件。

你可以新建 src/components/HelloWorld.vue：

<script setup>
defineProps({
  msg: String // 接收父组件传来的 prop
})
</script>

<template>
  <h2>{{ msg }}</h2>
</template>

在 App.vue 中使用：

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="你好，Vue！" />
</template>

3. 路由（Vue Router）

让单页应用（SPA）实现多页面跳转。

默认已安装，查看 src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    }
  ]
})

export default router

新增一个页面：src/views/AboutView.vue

<template>
  <h1>关于我们</h1>
</template>

然后在路由配置中添加：

// 在 routes 数组中加入
{
  path: '/about',
  name: 'about',
  component: () => import('../views/AboutView.vue')
}

在 App.vue 中加导航：

<template>
  <nav>
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view />
</template>

4. 状态管理（Pinia）

当多个组件需要共享数据时，用 Pinia。

创建 src/stores/counter.js：

import { defineStore } from 'pinia'

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

在组件中使用：

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>全局计数：{{ counter.count }}</p>
  <button @click="counter.increment">全局+1</button>
</template>

四、实战项目：做一个安全的待办事项（Todo List）

我们将做一个带输入验证和XSS 防护的 Todo 应用。

步骤 1：清理默认文件

删除 src/views/AboutView.vue 和 src/components/HelloWorld.vue，保留 HomeView.vue。

步骤 2：编写 Todo 组件

src/components/TodoList.vue：

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

const todos = ref([])
const newTodo = ref('')

function addTodo() {
  // 🔒 安全检查 1：防止空输入
  if (!newTodo.value.trim()) return
  
  // 🔒 安全检查 2：防止 XSS（跨站脚本攻击）
  // 简单做法：只允许字母、数字、中文、空格
  const safeText = newTodo.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s]/g, '')
  
  if (safeText !== newTodo.value) {
    alert('输入包含非法字符，请只使用文字和数字')
    return
  }

  todos.value.push({
    id: Date.now(),
    text: safeText,
    done: false
  })
  newTodo.value = ''
}

function removeTodo(id) {
  todos.value = todos.value.filter(todo => todo.id !== id)
}
</script>

<template>
  <div>
    <h2>我的待办事项</h2>
    
    <!-- 输入框 -->
    <input 
      v-model="newTodo" 
      @keyup.enter="addTodo"
      placeholder="输入任务（回车添加）"
      class="todo-input"
    />
    
    <!-- 列表 -->
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input 
          type="checkbox" 
          v-model="todo.done" 
        />
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.done {
  text-decoration: line-through;
  color: #999;
}
.todo-input {
  padding: 8px;
  margin: 10px 0;
  width: 300px;
}
</style>

步骤 3：在首页使用

修改 src/views/HomeView.vue：

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

<template>
  <main>
    <TodoList />
  </main>
</template>

步骤 4：运行并测试

启动项目，尝试：

输入正常文字 → 成功添加
输入 <script>alert(1)</script> → 被过滤并提示
输入空格 → 不添加

✅ 这就是安全意识的体现！很多教程只教功能，不教防护，但真实项目必须考虑这些。

五、新手常见问题解答

Q1：为什么我的数据变了，页面没更新？

检查是否用了 ref 或 reactive
如果是对象属性，确保是响应式的（Vue 3 一般没问题）
不要直接修改数组索引（如 arr[0] = 'new'），用 arr.splice() 或 Vue.set（Vue 2）

Q2：`<script setup>` 是什么？和普通 script 有什么区别？

<script setup> 是 Vue 3 的编译时语法糖，更简洁
所有顶层变量和函数自动暴露给模板
推荐新手直接用它，不用纠结选项式 API

Q3：如何调试 Vue 应用？

安装 Vue DevTools 浏览器插件
在代码中用 console.log 打印
使用 VS Code 的 debugger（配合 Chrome）

Q4：GPT-4 能帮我写 Vue 代码吗？

当然可以！比如你可以问 GPT-4：“用 Vue 3 写一个带搜索功能的用户列表组件，要求防 XSS”。

但要注意：

不要盲目复制，理解每一行代码
验证安全性，AI 可能忽略防护逻辑
结合官方文档，AI 的知识可能过时（截至 v0 版本）

📌 提醒：本文写作时参考的是 Vue 3.4 + Vite 5 + Pinia 2 的 v0 稳定版本，确保你使用的是最新稳定版。

六、学习建议与下一步路线

初学者避坑指南

不要一上来就学 Vuex → 用 Pinia（更简单）
不要过早引入 TypeScript → 先掌握 JS 核心
不要忽视 CSS → Vue 组件也需要样式
不要跳过 ESLint/Prettier → 养成好习惯

阶段	学习内容
第1周	Vue 基础语法、组件通信
第2周	Vue Router、Pinia
第3周	表单处理、API 请求（用 `fetch` 或 `axios`）
第4周	项目实战：博客、电商首页等
进阶	TypeScript、单元测试、性能优化

结语

Vue.js 的生态系统看似庞大，但只要你按部就班，从核心概念入手，再逐步扩展到路由、状态管理、安全防护，很快就能上手真实项目。

记住：写代码不仅是实现功能，更是守护用户的安全。哪怕是一个简单的输入框，也要考虑恶意输入的可能性。

如果你觉得这篇教程有帮助，欢迎在掘金给我点赞关注！我是那个坚持写“人话教程”的全栈工程师，我们下期再见！

最后提醒：技术日新月异，但基础永远重要。稳扎稳打，你一定能成为优秀的前端开发者 💪

标签:GPT-4v0

最热最新

暂无评论

为你推荐

暂无相关推荐

Vue.js 生态系统深度探索与项目实战：从零开始搭建你的第一个应用

一、Vue.js 是什么？能做什么？

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

第一步：安装 Node.js

第二步：创建 Vue 项目

三、核心概念：用最简单的语言讲清楚

1. 响应式数据（Reactivity）

2. 组件化（Component）

3. 路由（Vue Router）

4. 状态管理（Pinia）

四、实战项目：做一个安全的待办事项（Todo List）

步骤 1：清理默认文件

步骤 2：编写 Todo 组件

步骤 3：在首页使用

步骤 4：运行并测试

五、新手常见问题解答

Q1：为什么我的数据变了，页面没更新？

Q2：`<script setup>` 是什么？和普通 script 有什么区别？

Q3：如何调试 Vue 应用？

Q4：GPT-4 能帮我写 Vue 代码吗？

六、学习建议与下一步路线

初学者避坑指南

推荐学习路径

推荐资源

结语

评论 0

为你推荐

精选内容

Vue.js 生态系统深度探索与项目实战：从零开始搭建你的第一个应用

一、Vue.js 是什么？能做什么？

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

第一步：安装 Node.js

第二步：创建 Vue 项目

三、核心概念：用最简单的语言讲清楚

1. 响应式数据（Reactivity）

2. 组件化（Component）

3. 路由（Vue Router）

4. 状态管理（Pinia）

四、实战项目：做一个安全的待办事项（Todo List）

步骤 1：清理默认文件

步骤 2：编写 Todo 组件

步骤 3：在首页使用

步骤 4：运行并测试

五、新手常见问题解答

Q1：为什么我的数据变了，页面没更新？

Q2：<script setup> 是什么？和普通 script 有什么区别？

Q3：如何调试 Vue 应用？

Q4：GPT-4 能帮我写 Vue 代码吗？

六、学习建议与下一步路线

初学者避坑指南

推荐学习路径

推荐资源

结语

评论 0

为你推荐

相关推荐

精选内容

Q2：`<script setup>` 是什么？和普通 script 有什么区别？