Vue.js（或简称Vue，读音 /vjuː/）是一种流行的、用于构建用户界面的渐进式框架。是由尤雨溪创建，目的是通过提供一个简单易用的框架来解决现有框架的缺点。Vue具备以下特点：
- 轻量级「v2在100KB左右，v3仅仅20KB左右」
- 易学易用
- 灵活且高效
Vue2官网地址：v2.cn.vuejs.org/
Vue3官网地址：cn.vuejs.org/
渐进式框架
渐进式框架（Progressive Framework）是一种构建应用程序的方法，其中框架的功能被分解为多个可选的模块，可以根据需要逐步引入。渐进式框架可以让开发者根据实际需要，选择使用框架的哪些功能，避免了引入过多不必要的代码，从而减小了应用程序的大小和加载时间，提高了应用程序的性能和可维护性，Vue就是一种渐进式框架！
-
Vue2
- @vue/cli
- vue2
- vuex3
- vue-router3
- ElementUI、Antd of Vue 1
- vant2
- …
-
Vue3
- @vue/cli
- vue3
- vuex4
- vue-router4
- ElementPlus、Antd of Vue 3
- vant3
- …
主要分为三个阶段:
阶段一：Vue2基础知识及工程化/组件化开发
Vue2基础知识
- MVVM双向数据绑定的实现原理「Object.defineProperty」
- 小胡子语法详解
- v-model 的底层实现原理
- v-if/v-show的底层实现原理
- v-html/v-text、v-for运用和key的原理、v-bind、v-on事件绑定及事件修饰符等
- Vue.directive 自定义指令处理
- watch及computed的深度比较和实现机制
- Vue生命周期函数「钩子函数」
工程化/组件化开发
- vue/cli脚手架的安装和使用
- 单文件组件和样式私有化
- template语法及底层编译机制
- DOM-DIFF的编译机制
- props属性的处理及校验
- slot插槽、具名插槽、作用域插槽
- 10+复合组件通信方案
- 组件封装的核心原则
- ElementUI、Vant、Antd of vue等组件库的应用
vuex/vue-router的详细解读
- 公共状态管理的工作流程
- 核心六部分：state、getters、mutations、actions、modules、plugins
- map辅助函数的运用
- vuex的底层实现原理
- vue-router中的两大路由模式，及其底层实现机制
- SPA和MPA的区别
- vue-router的基础知识
- 命名路由和动态路由
- 路由懒加载
- 路由跳转及传参方案
- 路由导航守卫及运用场景「全局守卫、路由守卫、组件守卫」
综合实战项目
-
REM响应式适配的插件处理机制
-
kepp-alive的使用方法及其原理
-
Vue中的mixin混入和插件开发
-
Vue内置组件：transition和component
-
Vue.extend的实战运用
-
封装提高开发效率
- Vue项目中的组件抽离和封装
- UI组件库中组件的二次封装技巧
- Axios的二次配置及API接口管理
- utils公共方法库的封装
- 项目中常见的6大自定义指令
- ….
-
项目性能优化方案
- 骨架屏处理方案
- 图片懒加载 & 数据的上拉刷新和下拉加载
- 基于vuex和本地存储实现数据缓存
- ….
-
特色业务逻辑处理
- 登录态校验及权限校验的N种实现方案
- Echarts图表插件的运用
- Excel表格的上传和下载
- 图片上传和进度管控
- ….
阶段二：全面拥抱Vue3全家桶及综合实战
Vue3核心基础知识
- vue3新特性的全面剖析
- Teleport传送门
- Suspense异步组件
- vue3双向数据绑定的实现原理
- Composition API之setup的处理
- script setup语法糖的应用
- N种响应式系统API：reactive、ref等
- vue3中的计算属性：computed
- vue3中的监听器：watch/watchEffect
- 自定义hook的处理
- 新生命周期函数及模板refs的使用
- 自定义指令的新处理方案
- vuex4的新特性和应用
- vue-router4的新特性和应用
- pinia新的公共状态解决方案
- 其它vue2和vue3的区别对比
TypeScript核心知识及实战运用
- TypeScript和JavaScript的关系
- TS中的数据类型和变量声明
- TS中的函数及箭头函数
- TS中的接口及类
- TS中的泛型和枚举
- TS的命名空间和模块
- TS的类型断言和类型保护
- TS的装饰器和元数据
- TS的声明文件和类型定义
- TS的编译器和配置
- TS的构建工具和自动化
- TS的ESLint和代码检查
Vite工程化和综合项目实战
- vite和webpack的本质区别
- vite的工作机制和原理
- vite常用规则的配置
- 基于vite构建vue3工程化项目
- 移动端业务组件的抽离和封装技巧
- keep-alive组件缓存的运用
- ToC端产品优化的N种方案
- vant组件库中常用组件的二次封装
- ….
阶段三：小程序/uni-app开发及综合实战
微信小程序核心知识
- 微信开发工具的下载和使用
- 小程序的全局配置
- 小程序的 wxss 与 wxml 语法
- 小程序中less的使用
- 视图容器组件：scroll-view、swiper、view等
- 基础内容组件：icon、text等
- 表单组件：from、input、switch、picker-view等
- 导航、媒体组件、开放能力等
- 自定义组件及传参
- 微信小程序生命周期函数
- 微信小程序常用 API
- 路由处理：wx.switchTab/reLaunch/redirectTo/navigateTo/navigateBack…
- 转发处理：wx.showShareImageMenu/shareVideoMessage…
- 数据请求处理：wx.request、RequestTask…
- 下载的处理：wx.downloadFile、DownloadTask…
- 数据缓存\支付\位置等
- vant 、weapp的使用
- 小程序中的组件化思想
- PullToRefresh下拉刷新与上拉加载
uni-app及综合实战
- 了解uni-app及分析其优缺点
- 配置uniapp的开发环境和项目
- uni-app中的组件封装、多端适配、路由管理、状态管理等
- uni-app的网络请求和项目调试
- uni-app的多端兼容和项目打包部署
- uni-app的生态体系「含社区、插件及常见问题」
- 综合实战：从零打造云音乐小程序
