零基础也能上手的 Vue.js 入门实战指南
大家好，我是一个刚毕业的大专生，自学前端半年多，靠啃开源项目源码+疯狂刷 GitHub 找到了现在这份工作。入职新公司已经两个月了，目前在做内部管理系统的前端开发。上周五晚上还在和后端联调一个 Springboot 接口，突然被产品经理拉进会议室说：“这个页面下周就要上线，你能不能用 Vue 重写一下？”
我当时心里一万个草泥马奔腾而过——不是因为不会 Vue，而是因为我两个月前才从 React 切过来！但谁让我是新人呢？只能硬着头皮上。
不过话说回来，Vue 真的挺友好的。尤其对于零基础的朋友来说，比 React 友善太多了（React 的 hooks 我至今还会偶尔搞混）。今天这篇文章，就是想把我这两个月踩过的坑、走过的弯路，用最接地气的方式分享出来。不讲理论大道理，直接上代码、跑案例、解决实际问题。
为什么我们项目选了 Vue + Springboot？
先说背景。我们公司是个传统企业转型做 SaaS 平台的，后端清一色 Springboot，数据库是 MySQL + Redis。前端团队之前用的是 jQuery + Bootstrap，界面老旧得像 2010 年的网吧系统。领导看不下去了，决定重构。
技术选型会上，有人推 React，有人推 Angular，最后 PM 一句“Vue 上手快，文档全，社区活跃”直接拍板。我猜真实原因是：后端老哥们也能改前端代码（Springboot 开发顺手写点 Vue 模板，真香）。
所以，如果你公司也是 Java 技术栈为主，Vue 确实是个低摩擦的选择。前后端分离架构下，Springboot 提供 RESTful API，Vue 负责渲染页面，配合起来丝滑得很。
从一行 HTML 开始：别被“框架”吓到
很多新手一听到“Vue.js”，就觉得必须装 Node、Webpack、Vite、一堆依赖……其实完全不用！
Vue 最大的优点之一就是：渐进式。你可以只引入一个 <script> 标签，立马体验响应式数据绑定。
<!DOCTYPE html>
<html>
<head>
<title>我的第一个 Vue 页面</title>
<!-- 直接从 CDN 引入 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input v-model="message" placeholder="试试改我">
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>
把这段代码保存成 index.html，双击打开浏览器——恭喜你，已经写出了第一个 Vue 应用！
💡 小技巧：开发初期我经常这样快速验证想法，不用开终端、不用等构建，改完刷新就行。适合写 demo 给产品看，或者调试某个 UI 交互逻辑。
项目初始化：Vite 是真香！
当你准备正式开发时，就得用工程化工具了。Vue 官方推荐 Vite（读作 /vit/，法语“快”的意思），确实快得离谱。
安装命令贼简单：
npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev
几秒钟就跑起来了！对比 Webpack 动辄半分钟的启动时间，Vite 冷启动基本秒开，HMR（热更新）更是快到飞起。我第一次用的时候还以为卡死了，结果页面已经能点了……
项目结构也很清晰：
my-vue-app/
├── public/ # 静态资源（favicon, robots.txt）
├──── src/
│ ├── assets/ # 图片、字体等
│ ├── components/ # 组件放这里
│ ├── views/ # 页面级组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── package.json
└── vite.config.js # 配置文件
🚨 血泪教训：千万别手动配置 Webpack！除非你想体验“配到凌晨三点，发现少了个 loader”的快乐。Vite 默认配置对 Vue 3 + TypeScript 支持极佳，开箱即用。
和 Springboot 对接：跨域问题怎么破？
开发中最头疼的往往是前后端联调。我们后端是 Springboot，默认端口 8080；前端 Vite 默认 5173。浏览器一看：不同源！直接 block 掉请求。
解决方案有两种：
方案一：后端加 CORS（推荐）
让后端在 Springboot 里加个注解：
@CrossOrigin(origins = "http://localhost:5173")
@RestController
public class UserController {
// ...
}
或者全局配置（更省事）：
@Configuration
public class CorsConfig {
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration config = new CorsConfiguration();
config.setAllowedOrigins(Arrays.asList("http://localhost:5173"));
config.setAllowedMethods(Arrays.asList("*"));
config.setAllowedHeaders(Arrays.asList("*"));
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return source;
}
}
方案二：前端配代理（开发环境专用）
在 vite.config.js 里加代理：
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
然后前端请求写成 /api/users，Vite 会自动转发到 http://localhost:8080/users。
⚠️ 注意：代理只在开发环境生效！生产环境必须靠 Nginx 或后端解决跨域。
组件化实战：写一个用户列表页
假设我们要做一个用户管理页面，从 Springboot 接口获取用户列表并展示。
步骤 1：定义 API 接口
// src/api/user.js
import axios from 'axios'
const api = axios.create({
baseURL: '/api' // 配合 Vite 代理
})
export const fetchUsers = () => api.get('/users')
步骤 2：创建 UserList 组件
<!-- src/components/UserList.vue -->
<template>
<div class="user-list">
<h2>用户列表 (共 {{ users.length }} 人)</h2>
<ul v-if="!loading">
<li v-for="user in users" :key="user.id">
{{ user.name }} - {{ user.email }}
</li>
</ul>
<p v-else>加载中...</p>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { fetchUsers } from '@/api/user'
const users = ref([])
const loading = ref(true)
onMounted(async () => {
try {
const res = await fetchUsers()
users.value = res.data
} catch (err) {
console.error('获取用户失败:', err)
// 这里可以弹 toast 提示
} finally {
loading.value = false
}
})
</script>
<style scoped>
.user-list {
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
}
</style>
步骤 3：在页面中使用
<!-- src/views/UserManagement.vue -->
<template>
<UserList />
</template>
<script setup>
import UserList from '@/components/UserList.vue'
</script>
是不是超清晰？逻辑（script）、结构（template）、样式（style）三分离，Vue 单文件组件（SFC）的设计真的太适合协作了。
调试技巧：Vue Devtools 救我狗命
刚入职那会儿，遇到数据不更新就懵。后来老员工甩给我一个链接：Vue Devtools。
装上 Chrome 插件后，F12 打开就能看到组件树、状态变化、事件触发……甚至能直接修改 data 调试 UI！
比如上面的 users 数组，Devtools 里可以直接展开看每个字段，还能 mock 数据测试边界情况。比 console.log 高效一百倍。
🔍 冷知识：Devtools 还支持时间旅行调试（Time Travel Debugging）！你可以回退到任意一次 state 变更，看看 UI 是怎么一步步变成 bug 的。
性能与兼容性：别让 IE11 拖后腿
虽然我们公司内部系统不用兼容 IE，但如果你做 ToB 项目，可能还得考虑老浏览器。
Vue 3 默认不支持 IE11（用了 Proxy），但 Vue 2 依然坚挺。如果必须兼容，建议：
- 用 Vue 2 + Composition API 插件（接近 Vue 3 语法）
- 或者用 Babel 转译 + polyfill（但体积会大不少）
性能方面，记住几个关键点：
| 优化项 | 建议 |
|---|---|
| 列表渲染 | 必须加 key，且不要用 index |
| 计算属性 | 用 computed 缓存复杂逻辑 |
| 事件监听 | 大量元素用事件委托 |
| 资源加载 | 图片懒加载、按需引入组件 |
我们有一次线上事故就是因为没加 key，表格排序后数据错乱，用户差点投诉到 CEO 那里……从此我再也不敢偷懒了。
开源的力量：站在巨人的肩膀上
作为喜欢研究 GitHub 源码的人，我强烈建议新手多看看优秀项目。比如：
- vuejs/vue：官方仓库，学习设计思想
- element-plus：PC 端 UI 库，代码规范极佳
- vite：现代构建工具，TS 写得飞起
我经常在午休时间 clone 一个 star 高的项目，跑起来看看结构，再读读核心模块的实现。看十遍文档，不如读一遍源码。
上周我还给一个 Vue 组件库提了 PR，修复了一个小 bug。虽然只是改了两行代码，但 merge 后那种成就感，比吃火锅还爽！
写在最后：技术分享是最好的成长
入职这两个月，我最大的感悟是：不要怕暴露自己“菜”。我一开始连 ref 和 reactive 都分不清，问同事的时候脸都红了。但他们都很耐心，还夸我“问题问得具体”。
现在我也开始在团队内做技术分享，上周刚讲了《Vue 3 响应式原理浅析》，虽然只有 15 分钟，但准备过程逼我深入看了源码，收获巨大。
如果你也是零基础转前端，别焦虑。每天写点代码，每周搞懂一个小知识点，三个月后回头看，你会惊讶于自己的进步。
GitHub 上有无数免费资源，Vue 文档堪称教科书级别，社区氛围也超好。哪怕你是大专学历、非科班出身，只要肯动手、敢提问，一样能闯出一片天。
最后送大家一句我在 GitHub 主页写的签名：
Code is cheap, show me the repo.
（代码很廉价，有本事把仓库亮出来！）
共勉！
评论 0