VUE 系统学习系列：学习导航大纲--VUE整套前端由0到1(关注收藏本博文即可)

文章目录

• ​​导言​​

• ​​1. 写在前面​​
• ​​2. 本博客优势​​
• ​​3. 前端开发常用网站总结​​

• ​​一、VUE 环境搭建篇​​
• ​​二、VUE基础知识篇​​
• ​​三、npm和yarn专栏​​
• ​​四、webpack专栏​​
• ​​五、vue-cli脚手架​​
• ​​六、router路由插件专栏​​
• ​​七、vuex 插件专栏​​
• ​​八、axios插件专栏​​
• ​​九、vue-element-admin 综合案例搭建项目​​
• ​​十、VUE bug总结​​
• ​​十一、element 使用经验​​

导言

1. 写在前面

1. 以前也写过许许多多的前端技术博客，但是时间一长发现，有的博文已经尘封在记忆里了，根本没有机会复盘，随着博文数量增加，之前的博文就不容易发现甚至遗忘，所以我就写了这篇学习大纲导航，然后将之前写过的，以及没有补全的技术都补上。
2. 还有一个好久就是，这篇博客从开始学习vue到大成，虽然博文在某些细节地方写的不是很完善，但是 ​​总体的学习vue技术流程​​
3. 
   

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组件。​​
4. 
   

七、vuex 插件专栏

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

八、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表格复选框选中后，切换下一页之前选中复选框和数据消失的问题​​