Vue全家桶系列【完结】

一. 简介

 1. 说明

  Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue2.x :

  官网地址:https://cn.vuejs.org/

  GitHub地址:https://github.com/vuejs/vue

  CDN地址:https://cdn.jsdelivr.net/npm/vue/dist/vue.js

Vue3.x:

  官网地址:https://v3.cn.vuejs.org/  

  GitHub地址:https://github.com/vuejs/vue-next

  CDN地址:<script src="https://unpkg.com/vue@next"></script>

2. MVVM模型

(1). MVC和MVVM都是一种软件的体系结构

 MVC是Model – View –Controller的简称,是在前期被使用非常框架的架构模式,比如iOS、前端;

 MVVM是Model-View-ViewModel的简称,是目前非常流行的架构模式;

(2). 通常情况下,我们也经常称Vue是一个MVVM的框架。

 Vue官方其实有说明,Vue虽然并没有完全遵守MVVM的模型,但是整个设计是受到它的启发的  (Dom部分是View,Script部分中代码是Model,Vue是VM)

 

3. Vue2快速入门

(1). 代码实操

<body>
    <div id="app">
        {{message}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue2!'
            }
        })
    </script>
</body>

(2). 运行结果

3. Vue3快速入门

(1). 代码实操

<body>
    <div id="app">{{message}}</div>
    <script src="https://unpkg.com/vue@next"></script> 
    <script>
         Vue.createApp({
             data() {
                return {
                  message: 'Hello Vue3!'
                }
             }
         }).mount('#app');        
    </script>
</body>

(2). 运行结果

 

二. 走向Vue3

1.  源码

(1). 源码通过monorepo的形式来管理源代码:

 Mono:单个

 Repo:repository仓库

 主要是将许多项目的代码存储在同一个repository中;

 这样做的目的是多个包本身相互独立,可以有自己的功能逻辑、单元测试等,同时又在同一个仓库下方便管理;

 而且模块划分的更加清晰,可维护性、可扩展性更强;

(2). 源码使用TypeScript来进行重写:

 在Vue2.x的时候,Vue使用Flow来进行类型检测;

 在Vue3.x的时候,Vue的源码全部使用TypeScript来进行重构,并且Vue本身对TypeScript支持也更好了;

2. 性能

(1). Vue3 使用Proxy进行数据劫持

 在Vue2.x的时候,Vue2是使用Object.defineProperty来劫持数据的getter和setter方法的;这种方式一致存在一个缺陷就是当给对象添加或者删除属性时,是无法劫持和监听的;所以在Vue2.x的时候,不得不提供一些特殊的API,比如$set或$delete,事实上都是一些hack方法,也增加了开发者学习新的API的成本;

 而在Vue3.x开始,Vue使用Proxy来实现数据的劫持,这个API的用法和相关的原理我也会在后续讲到;

(2). 删除了一些不必要的API:

 移除了实例上的$on, $off 和 $once;

 移除了一些特性:如filter、内联模板等;

(3). 包括编译方面的优化:

 生成Block Tree、Slot编译优化、diff算法优化;

3. 新Api

(1). 由Options API 到 Composition API:

 在Vue2.x的时候,我们会通过Options API来描述组件对象;Options API包括data、props、methods、computed、生命周期等等这些选项;存在比较大的问题是多个逻辑可能是在不同的地方:比如created中会使用某一个method来修改data的数据,代码的内聚性非常差;

 在Vue3.x的时候,Composition API可以将 相关联的代码 放到同一处 进行处理,而不需要在多个Options之间寻找;

(2). Hooks函数增加代码的复用性:

 在Vue2.x的时候,我们通常通过mixins在多个组件之间共享逻辑;但是有一个很大的缺陷就是 mixins也是由一大堆的Options组成的,并且多个mixins会存在命名冲突的问题;

 在Vue3.x中,我们可以通过Hook函数,来将一部分独立的逻辑抽取出去,并且它们还可以做到是响应式的;

 

 如何从Vue2迁移到Vue3,详见下面官方文档:

  https://v3.cn.vuejs.org/guide/migration/introduction.html

 

三. 目录

 

阶段一:Vue2.x用法

  第一节:Vuejs入门之各种指令

  第二节:  Vuejs常用特性1

  第三节:Vuejs常用特性2和图书案例

  第四节:Vuejs组件及组件之间的交互

  第五节:  前后端交互之Promise用法和Fetch用法

  第六节:前后端交互之axios用法及async异步编程

  第七节:Vuejs路由交互及后台系统路由案例

  第八节:Vue Cli简介/安装、两种Create项目的方式、相关配置说明

  第九节:Vuex简介、基本使用、核心功能(State、Mutation、Action、Getter) 和 案例实战演练

  第十节:基于Vuex实现数据的增删改查的案例剖析分享

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

