2024年Web前端最全前端自学路线图之Vue(1)，互联网行业“中年”危机

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

Vue.js项目自学技术要点

---

Vue.js项目自学–Vue.js基础

---

1、Vue实例

2、文本与属性绑定

3、计算属性computed

4、侦听器watch

5、Class与Style绑定

6、条件渲染

7、列表渲染

8、事件处理

9、表单输入绑定

10、Vue实例生命周期

11、开发Vue插件和模板过滤器

12、自定义指令

13、Vue组件系统

14、Vue过渡和动画

15、VueRouter路由系统

16、组件通信

17、axios请求库

18、VueCLI脚手架工具

19、VueDevTools调试工具

20、在Vue中操作DOM

Vue.js项目自学–webpack

---

1、安装与基本配置

2、打包JavaScript模块

3、打包CSS模块

4、打包图片和字体文件模块

5、打包less/sass资源模块

6、ES6转ES5

7、打包.vue资源模块

8、配置ESLint代码校验工具

9、使用clean-webpack-plugin插件清除打包结果目录

10、使用HtmlWebpackPlugin打包HTML资源

11、处理打包结果的Sourcemaps

12、监视打包模式

13、使用webpack-dev-server

14、模块打包热更新

15、treeshaking打包优化

16、生产环境和开发环境分离打包

17、打包优化之CodeSplitting代码分割

18、打包优化之模块懒加载

19、打包优化之缓存

Vue.js项目自学–社交媒体-黑马头条

---

1、使用VueCLI初始化项目

2、使用Git+Github管理项目源代码

3、使用axios与服务端交互

4、使用VueRouter管理项目中的路由

5、使用VantUI框架

6、使用Vuex管理组件状态

7、使用Sass预处理器

8、基于JWT的前后端token鉴权

9、使用Socket.io进行实时通信

10、移动端富文本编辑器解决方案

11、使用Cordova打包移动App

12、项目打包发布上线

Vue.js项目自学–Vue进阶

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

8)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中…(img-f4MyucN3-1714844389539)]