Vue学习路线

本人在学习Vue2和Vue3遇到过很多坑，以及学习学习顺序不同学vue的时候很难受，所以我发个帖子为要学习vue的同学讲一下Vue学的路线图。

前置知识

JS语法

我们在学习Vue之前必须要学习JavaScript的基础语法以及ES6-11的新增语法

说明	语法	作用
数组方法	Array.forEach()	当我们处理后台返回的数据可能要使用
	Array.filter()
	Array.reduce()
	Array.every()
	Array.some()
	Array.map()
循环方法	for … in…	遍历数组
	for … of…
	for
箭头函数	()=>{}	简化代码，传统函数很臃肿
数组/对象解构	const {name, age} = user	快速获取后端返回的数据
展开运算符	…	快速获取后端返回的数据
map和set的学习	主要学习他的方法	处理数据
Promise()异步编程主要用于发请求		在配置前后台交互需要用到
async/await 异步编程	发请求	这个最常用，前端向后端发起请求
JS模块化(重点)	expor(导出), import(导入)	这个常用, 用于vue页面的导入导出

关于上面的ES6-ES11大家可以听听尚硅谷的课程：尚硅谷Web前端ES6教程，涵盖ES6-ES11

然后尚硅谷没有讲到的地方可以问问ai。要学会用ai学习。

Ajax

这是用于发请求用的
我们Vue要学习的axios就是基于Ajax和Promise实现的。

Node.js

这个Node.js可以不学，不影响vue的学习，就是学起来有点吃力。

比如 包管理工具就是node中的内容，但是影响不大。

• npm
• yarn
• pnpm

相当于java的maven

Vue2 + Vue3 知识学习

Vue2基础

这里学习Vue基本语法

1. 内容渲染指令
2. 属性绑定指令
3. 事件绑定指令
4. 双向绑定指令
5. 条件渲染指令
6. 列表渲染指令
7. watch 侦听器
8. 计算属性的用法 computed

Vue 工程化开发 和 脚手架

• Webpack 使用的脚手架是vue-cli 需要全局安装。
• Vite 使用的脚手架是create-vue 不需要全局安装。

这两个工程化开发首选Vite，因为vite​​按需编译​​速度快。
未来趋势已明显倾向于 Vite 为核心的 create-vue。

大家想要自己从0-1搭建Webpack，请看黑马的视频1-30集：黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端学习核心框架教程

学习了Webpack从0-1的构建可以类比Vite

其实这一块从0-1的构建可以学也可以不学，只要会用就行。学完这个有助于你更加深刻的理解底层原理。

Vue2高级语法

生命周期
组件和组件通信
ref 引用

动态组件
插槽
自定义指令

Vue3的学习

当学完Vue2 ，Vue3就学起来就不用太费事了。

我们是使用

我们是使用Vue2还是Vue3呢

如果你要使用若依框架，目前(2025年)若依框架(RuoYi-Vue)官方支持Vue2 + Element UI​​ + Webpack。
如果你只是技术尝鲜可以学学Vue3的若依框架(RuoYi-Vue3)。

• ​​时间充裕且追求前沿技术​​：​​主攻 Vue3​​，辅以 Vue2 的核心概念（如生命周期、指令），确保技术前瞻性。
• ​​急于参与工作或实习​​：​​先掌握 Vue2​​，再逐步过渡到 Vue3，利用现有资源快速积累经验。

路由(重点)

这个是重点中的重点，你的Vue学的好不好就看你路由学的好不好。

Vuex和Pinia仓库

VueX和Pinia这两个都是仓库管理工具

但是Vuex已经过时了,
大家可以学Pinia，

Element UI和Element Plus

Element UI只支持Vue2 支持TS但是需要额外配置
Element Plus 只支持 Vue 3 完全支持TS

现在大方向是学 Element Plus + TS

代码校验工具 ESLint+Prettier

这个两个工具联合使用让你的代码更加规范。

现在ESLint已经升级到9.X和之前的8.X有很大的区别，特别是在写配置的时候。

axios

用于发起请求。

反向代理

这个是前端用于解决跨域问题的配置，也可以用后端的@CrossOrigin解决跨域

MD文档编辑器v-md-editor

这是文本编辑器。他就是一个包引入配置一下就能使用。

TS

这是js进阶技术有兴趣可以学一下

总结

上面说的这么多我都会在我的专栏里持续更新，大家可以关注一下我。