Vue入门（1）

一、 前置知识

• Node.js已安装
• HTML语法（MDN）
• CSS语法（w3school）
• JS语法（阮一峰）
• Vue文档收藏（入门教程）

注： 没有良好的基础学不好Vue
但是很多在职前段基础不行，也能勉强用

二、Vue路线规划

Vue路线规划 -> 1.扎实的HTML/CSS/JS基础(唯一自学，其他环节看文档就够了） -> 2.设计模式 -> 3.Vue API ->4.Webpack配置 -> 5.Vue全家桶 -> 6.UI框架 -> 7.Vue3.0 -> 8.高级

1.扎实的HTML/CSS/JS基础（初学）

• HTML常用标签（div、span、section等语法掌握了就差不多了）
• CSS 基础语法（多看阮一峰的博客）
• Scoped CSS（这是Vue提供的一个特殊的CSS）
• JS 基础语法（要特别注意new 和 this 两个关键词，通过谷歌搜索“方应杭+new/this”快速了解其教程）
• ES6语法（ES6 要了解最新语法，必须要知道object.defineProperty 和 class两个语法，课后去搜）

2.设计模式(初学）

• MVC模式
• eventbus发布订阅
• mixin混入
• prototype原型
• extends继承
• 依赖注入（provide/inject）

注：Vue文档会叫你理解下面各项设计模式
Vue在中国风靡的原因是有很好的中文文档

3.Vue API （初学）

• 组件（data，props,methods,watch,computed,template,render)
• 钩子（beforeCreate,created,beforeMoust, mounted, beforeUpdate, Updated, beforeDestory, destoryed)
• 模板语法
  条件：v-if/v-else/v-else-if
  循环：v-for
  事件：v-con/v-once
  属性：v-bind
  特殊：v-model
  其他：v-text/v-html/v-show/v-pre/v-cloak
• 过渡动画
  transition
  transition-group

注意：1.这一部分内容太多，需要做笔记，逐个理解每个部分，并写一篇博客。
2.写4篇博客，死记硬背太多了，很难背。

4.Webpack配置（难）

• vue-loader
• @vue/cli
• sass-loader/less-loader/stylus-loader
• babel-loader
• ts-loader
• eslint

注意：
1.学会了vue文档后还要学习webpack，不学webpack基本上什么项目都搭不起来
2.面试官问“作用”以及“如何配置”，不知道就完了。(送命题）

5.Vue全家桶(可以工作）

• Vuex（state， getter， mutation， action， module）
• Vue Router（hash模式， history模式， 守卫， 懒加载）
• Axios（拦截器， RESTFul）
• Jest/Mocha（单元测试， mock/stub）
• PWA（service ，HTTPS）

注意：
1.Vue所有功能学会了以后好像发现Vue没有学算法，前端的框架使用者不需要学习算法2.什么时候需要学习算法？高级阶段
3.按钮自己做，对话框自己做，需要学习UI框架

6.UI框架

• Element
• Ant Design Vue
• iview
• cube-ui
• vant

注意：
1.这5个当中随便选1到2个去了解就可以了，了解完以后你就是一个Vue的快速开发者
2.一旦你学会了Vue所有的配套全家桶，然后找一个UI框架，你做什么页面都会超快，这也是Vue风靡的原因。

7.Vue3.0 （工资20k以上需要学习）

• Type Script*
• React Hooks*（Vue3.0借鉴了React Hooks的api风格）
• Proxy API
• Reactive风格
• 函数式编程

注意：
1.这5个当中任意一个都可以单独写一篇博客
2.可以根据这些话题搜集相关博客，自己写一些总结

8.高级（进大厂必学这些数据结构和算法）

• 虚拟DOM
• Diff算法
• 模板编译