导言

1. 写在前面

  1. 以前也写过许许多多的前端技术博客,但是时间一长发现,有的博文已经尘封在记忆里了,根本没有机会复盘,随着博文数量增加,之前的博文就不容易发现甚至遗忘,所以我就写了这篇学习大纲导航,然后将之前写过的,以及没有补全的技术都补上。

  2. 还有一个好久就是,这篇博客从开始学习vue到大成,虽然博文在某些细节地方写的不是很完善,但是 总体的学习vue技术流程 上,还是有供大家可借鉴的地方,但凡能帮助到自己和大家,坚持就很开心并且坚持下去。

  • 有兴趣可以添加我,一起探讨技术。
    • 加V:Fengfl1222,名称:聚星汇智
    • 要资料,申请备注为:CSDN+地方+资料,如CSDN山东资料
    • 想接项目一起努力进步,申请备注为:CSDN+地方+项目,如CSDN+山东+项目,添加成功之后,可以发一份简历。
    • 项目组缺人,想要兼职的人,火速加我进群。
    • 本人介绍:211高校(北京交通大学)计算机研究生,本科双非计算机毕业后,校招进入军工,工作2个月离职后进入阿里,工作两年后离职考研,现已毕业,入职济南某大厂。团队主要技术栈:RAG、LLM、JAVA、PYTHON、GO、VUE、REACT等web开发需求。已有开发团队,如果有空闲时间想一个接项目者,可以加我呦。
    • 不按上诉规则添加好友者,不予通过。

2. 本博客优势

3. 前端开发常用网站总结

  1. github代码地址全:https://github.com/fengfanli/learn_vue
  2. vue中文官网:https://cn.vuejs.org/
  3. vue英文官网:https://vuejs.org/guide/introduction.html
  4. vue脚手架:vue-cli的中文官网:百度直接搜索即可
  5. cnpm 官网,安装cnpm 淘宝镜像:百度直接搜索即可
  6. yarn 中文官网:百度直接搜索即可
  7. element 中文官网:百度直接搜索即可
  8. ESlint 官网
  9. vue-vuex 中文官网
  10. vue-router 中文官网
  11. eslint csdn 文档-网上
  12. axios 官网
  13. mockjs 官网:前端模拟后端请求返回假数据(很好用)
  14. 百度echarts官网:图表的样式库
  15. vite 官网

一、VUE 环境搭建篇

  1. vue学习:chrome 中 vuetools 开发插件 的下载、安装
  2. IDE:vs code的下载安装、使用
  3. 初用VScode并配置,自定义代码片段(快捷键),自动格式化代码快捷键,保存格式化代码快捷键
  4. webstorm 小技巧、快捷键:自定义代码模板(持续记录,更新)

二、VUE基础知识篇

  1. VUE学习一:初识VUE、指令、动态绑定、计算属性
  2. VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
  3. VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
  4. VUE学习四:前端模块化,ES6和ES5如何实现模块化
  5. 到了这儿先看第三章npm/yarn 和 第四章的webpack
  6. 然后再看 第五章vue-cli脚手架 快速搭建vue项目,推荐
  7. 再接着学习 第六章、第七章、第八章的 router、vuex、axios

三、npm和yarn专栏

  1. npm学习一:npm 包管理工具 学习、使用。
  2. npm学习二:npm配置文件和修改配置,安装包路径修改,npm 安装 vue-cli脚手架
  3. Yarn学习,Yarn安装,Yarn常用命令。这一篇即可

四、webpack专栏

  1. webpack学习一:什么是模块化开发,什么是webpack,以及二者之间的关系。
  2. webpack学习二:webpack初始用打包,webpack初始用配置文件打包,webpack安装对应的loader
  3. webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
  4. webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
  5. webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件

五、vue-cli脚手架

  1. vue-cli学习一:vue-cli脚手架2和3版本 创建vue项目,vue的初始化详解
  2. vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
  3. 使用 vue-cli 3.0 快速创建项目 (两种方法:代码方式和图形化创建项目-废掉,写别的项目)

六、router路由插件专栏

  1. vue-router学习一:什么是路由,路由分类,路由安装,路由使用,路由默认路径,history模式,默认的linkActiveClass属性,路由代码跳转
  2. vue-router学习二:动态路由(路由传递数据的一种方式),路由懒加载,嵌套路由,路由传递参数方式,导航守卫,keep-alive标签
  3. vue-router学习三:封装组件,封装TabBar组件。

七、vuex 插件专栏

  1. Vuex学习一:了解Vuex,初始用vuex,vuex状态管理图的讲解
  2. Vuex学习二:Vuex的重点属性学习,state、mutations、getters、actions、module。

八、axios插件专栏

九、vue-element-admin 综合案例搭建项目

  1. vue-element-admin 综合开发一:搭建环境:vue-cli创建项目,整合element、vue-router。
  2. vue-element-admin 综合开发二:搭建首页架子、侧边栏、修改默认样式、menu和路由跳转页面初体验
  3. vue-element-admin 综合开发三:header组件的实现、vuex的使用、main组件(home页面)的实现
  4. vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
  5. vue-element-admin 综合开发五:引入 echarts,封装echarts 组件

十、VUE bug总结

  1. 学习Vue bug 一、webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js
  2. 学习Vue bug 二、‘mode’ option has not been set, webpack will fallback to ‘production’ for this value
  3. Vue加载单文件使用vue-loader报错vue-loader was used without the corresponding plugin. Make sure to include Vue

十一、element 使用经验

  1. element组件库笔记一:element 框架中table表格复选框选中后,切换下一页之前选中复选框和数据消失的问题
Logo

前往低代码交流专区

更多推荐