Vue3 入门到实战(预售)
文章平均质量分 83
Vue3 全家桶学习,限时 9.9 元。专栏包含 Vue3 框架、Element-Plus UI 框架、TypeScript 语言、Pinia 状态管理这几个主要部分的基础知识,最后通过这些知识上手实战演练,实战内容会提供项目源码。
优惠券已抵扣
余额抵扣
还需支付
¥9.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
一百个Chocolate
一个小帅哥和某厂前端搬砖。
频道内容: 前端技术,编程,我的思考。
用心去做自己热爱的事情️
座右铭: 学如逆水行舟,不进则退。
展开
-
【加餐 2】Tab 标签页管理
在本章中,我们首先构想了一个标签页的功能,然后我们梳理了实现思路,选择使用 Pinia 管理标签页状态,并在组件中使用 el-tabs 组件生成页面效果,最后实现右键呼出下拉菜单的基本功能。在此基础上,我们可以继续拓展标签页的功能,比如标签页的刷新、固定时展示固定 icon、点击 icon 固定等其它功能。原创 2023-04-14 22:29:39 · 1179 阅读 · 1 评论 -
【Vue3 基础篇】01.初识 Vue
渐进式JavaScript框架。易学易用,性能出色,适用场景丰富的 Web 前端框架。同时他还有三个特点:1.易学易用:基于标准HTML、CSS 和 JavaScript构建,加上一流的文档介绍和易懂的API,相较于其它框架能快速上手。2.性能出色经过编译器优化、完全响应式的渲染系统,几乎不需要手动优化。3.灵活多变丰富的、可渐进式集成的生态系统,可以根据应用规模在库和框架间切换自如。简单来说Vue是一款用于构建用户界面的JavaScript框架。它基于标准。原创 2023-03-18 15:43:04 · 674 阅读 · 0 评论 -
【Vue3 基础篇】02.声明式渲染
Vue 的核心功能是声明式渲染:通过扩展于标准 HTML 的模板语法,我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时,HTML 会自动更新。当状态改变时,HTML 自动更新,这个能在改变时触发状态更新,被称作是响应式的。对应的我们想声明一个响应式状态,可以使用 Vue 的reactive()或者ref()API。reactive()创建的对象都是 JavaScript 的Proxy,其行为与普通对象一样。不同之处在于。原创 2023-03-18 15:56:08 · 1031 阅读 · 0 评论 -
【Vue3 基础篇】03.模板语法
这节中讲的指令就这么多了,相信你已经感受到了 Vue 的模板指令的魅力了。虽然看上去还是在写 HTML ,但是有了指令的加持,数据的展示和方法的绑定等都显得如此简单对吧,接下来就是要记住这些指令。中的 API 指令讲解结束了,下章中将会讲解,在 script 中的 Vue 的 API。原创 2023-03-18 16:04:48 · 345 阅读 · 0 评论 -
【Vue3 基础篇】04.响应式 API
在这一章节中我们梳理了,两个响应式 API。一个是通过监听依赖返回数据,并且需要在模板中使用。另一个是通过监听依赖触发与该依赖相关的逻辑,并且可以是有"副作用”的。接着我们从源码的角度,探讨了这两个 API 可以监听依赖背后的逻辑,离不开 Vue 核心-响应式。在下一章中我们会讲到组件化相关知识,包括 ref、生命周期和组件传值等知识,我们下一章见。原创 2023-03-18 16:10:57 · 242 阅读 · 0 评论 -
【Vue3 基础篇】05.组件化
本章中,我们首先结合 Vue 的生命周期的流程图,例举了各个生命周期钩子的触发时机,以及部分钩子的使用场景。然后讲到了 ref 的作用,最后讲完并实战了组件通信相关的 API。至此 Vue3 的基础知识到这里已经结束了,还剩下一小部分,留在我们实战课程中探索。下一章我们学习 TypeScript 相关基础知识,课程不会很长,带大家了解 TypeScript 常用的一些知识,为实战做准备。原创 2023-03-19 10:33:13 · 428 阅读 · 0 评论 -
【Vue3 基础加餐篇】06.Ref 解包场景
本节中讲述了 Ref 的一些解包场景:模板中、响应式对象中及数组集合类型的解包场景。原创 2023-03-19 10:38:46 · 975 阅读 · 0 评论 -
【Vue3 基础加餐篇】07.key 的作用源码解析
这一章中,我们在讨论 Vue 中 key 的作用这个话题之前,先聊到了虚拟 DOM,引出组件更新的 patch 函数,最终我们详细解析了其中的 diff 算法,理解了 diff 算法的流程以及 key 在 diff 算法中的用处。源码在 @vue/runtime-core/dist/runtime-core.cjs。原创 2023-03-20 10:05:25 · 336 阅读 · 0 评论 -
【Vue3 基础加餐篇】08.源码解析响应式原理
本章中我们从源码的角度剖析了 Vue3 的响应式原理,并且在响应式最简实践这一节中,使用抽象代码,从宏观理解响应式的实现,相信看完会有豁然开朗的感觉。原创 2023-03-20 10:13:30 · 209 阅读 · 0 评论 -
【TypeScript 入门】09.初识 TypeScript
Vue3 其中一个很大的特性就是支持 TypeScript,基本很少看到有使用了 Vue3 的项目但是不使用 TypeScript 的。TypeScript 可以在编译时通过静态分析检测出很多常见错误。大部分前端大型项目都是使用 TypeScript 编写,包括 Vue 自身。并且所有的 Vue 官方库都自带了类型声明文件,开箱即用。可见不管是公司 Vue3 项目,还是 Vue3 的学习,我们都避不开要学习 TypeScript。本章就带大家初识 TypeScript。原创 2023-03-21 18:37:43 · 313 阅读 · 0 评论 -
【TypeScript 入门】10.类型推断、类型拓宽与缩小
在上一章节中,我们学习了 TypeScript 的基本语法和类型。我们总是需要显式的注明变量类型,但实际上 TypeScript 具备类型推断的能力,可以让我们每次都声明变量类型。这一章中讲到了类型判断以及类型拓展和缩小的知识,涉及到的场景也比较简单。这一章节就当开胃小菜吧,下面一章相对复杂一些,会讲到 TypeScript 最常用到的两个特性:interface 和 type。原创 2023-03-21 18:43:13 · 308 阅读 · 0 评论 -
【TypeScript 入门】11.接口类型和类型别名
本章讲述了 TypeScript 中对核心的知识点之一:接口类型和类型别名,并且对比了两者的区别,在大部分场景下 interface 都可以被 type 取代,在某些场景下,还是有比较大的差别的。下一章中我们将讲述本章在类型别名中提到的联合和交叉类型。原创 2023-03-22 10:48:55 · 306 阅读 · 0 评论 -
【TypeScript 入门】12.高级类型
这一章介绍了联合和交叉类型,作为 TypeScript 类型最基本的“运算”能力,学习和掌握后,可以培养我们抽离、复用公共类型的意识和能力。原创 2023-03-22 10:48:53 · 435 阅读 · 0 评论 -
【TypeScript 入门】13.枚举类型
本章中介绍了 TypeScript 的枚举类型,它可以帮助我们为一组具有相关联义项的常量赋予一个含义明确的名字,从而提高代码的可读性和可维护性。下一章我们将学习 TypeScript 入门教程的最后一章:TypeScript 有趣的特性—泛型。原创 2023-03-23 17:03:38 · 424 阅读 · 0 评论 -
【TypeScript 入门】14.泛型
本章中我们介绍了泛型的作用和用法,并举例介绍了泛型在函数、类和约束场景中的使用。泛型中理解困难的在于,需要抽象、封装类型运算逻辑实现类型的灵活可复用,比较考验设计封装能力。至此 TypeScript 入门教程已经结束啦,当然还有一些 TypeScript 的进阶知识没有讲到,但对于此次实战和日常工作使用已经足够了。原创 2023-03-23 17:05:13 · 415 阅读 · 0 评论 -
【实战】15.项目初始化
本章我们使用官方的脚手架搭建了 Vue3 +TypeScript+element-plus+VueRouter+Pinia 的项目,在下一章中,我们将学习路由 VueRouter 相关知识,并为项目配置基本路由。原创 2023-03-25 17:08:58 · 473 阅读 · 1 评论 -
【实战】16.Vue Router 入门
本章中,我们学习了 Vue Router 路由管理的基础知识,并且利用已学知识,解释了用脚手架搭建的初始路由,最后我们改造了路由配置,为实战页面路由安排做准备。原创 2023-03-25 17:10:05 · 297 阅读 · 0 评论 -
【实战】17.使用 Vue-router 进行路由管理
路由嵌套就是在一个路由页面中嵌套另一个路由页面,比如我们在 Home.vue 中嵌套了一个路由页面,这样我们就可以在 Home.vue 中实现一些公共的功能,比如导航栏,侧边栏等。本章中主要是实战路由的使用,其中涉及到了路由的导航守卫、路由的嵌套以及路由的重定向相关知识的学习,最终完成了基础登录页面的功能以及基础的路由配置。但还是存在一些问题,比如在登录时我们是写死 token 的,这样不太好,我们希望能够通过接口请求来获取 token,这就涉及到了下一章的接口请求相关知识了。原创 2023-03-27 10:14:30 · 736 阅读 · 0 评论 -
【实战】18.Axios 入门
在本章中我们学习了 Axios 的基本知识,在下一章中我们将用这章所学知识对 Axios 进行封装,并在项目中使用 Axios 请求数据。原创 2023-03-27 10:12:50 · 487 阅读 · 0 评论 -
【实战】19.Axios 封装与使用
本章我们介绍了如何在 Vue 项目中使用 Axios,以及如何对 Axios 进行封装,最后我们在项目中的登录页面使用 Axios 进行接口请求。这里我们并没有真正的后端,而是使用的 Apifox 的 Mock 功能,这样我们就可以在没有后端的情况下进行接口开发。这种方式在工作开发也会用到,例如:在开发过程中,后端接口还没有开发完成,这时候我们就可以使用 Apifox 的 Mock 功能,来进行接口开发。在下一章中,我们将介绍如何使用 Apifox 进行接口开发。原创 2023-03-27 10:15:30 · 460 阅读 · 0 评论 -
【实战】20.Apifox 进行 Mock 数据模拟
由于本专栏是学习 Vue3 前端项目的开发实战,所以我们并不会涉及到后端的学习。前后端分离,我们只关注前端,而不关心后端是使用 Java、Python、还是 Node 实现,前端只需要通过接口请求来获取数据即可,这里我们使用 Apifox 进行接口 Mock 数据请求。这种方式在工作开发也会用到:例如:在开发过程中,后端接口还没有开发完成,这时候我们就可以使用 Apifox 的 Mock 功能,来进行接口开发联调。原创 2023-03-27 10:16:13 · 1527 阅读 · 0 评论 -
【实战】21.使用 Element Plus 实现界面设计
在前面的章节,我们已经安装了 Element Plus,并且在前面章节的登录页面我们还使用了 Element Plus 的表单组件和按钮组件。在这一章节,我们将使用 Element Plus 实现界面设计和主体的页面布局。安装 Element Plus在 main.ts 中引入 Element Plus。原创 2023-03-28 11:20:39 · 1083 阅读 · 0 评论 -
【实战】22.Echart 数据可视化
在上节中我们已经会使用 Element Plus 组件库了,能完成我们的基本需求,但是我们还是需要一个数据可视化的图表,这样我们的数据才能更加直观的展示出来,这节我们就来学习一下 Echart 的使用。本章我们主要介绍了 Echart 的使用,在实际的项目中,我们可以根据自己的需求来选择不同的图表,来展示不同的数据。下一章,我们将学习 Pinia 相关知识,并使用 Pinia 状态管理库,来实现上述首页中的待办事项功能。原创 2023-03-28 11:19:56 · 352 阅读 · 0 评论 -
【实战】23.Pinia 状态管理
Pinia 是一个 Vue 3 的状态管理库,它的 API 设计参考了 Vuex,但是它的实现方式和 Vuex 不同,它是基于 Proxy 的,而 Vuex 是基于 Vue 的响应式系统的。Pinia 是一个轻量级的状态管理库,它的 API 设计非常简洁,使用起来非常方便。Pinia 支持 TypeScript,使用 TypeScript 编写的项目可以获得更好的类型支持。Pinia 支持多个 store,可以将不同的状态分离到不同的 store 中,方便管理。原创 2023-03-28 21:58:21 · 415 阅读 · 0 评论 -
【实战】24.列表的增删改查
本章我们通过列表 Table 组件,实现一个符合实际的相对复杂的列表需求页面,包括列表的增删改查、分页、导入导出、排序、总计等功能。在开始开发时,我们可以先做个技术选型,毕竟市面上已经有很多成熟的组件库和轮子了。我们这个列表的需求还是比较复杂的,目前 Vue3 关于列表做的比较好的轮子,我觉得可以使用vxe-table这个列表组件库,支持 Vue3 而且功能也比较强大,还有中文文档。本章中我们使用 vxe-table 实现了常见的表格功能,包括搜索、新增、保存、删除、排序、总计、导出、刷新、列配置等功能。原创 2023-03-30 16:51:07 · 583 阅读 · 1 评论 -
【加餐 1】前端项目快速部署上线,无需一分钱
早些年读大学那会,我还是使用了 tomcat,然后在服务器安装 tomcat,将项目丢进去启动服务,依旧还记得将 vue-cli 打包之后得到的 dist 文件夹丢进服务器中,然后项目就跑起来了,当时觉得成就满满!不过现在前端部署我们也许根本不需要再额外购买服务器了,而是使用相关的平台完成一键部署,一般对于个人项目来说,无需一分钱。并且这些平台也会给我们提供域名,连买域名的钱都省了,简直不要太香~原创 2023-04-03 21:38:31 · 737 阅读 · 0 评论