学了三门编程语言我终于开始懂前端了今天想聊聊JavaWeb学习路上绕不开的一座大山——Vue。事情是这样的我在学JavaWeb的时候前后端写了好多页面JSP、Thymeleaf都折腾过结果发现一个问题后端写得再爽页面稍微复杂一点什么联动、局部刷新、组件复用用传统模板引擎直接就是一场噩梦。后来在项目里接触到前后端分离点开同事给的Vue工程第一眼是被那堆node_modules震撼的第二眼是被那些双大括号的写法唬住的但真正跑起来之后我居然有点上瘾了。这篇日记就记录一下我从零开始啃Vue基础的全过程包括环境配置、核心语法、组件通信、路由、打包上线这几个环节以及一路上踩过的各种坑。如果你和我一样主攻Java后端想快速把Vue这块骨头啃下来配合SpringBoot做完整项目这篇应该能帮你在起步阶段少走不少弯路。Vue不是一门语言它是一个JavaScript框架早期它给自己定位叫“渐进式框架”。这句话一开始我完全没感觉直到自己上手才理解它不会让你一上来就重构整个项目你可以在一个页面里逐步引入它甚至就用一个CDN的script标签把它引入进来写两个数据绑定感受一下它到底解决什么问题。它的核心思路是数据驱动视图你只关心数据的变化页面自动跟随更新。这和以前用jQuery手动操作DOM完全是两个时代的思路。明白了这个点后面所有语法理解起来都会顺很多。1. 环境和工程搭建别再傻傻用Vue CLI了1.1 选Vite还是Vue CLI我的最终选择很多Vue入门教程还在教npm全局安装vue-cli脚手架然后vue create创建项目。我一开始也照做了但后来一查Vue CLI已经处于维护状态官方推荐的是Vite。Vite这个词在热词里没有直接出现但如果你搜“vue安装及环境配置”搜索结果里一定会频繁看到它。简单说Vite是一个构建工具它最大的特点是开发启动快得离谱利用浏览器原生ESModule按需编译而不是把所有文件打包后在启动服务器。我的一台普通笔记本之前用Webpack跑一个Vue2项目冷启动要50多秒换Vite之后基本秒开。学习阶段启动快就意味迭代快心情好很多所以我最终用的是Vite构建Vue3工程。Node.js是必须先装的Vite依赖它运行。装Node的时候注意两点一是版本不要装太老建议16以上Vite官方要求Node 14.18或16二是npm源建议换成国内镜像不然下载依赖的时候你会怀疑人生。我的做法是在终端执行npm config set registry https://registry.npmmirror.com。创建Vue工程的命令很简单npm create vitelatest my-vue-app -- --template vue执行完了之后cd进去npm install装依赖然后npm run dev启动开发服务器。看到终端打印出那个Local: http://localhost:5173/ 的时候你的基础环境就算搭起来了。1.2 开发工具和IDEA的配置思路开发工具我用的是IDEA因为我整个JavaWeb学习都在IDEA里切来切去太麻烦。IDEA里装一个Vue.js插件就能对.vue文件提供语法高亮和基础提示。如果你习惯用VS Code那就装Vue官方推荐的Volar插件注意别装成了以前那个VeturVetur对Vue3支持不好。这里有个热词叫“idea运行javaweb项目配置”如果说的是前后端分离场景下的运行方式我的习惯是后端SpringBoot模块用IDEA启动前端Vue工程直接在IDEA内置的Terminal里跑npm run dev两者不冲突。只要后端配上CORS跨域支持前端在开发环境访问http://localhost:8080后端就没问题。IDEA里跑npm命令还有一个优势可以直接在Terminal面板里看Vite的报错不用额外开一个终端窗口。最后强烈建议看一眼生成的package.json文件理解scripts里dev、build这两条命令的作用。dev是开发模式build是打包生产代码。很多新手不知道build之后dist文件夹是干嘛用的后面我专门讲这里先不展开。2. 核心语法从插值表达式到双向绑定2.1 模板语法和数据绑定双大括号背后的逻辑Vue3工程建好后你会看到App.vue里面是典型的单文件组件结构一个template标签写HTML一个script标签写数据和方法一个style标签写样式。这种把HTML、JS、CSS放在一个文件里的组织方式一开始我很不适应但用久了之后会觉得太爽了因为一个组件的所有相关代码都在同一个文件里改起来非常方便。模板里的核心是插值表达式也就是双大括号{{ }}。比如你在模板里写{{ message }}然后在script里定义let message ref(Hello Vue)页面上就会显示Hello Vue。这就是Vue的数据驱动只要message的值变了页面显示的内容自动更新不需要你手动去操作DOM。这里还涉及一个和jQuery时代最本质的区别你不再需要document.getElementById(xx).innerText xxx这样去改页面内容你只需要改数据视图跟随变化。这个心智模式的转变是我觉得Vue入门中最重要的一步。再看v-bind和v-model的区别。热词里有“vue样式”、“vue image能显示pdf吗”其实都和绑定有关。v-bind是单向绑定把某个数据绑定到HTML属性上比如v-bind:titletooltipText简写是一个冒号:titletooltipText。v-model是双向绑定主要用在表单输入上比如 用户输入什么数据就是什么数据变了输入框内容也变。这两个绑定是Vue最常用的基础操作一定要分清楚。2.2 条件渲染、列表循环和事件处理怎么搭配使用列表循环是v-for条件渲染是v-if和v-show事件绑定是v-on简写是。这几样东西组合起来基本就能写一个动态页面了。举个例子做一个简单的待办事项列表模板大致是这样ul li v-for(item, index) in todoList :keyitem.id span v-if!item.done{{ item.name }}/span span v-else classdone{{ item.name }}/span button clickmarkDone(index)完成/button /li /ulscript里定义todoList为一个reactive数组markDone方法里修改这条数据的done属性。数据一改视图立刻变化这就是数据驱动最直观的体现。v-if和v-show的区别也需要理解一下v-if是真正的条件渲染不满足条件就完全不在DOM里创建这个元素v-show只是用CSS的display:none来隐藏。如果你频繁切换显示状态用v-show性能更好如果几乎不会切换v-if更适合。学到后面面试会问但实际开发中这个细节也挺重要。:key为什么要写这是Vue做列表diff更新的关键标识相当于每条数据的身份证号。不写的话列表渲染可能没问题但涉及到删除、插入、排序的时候复用逻辑会出bug。所以从第一天起养成写:key的习惯index虽然也能当key用但不是最优解最好用数据里唯一的id字段。3. 组件化开发单文件组件和生命周期3.1 为什么你要习惯把所有东西拆成组件组件化是我学Vue过程中觉得最有价值的概念。它的思想其实和后端的方法封装很像——把重复的代码片段抽出来做成一个独立的对象需要用的时候引进来用。但组件比方法封装更进一步它把HTML结构、样式和逻辑都封在一起。比如电商项目里一个商品卡片里面可能有图片、价格、标题、评分这些在同一页面里可能出现几十次。传统做法是jQuery生成一堆模板字符串然后append或者后端Thymeleaf循环渲染。Vue的做法是抽一个ProductCard.vue组件父组件传入商品数据它负责把自己的UI渲染出来。需要多少个父组件里就写多少个 。组件的核心通信方式有两个父传子用props子传父用自定义事件emits。还有一种更复杂的状态管理方式是Vuex或者Pinia但学习基础阶段先把props和emits吃透就已经能解决绝大多数页面问题。props的值是只读的子组件不能直接修改父组件传来的props值。如果非要改正确的做法是触发一个自定义事件让父组件来改数据。我第一次写的时候不理解直接给props一个变量赋新值控制台立刻报警告页面还莫名抖动。后来才算理解了这个“单向数据流”的设计数据从上往下流动事件从下往上反馈这样数据状态变化是可追踪的不至于改来改去不知道哪层出了问题。3.2 生命周期钩子到底什么时候用Vue组件的生命周期函数是热词“vue面试题”里特别爱考的东西但实际开发中也有用。常见的有onMounted、onBeforeUnmount、onUpdated这几个Vue3里它们以函数形式导入使用。onMounted是组件挂载完成后触发的钩子我目前用得最多的场景是在这个函数里向后端发起初始数据请求。比如页面加载后要拉取一个商品列表就把axios请求写在onMounted里。为什么不在setup里直接请求呢因为setup执行的时候组件还没挂载完成某些DOM操作做不了而且一般数据请求放在了onMounted里更符合组件的生命周期语义。onBeforeUnmount是组件销毁前触发最常见的用途是清理定时器。比如你在组件里setInterval定时轮询组件被切换掉以后如果不清理定时器还在后台跑会造成内存泄漏。每次写组件的时候留个心这个组件里有没有自己开启的资源需要关闭定时器、事件监听、WebSocket连接都需要在onBeforeUnmount里清理。关于生命周期Hook我还是想强调不需要一开始记住全部但你至少要知道每个钩子在什么时候触发并知道什么时候该用它们来干什么。4. 组件通信进阶Props下发事件上抛插槽补空白4.1 使用事件向父组件传输数据子组件怎么给父组件传值Vue3的写法很优雅——在子组件里定义一个emit事件父组件通过事件名绑定处理函数数据作为事件参数传给父组件。实际例子我做了一个自定义的下拉选择组件BaseSelect.vue父组件需要一个“用户选择谁”的结果子组件内部维护选中状态。要传值先声明emits: [selectChange]然后在选项被点击时执行emit(selectChange, selectedValue)。父组件里这样用BaseSelect select-changehandleSelectChange /注意事件名在模板里推荐用kebab-case写法短线分隔在子组件里声明时用camelCase驼峰Vue会帮你自动转换。这个规则我第一次踩坑是find-hotel事件写成了findHotel一直监听不到排查半天才发现是大小写问题。4.2 插槽slot解决“组件中间插内容”的需求插槽是我一开始最懵的部分搞懂之后觉得它真的是组件化开发里一个极具巧思的设计。简单理解插槽就是给组件留一个坑位父组件往这个坑位里填东西。比如做一个Card组件卡片标题是固定的但内容区域各不相同你就可以在Card组件里留一个 占位父组件使用Card时写在Card标签内部的内容会自动填进占位处。插槽还有命名插槽的概念也就是一个组件里留多个坑位每个坑位有名字父组件用template #header、template #footer这种方式指定往哪个坑位填内容。这在做页面框架、弹窗组件、对话框标题栏时太常见了。还有一种作用域插槽允许父组件拿到子组件内部的数据。比如子组件循环数据要渲染成什么样式由父组件决定这时用作用域插槽就很合适。热词里虽然有“slot vue”但作用域插槽的理解难度高出普通插槽一截建议先把默认插槽和命名插槽玩熟再研究作用域插槽。5. 前端路由从多页面思维切换到SPA思维5.1 路由的基础结构和页面跳转逻辑Vue另外一个重要概念就是前端路由热词里“vue路由”、“vue动态路由”、“vue路由参数”都在讲它。传统后端模板项目的页面跳转是这样的浏览器向服务器发请求服务器返回一个新的HTML页面整个页面刷新。Vue是单页应用只有一个index.html页面内容的切换靠JS动态渲染。而路由就是负责“当前URL对应哪个组件”的对应关系。安装vue-router是必须的然后做一个路由配置文件核心结构大致是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 })页面里放一个 它就是当前路由组件渲染的出口。跳转用 或者编程式路由router.push(/about)。5.2 路由参数传递和动态路由的常见写法页面之间传参是开发中基本都会遇到的。Vue路由传参常用的方式有query方式和params方式。query方式类似URL后面的?keyvalue用this.$route.query读取。params方式通过路由配置里的动态路径段来传递比如path: /user/:id访问/user/123在页面里用this.$route.params.id就能拿到123。动态路由在写管理后台的时候非常有用比如文章详情页同一个页面对应不同文章ID你不需要给每篇文章单独配置一条路由只需要配置一条带参数的动态路由。还有一个路由守卫的概念要提前了解特别是做登录认证页面。router.beforeEach可以拦截每次路由跳转检查用户是否已登录如果没登录强制跳转到登录页。热词里“vue按钮权限怎么控制”也涉及类似思路不过按钮权限通常是把权限码存在用户信息里渲染按钮时用v-if判断。路由这块的核心困惑点在于为什么URL变了但是浏览器没刷新因为Vue Router监听了浏览器的history变化事件拦截了跳转然后根据新的地址渲染对应组件整个过程根本不会向服务器发新的HTML请求。这个机制理解了配合后端的跨域配置前后端联调就会顺畅很多。6. 接口联调和Mock数据和后端正确的打交道方式6.1 用Axios还是用Fetch以及跨域问题的处理前端页面要做数据请求才有意义。Vue里最推荐用的HTTP客户端是axios因为它在浏览器和Node环境里都能用还支持拦截器。虽然浏览器原生fetch也够用但axios的拦截器、取消请求、统一错误处理这些能力在项目里太方便了。安装axiosnpm install axios。一般在src目录下建一个utils/request.js统一配置axios实例设置baseURL、超时时间再通过拦截器统一处理携带token、统一处理错误码。这样做的好处是以后换后端地址只改一个文件所有请求都走同一套逻辑。然后就是热词里那个“前端访问后端接口跨域”的问题。开发环境解决方案在Vite工程根目录的vite.config.js里配置server.proxy代理让前端请求接口时先打到自己本地的dev服务器再由dev服务器转发到后端的8080端口。这样浏览器看到的是同源请求跨域问题天然就被解决了。生产环境的方案后面讲。6.2 Mock数据到底怎么用才能不卡住前端开发热词里有“mock是怎么体现的”、“vue mock版本增加修改删除”。Mock数据的意思是后端接口还没做好或者接口数据不合适前端先用假数据开发保证接口联调不阻塞。市面上有很多Mock工具比如Mock.js、json-server还有一个思路是直接在axios的拦截器里fake返回。我的建议是学习阶段在Vue工程里先用静态数据把页面交互全都开发好再切真实接口。如果你想练增删改查但没有数据库json-server是一个极优解。一条命令npm install -g json-server然后写一个db.json里面放一个对象数组json-server --watch db.json --port 3000一个RESTful API服务就起来了。支持GET、POST、PUT、DELETE配合axios操作你完全能在不写一行后端代码的情况下把Vue的列表渲染、表单提交、编辑、删除这些基础交互练个遍。等SpringBoot后端准备好了再把request.js里的baseURL切到8080大概率还是能用的因为组件里的数据结构和接口逻辑没变变的只是数据来源。这种开发方式就是所谓的前后端契约先行。6.3 Token认证和请求拦截器的入门玩法JavaWeb项目通常会有登录认证登录成功后后端会返回一个JWTJSON Web Token前端拿到后存起来之后的请求都要带这个token否则后端返回401。这个逻辑写在axios拦截器里非常丝滑请求拦截器在发送前把token加到请求头的Authorization字段响应拦截器在收到401时跳转到登录页。这个功能属于后端联调中必须趟过去的一道坎因为如果你在Vue里每个请求手动加token几十个请求改起来简直要命。7. 构建打包放进SpringBoot以及刷新404坑7.1 前端build之后的东西怎么交给后端热词里有“vue打包放进springboot中”这个属于把前后端项目做成“单一体”交付的方式在个人完整项目和小型部署场景里很常见。前端工程在根目录执行npm run buildVite就会把所有资源打包到dist目录。里面是一个index.html和一堆带哈希值的JS/CSS文件。你要做的就是把dist目录里的所有内容复制到SpringBoot的src/main/resources/static目录下然后重新打包SpringBoot应用。启动SpringBoot后浏览器直接访问http://localhost:8080/就能看到你的Vue页面。为什么能这样因为SpringBoot会把classpath:/static/下的文件当作静态资源直接提供出来。这种交付模式的好处是不用配置独立的Nginx也不用费心管理两个服务一个jar包就搞定一切。但这里注意一个细节后端接口和前端页面的访问路径要在同一个域下。也就是说前端的api请求路径如果写成/api/xxx那么SpringBoot的Controller也要用/api/xxx这个前缀这样就不会产生跨域问题因为浏览器看到的是同源请求。7.2 刷新页面404问题的两个解决方案在使用history模式路由时一个经典问题就是用户刷新某个非首页的路径比如访问/user/123SpringBoot会去static目录下找user/123这个文件结果找不到返回404。为什么开发环境没有这个问题因为Vite开发服务器把所有请求都重写回index.html了。生产环境没有这个“后处理”所以同样的问题就跑出来了。解决办法有两个第一个把路由模式从createWebHistory改为createWebHash也就是路由地址变成http://xxx/#/user/123这种带#的形式刷新的时候#后面的内容不会发给服务器404问题自然消失。优点是部署零成本缺点是URL不好看。第二个在SpringBoot里配置一个WebMvcConfigurer把所有非静态资源的请求都转发到index.html。配置思路大概是注册一个ViewController把/**路径forward到/index.html但要注意排除掉静态资源路径和接口路径。这个方案更专业URL干净符合用户预期。我的建议是学习和自己做着玩的阶段直接用hash模式省心省力。如果追求更专业的体验再研究history模式加转发配置。7.3 nginx部署方案浅尝其实更常见的生产环境前后端分离方案是前端打包成dist目录配置Nginx指向dist目录然后启动一个80端口服务后端SpringBoot单独跑在8080端口Nginx再统一转发/api前缀请求到后端服务。这种部署方式把前后端分开隔离前端改动后端不用重新发版本后端改动前端不用重新打包。这个方案我不会在基础阶段展开太多但你要知道有这种部署方式存在。热词里搜索“springboot vue”的项目案例很大比例都是这种结构。8. 从热词里挖出来的重点技术点扫盲8.1 idea运行javaweb项目配置如果你是照着JavaWeb完整案例学习前后端分离模式下在IDEA里其实要同时维护两个工程一个SpringBoot后端一个Vue前端。我个人的IDEA配置习惯是这样的后端直接点击SpringBoot的main方法运行前端在IDEA的Terminal面板里cd到前端工程目录然后用npm run dev启动。两个进程互不干扰IDEA的Run窗口会分别显示它们的日志。如果你用了JetBrains的WebStorm那体验更好因为它是专门做前端开发的。但如果只是学习用IDEA加Terminal足够了。8.2 vue播放m3u8视频流热词里有两个和m3u8相关的搜索词“vue播放m3u8免安装”、“vue播放m3u8播放器”。我理解这个需求的背景视频点播、直播场景里视频源通常是HLS协议下的m3u8索引文件里面指向一串TS分段文件。浏览器原生video标签默认不支持m3u8格式。解决方案一般是用hls.js这个库安装npm i hls.js然后直接在Vue里写成这样import Hls from hls.js if (Hls.isSupported()) { const hls new Hls() hls.loadSource(你的.m3u8地址) hls.attachMedia(videoRef.value) }实测下来在Chrome/Edge里能稳定播放。注意前提是后端服务器允许跨域请求这些视频分段文件否则会报CORS错误。8.3 vue中用echarts画统计图热词里“vue中用echarts画两个柱状统计图”这个很典型。ECharts是百度开源的图表库在Vue里用的思路先npm install echarts然后在一个Div上设置宽高在用echarts.init(this.$refs.chartDiv)再setOption。注意在组件销毁时调用dispose销毁实例避免内存泄漏。如果你只是画柱状图甚至可以只看ECharts官网的基础柱状图示例把option配置里的series和xAxis数据改成自己的业务数据基本就能跑起来。ECharts的学习曲线不算陡峭它的option配置文档写得很清楚。9. 常见问题速查这些坑我基本都替你踩过了下面这张表是我这几天学习过程中遇到过的真实问题汇总按出现频率排序现象原因解决方式npm install极慢或报错npm源是国外源换npm镜像源使用npmmirror模板标签里写变量不渲染忘写插值表达式{{ }}模板里直接用{{ 变量 }}v-for循环时控制台警告列表没有设置key给v-for的每行加:key唯一id修改prop值报警告props单向数据流不可逆在子组件里触发emit让父组件修改vite启动但浏览器白屏开发服务器没启动成功端口冲突CtrlC停掉换个端口重新npm run devaxios接口报CORS错误前端跨域了开发环境用vite server.proxy生产环境配置后端CORS或Nginx反向代理刷新路由页面404history模式下静态服务器没有转发改用hash模式或配置SpringBoot转发到index.htmlVue文件语法不高亮用了Vetur且是Vue3项目卸载Vetur安装Volar插件还有一个在热词里看到的“vue和edge冲突”我觉得大概率是Vite端口占用的现象。如果你开着多个Vite开发工程它们都默认跑5173端口后启动的会提示端口被占用并自动换端口。这种一般不算冲突是端口被复用导致的小困惑。把不必要的进程关闭或者给不同项目指定不同端口就行。10. 继续往前这套基础够支撑什么下一步学什么学完上面的内容其实你已经可以上手写一个像样的Vue3 SpringBoot前后端分离的完整项目原型了一个登录页做认证一个后台管理系统界面用路由切换页面用组件封装列表、弹窗、表单用axios对接后端接口最后打包放进SpringBoot跑起来。关于你下一步的方向我梳理了几个优先级比较高的内容组合式API的进阶watch、computed、ref、reactive的细节差异、Pinia状态管理多个页面共享用户信息时非常有用、Element Plus组件库别自己手动写下拉框、日期选择器人家封装好的更香、TypeScript支持后端转前端的同学对类型系统会感觉特别熟悉和亲切。我自己学习的一个体验是看官方文档比看第二手教程有用。Vue官网的教程写得非常详细有清晰的中文版而且新版文档里已经包含了完整的思维导图和交互式示例。遇到问题先去查官方文档然后查搜索引擎最后再问AI这样的路径能力成长更快。另外说一句实在话框架更新换代速度挺快今天学的细节过两年可能就变了但核心思想往往是稳定的。数据驱动、组件化、单向数据流、SPA路由这些东西在React、Angular里也是相通的。学会了Vue基础以后再看别的框架接受成本会低很多。我个人在实际操作中的体会是学Vue最怕的是“只是想清楚了但没敲代码”。视频看再多遍不如自己动手把模板语法、组件通信、路由传参、mock增删改查这些轮子亲手转一遍踩过坑才算真正学会。后面如果你们也在JavaWeb学习路上卡在了前端这块希望这篇日记能帮你推开一点门缝剩下的光就自己钻吧。