阶段二:Vue2.6.11 + Vue-Router3.2 + ElementUI2.15.1 + Vuex 全家桶

  第一节:项目初始化(ElementUI、axios)、Git版本管理、基本环境搭建

  第二节:基础配置(路由、less、静态资源、axios、ESLint)、基础组件(Form、Message) 之登录页面搭建

  第三节:基础组件(Container布局、NavMenu导航) 之 系统主页面搭建

  第四节:基础组件(Breadcrumb、Card、Input、Dialog、Switch、Select、MessageBox) 之 用户管理

  第五节:基础组件(Table、Pagination、Tree、Tag) 之 角色/权限管理

  第六节:基础组件(Cascader/Tab/Steps/Upload/TimeLine/alert) 之 参数/商品/订单

  第七节:扩展组件(lodash/富文本/echart/nprogress) 和 帮助类(日期格式化)

  第八节:项目优化上线之打包、报告分析、删除console、webpack配置、CDN、首页定制、路由懒加载、Express部署和管理

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

阶段三:Vue3.x全家桶

  第一节:代码片段制作、template几种写法、各种场景下的this剖析

  第二节:Vue3向下兼容1(Mustcache v-once text html pre cloak v-bind v-on v-if v-show等等)

  第三节:Vue3向下兼容2(v-for、数组方法、v-model、计算属性、监听器)

  第四节:从源码角度剖析key在diff算法中的作用和Computed源码剖析--未完

  第五节:补充引用类型赋值、浅拷贝、深拷贝、判断中的隐式转化

  第六节:Vue Cli的使用复习 和 Vite入门使用

  第七节:组件入门使用、组件通讯剖析(父传子、子传父、爷传孙、兄弟/任意组件)、对比Vue2.x的传值

  第八节:插槽的基本用法、剖析具名插槽、作用域插槽的使用

  第九节:动态组件和keep-alive缓存、webpack分包和异步组件、引用元素/组件($ref)、组件生命周期、组件v-model

  第十节:复习mixin/extends 和 开启Vue3的Composition Api(setup、reactiveApi、refApi、readonly)

  第十一节:Vue3的Composition Api(toRefs/toRef、customerRef、computed、watchEffect【setup中获取ref】、watch)

  第十二节:Vue3的Composition Api(生命周期、provide/Inject、综合练习-hook封装) 和 setup顶层开发模式

  第十三节:Vue3高级之 render/h函数、jsx、自定义指令、teleport、插件

  第十四节:VueRouter4.x简介、基本用法、路由懒加载(打包分析)、动态路由、路由嵌套、相关Api

  第十五节:VueRouter4.x用法之router-link/router-view的v-slot、动态增删路由、路由导航守卫

  第十六节:Vuex4.x 简介及state、getters、mutations、actions详解(OptionApi 和 CompositionApi)

  第十七节:Vuex4.x 之Module详解(局部状态、命名空间、辅助函数等) 和 补充nexttick用法

  第十八节:Vue3难点用法剖析(nextTick、xxx 等等)--持续更新

  第十九节:Pinia简介及state、getter、action详解、常用Api、setup简化写法

  第二十节:Vue3中CSS用法(scoped、选择器、module、v-bind) 和 Less 、Sass的使用

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

阶段四:Webpack5系列

  第一节:Webpack简介、安装-配置-打包、常用loader的使用(css/style/less/postcss-loader)

  第二节:Webpack资源模块(替代file/url-loader)、插件使用(Clean/Html/Define/Copy)、mode的配置说明

  第三节:Babel的使用、Webpack集成Babel、单文件Vue打包

  第四节:Webpack本地服务器搭建、剖析devServer的HRM热替换和其它配置、resolve模块解析、区分开发/生产环境方案实战

  第五节:Webpack中的Source-map详解及最佳实操配置

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

阶段五:基于Vue3.x全家桶的管理系统搭建

  第一节:项目创建和各种配置规范(editorconfig、prettier、eslint、.browserslistrc、tsconfig、git等)

  第二节:第三方库集成和配置(webpack、element-plus、axios、vscode、区分不同环境)

  第三节:整体架构剖析、登录业务编写

  第四节:菜单权限、动态路由注册、菜单搭建、面包屑、按钮权限 剖析

  第五节:Form组件封装和基于Form组件的PageSearch、PageModal组件的封装

  第六节:Table组件封装和基于Table组件的PageContent组件封装

  第七节:三大封装组件的联调 和 用户/角色/菜单模块核心功能的快速搭建

  第八节:DevOps开发模式详解和基于Jenkins实现项目的自动化部署

  第九节:零散汇总1(InstanceType获取组件对象、json转换ts、代理配置、globalProperties全局属性、{ ...item } 拷贝、template中用别名 )

  第十节:零散汇总2(父调子属性/方法、)

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

  第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

 

 

 

 

 

 

 

 

 

 

 

!

  • 作       者 : Yaopengfei(姚鹏飞)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • 声     明1 : 如有错误,欢迎讨论,请勿谩骂^_^。
  • 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址,否则保留追究法律责任的权利。
 

 

posted @ 2021-09-02 17:51  Yaopengfei  阅读(2667)  评论(3编辑  收藏  举报