- 博客(959)
- 资源 (7)
- 收藏
- 关注
RSS订阅
原创 「成长之路」挥手2020，Chocolate 同学年度总结，所遇 | 所思 | 所学 | 所悟（年度征文）
挥手2020，Chocolate 同学年度总结，所遇 | 所思 | 所学 | 所悟（年度征文）
2020-12-29 20:52:06
5386
52
原创 「不进则退」2020 Chocolate 同学秋招前端の大厂面经&心路历程&个人经验分享
自我介绍本人双非本科，目前大四在读，JS，TS，LeetCode，Vue，React，算法爱好者。 座右铭：学如逆水行舟，不进则退！在今年7月份在某电子公司实习过，有过一段前端开发实习经历，8月份正式踏入秋招的征途，投递了许许多多的公司，面试过腾讯、字节、滴滴、美团、快手、网易、阿里等公司，也面过一些中小型公司，整个过程也是坎坷，在此简述一下秋招结果：腾讯多次倒在一面字节跳动跳到二面截止滴滴三连面，倒在最后一面快手倒在一面网易互娱流程走完，等待OC美团技术面走完，等待HR面我们的征途.
2020-10-28 09:53:09
1621
7
原创 【长文总结】2020 从零到博客专家 过去的我，现在的我，将来的我
其实对于2020年我一直想写一篇长文总结的，从2020年开始到现在已经过去了3个月了，这3个月期间我看了许多篇别人对于2019的总结以及对2020年自己的新打算。我的灵感一直都挺多的，如果写一篇对于2019的总结的话，我自己觉得好像说来说去只能说点心灵鸡汤来激励自己2020年继续加油努力，想着也没有一件可以用时间线的形式来说的事情，2019年或许感受颇多的就是对于ACM方面，我已经写了一篇总结了，继续写也没有什么新的思绪在这里面了。
2020-03-13 14:20:46
6610
31
原创 《2023 年 React 生态》
React 不知不觉到 23 年已经有 10 年之久了，下面是来自于网图，关于 10 周年的生日蛋糕：很高兴能和各位分享自己所使用的 React 生态，以及通过那篇文章了解了大概的生态内容，本文也还有许多不足，比如也许了解的框架还不够，部分内容并未提及到，主要是以我当前水平视角去说，带有一些个人体验感受，可谓是美中不足吧。
2023-06-20 23:00:00
1854
原创 【加餐 2】Tab 标签页管理
在本章中，我们首先构想了一个标签页的功能，然后我们梳理了实现思路，选择使用 Pinia 管理标签页状态，并在组件中使用 el-tabs 组件生成页面效果，最后实现右键呼出下拉菜单的基本功能。在此基础上，我们可以继续拓展标签页的功能，比如标签页的刷新、固定时展示固定 icon、点击 icon 固定等其它功能。
2023-04-14 22:29:39
1111
1
原创 【加餐 1】前端项目快速部署上线，无需一分钱
早些年读大学那会，我还是使用了 tomcat，然后在服务器安装 tomcat，将项目丢进去启动服务，依旧还记得将 vue-cli 打包之后得到的 dist 文件夹丢进服务器中，然后项目就跑起来了，当时觉得成就满满！不过现在前端部署我们也许根本不需要再额外购买服务器了，而是使用相关的平台完成一键部署，一般对于个人项目来说，无需一分钱。并且这些平台也会给我们提供域名，连买域名的钱都省了，简直不要太香~
2023-04-03 21:38:31
688
原创 【实战】24.列表的增删改查
本章我们通过列表 Table 组件，实现一个符合实际的相对复杂的列表需求页面，包括列表的增删改查、分页、导入导出、排序、总计等功能。在开始开发时，我们可以先做个技术选型，毕竟市面上已经有很多成熟的组件库和轮子了。我们这个列表的需求还是比较复杂的，目前 Vue3 关于列表做的比较好的轮子，我觉得可以使用vxe-table这个列表组件库，支持 Vue3 而且功能也比较强大，还有中文文档。本章中我们使用 vxe-table 实现了常见的表格功能，包括搜索、新增、保存、删除、排序、总计、导出、刷新、列配置等功能。
2023-03-30 16:51:07
551
1
原创 【实战】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
374
原创 【实战】21.使用 Element Plus 实现界面设计
在前面的章节，我们已经安装了 Element Plus，并且在前面章节的登录页面我们还使用了 Element Plus 的表单组件和按钮组件。在这一章节，我们将使用 Element Plus 实现界面设计和主体的页面布局。安装 Element Plus在 main.ts 中引入 Element Plus。
2023-03-28 11:20:39
983
原创 【实战】22.Echart 数据可视化
在上节中我们已经会使用 Element Plus 组件库了，能完成我们的基本需求，但是我们还是需要一个数据可视化的图表，这样我们的数据才能更加直观的展示出来，这节我们就来学习一下 Echart 的使用。本章我们主要介绍了 Echart 的使用，在实际的项目中，我们可以根据自己的需求来选择不同的图表，来展示不同的数据。下一章，我们将学习 Pinia 相关知识，并使用 Pinia 状态管理库，来实现上述首页中的待办事项功能。
2023-03-28 11:19:56
322
原创 【实战】20.Apifox 进行 Mock 数据模拟
由于本专栏是学习 Vue3 前端项目的开发实战，所以我们并不会涉及到后端的学习。前后端分离，我们只关注前端，而不关心后端是使用 Java、Python、还是 Node 实现，前端只需要通过接口请求来获取数据即可，这里我们使用 Apifox 进行接口 Mock 数据请求。这种方式在工作开发也会用到：例如：在开发过程中，后端接口还没有开发完成，这时候我们就可以使用 Apifox 的 Mock 功能，来进行接口开发联调。
2023-03-27 10:16:13
1403
原创 【实战】19.Axios 封装与使用
本章我们介绍了如何在 Vue 项目中使用 Axios，以及如何对 Axios 进行封装，最后我们在项目中的登录页面使用 Axios 进行接口请求。这里我们并没有真正的后端，而是使用的 Apifox 的 Mock 功能，这样我们就可以在没有后端的情况下进行接口开发。这种方式在工作开发也会用到，例如：在开发过程中，后端接口还没有开发完成，这时候我们就可以使用 Apifox 的 Mock 功能，来进行接口开发。在下一章中，我们将介绍如何使用 Apifox 进行接口开发。
2023-03-27 10:15:30
428
原创 【实战】17.使用 Vue-router 进行路由管理
路由嵌套就是在一个路由页面中嵌套另一个路由页面，比如我们在 Home.vue 中嵌套了一个路由页面，这样我们就可以在 Home.vue 中实现一些公共的功能，比如导航栏，侧边栏等。本章中主要是实战路由的使用，其中涉及到了路由的导航守卫、路由的嵌套以及路由的重定向相关知识的学习，最终完成了基础登录页面的功能以及基础的路由配置。但还是存在一些问题，比如在登录时我们是写死 token 的，这样不太好，我们希望能够通过接口请求来获取 token，这就涉及到了下一章的接口请求相关知识了。
2023-03-27 10:14:30
703
原创 【实战】18.Axios 入门
在本章中我们学习了 Axios 的基本知识，在下一章中我们将用这章所学知识对 Axios 进行封装，并在项目中使用 Axios 请求数据。
2023-03-27 10:12:50
458
原创 【实战】16.Vue Router 入门
本章中，我们学习了 Vue Router 路由管理的基础知识，并且利用已学知识，解释了用脚手架搭建的初始路由，最后我们改造了路由配置，为实战页面路由安排做准备。
2023-03-25 17:10:05
277
原创 【实战】15.项目初始化
本章我们使用官方的脚手架搭建了 Vue3 +TypeScript+element-plus+VueRouter+Pinia 的项目，在下一章中，我们将学习路由 VueRouter 相关知识，并为项目配置基本路由。
2023-03-25 17:08:58
457
1
原创 【TypeScript 入门】14.泛型
本章中我们介绍了泛型的作用和用法，并举例介绍了泛型在函数、类和约束场景中的使用。泛型中理解困难的在于，需要抽象、封装类型运算逻辑实现类型的灵活可复用，比较考验设计封装能力。至此 TypeScript 入门教程已经结束啦，当然还有一些 TypeScript 的进阶知识没有讲到，但对于此次实战和日常工作使用已经足够了。
2023-03-23 17:05:13
396
原创 【TypeScript 入门】13.枚举类型
本章中介绍了 TypeScript 的枚举类型，它可以帮助我们为一组具有相关联义项的常量赋予一个含义明确的名字，从而提高代码的可读性和可维护性。下一章我们将学习 TypeScript 入门教程的最后一章：TypeScript 有趣的特性—泛型。
2023-03-23 17:03:38
410
原创 【TypeScript 入门】11.接口类型和类型别名
本章讲述了 TypeScript 中对核心的知识点之一：接口类型和类型别名，并且对比了两者的区别，在大部分场景下 interface 都可以被 type 取代，在某些场景下，还是有比较大的差别的。下一章中我们将讲述本章在类型别名中提到的联合和交叉类型。
2023-03-22 10:48:55
289
原创 【TypeScript 入门】12.高级类型
这一章介绍了联合和交叉类型，作为 TypeScript 类型最基本的“运算”能力，学习和掌握后，可以培养我们抽离、复用公共类型的意识和能力。
2023-03-22 10:48:53
411
原创 【TypeScript 入门】10.类型推断、类型拓宽与缩小
在上一章节中，我们学习了 TypeScript 的基本语法和类型。我们总是需要显式的注明变量类型，但实际上 TypeScript 具备类型推断的能力，可以让我们每次都声明变量类型。这一章中讲到了类型判断以及类型拓展和缩小的知识，涉及到的场景也比较简单。这一章节就当开胃小菜吧，下面一章相对复杂一些，会讲到 TypeScript 最常用到的两个特性：interface 和 type。
2023-03-21 18:43:13
287
原创 【TypeScript 入门】09.初识 TypeScript
Vue3 其中一个很大的特性就是支持 TypeScript，基本很少看到有使用了 Vue3 的项目但是不使用 TypeScript 的。TypeScript 可以在编译时通过静态分析检测出很多常见错误。大部分前端大型项目都是使用 TypeScript 编写，包括 Vue 自身。并且所有的 Vue 官方库都自带了类型声明文件，开箱即用。可见不管是公司 Vue3 项目，还是 Vue3 的学习，我们都避不开要学习 TypeScript。本章就带大家初识 TypeScript。
2023-03-21 18:37:43
297
原创 【Vue3 基础加餐篇】08.源码解析响应式原理
本章中我们从源码的角度剖析了 Vue3 的响应式原理，并且在响应式最简实践这一节中，使用抽象代码，从宏观理解响应式的实现，相信看完会有豁然开朗的感觉。
2023-03-20 10:13:30
185
原创 【Vue3 基础加餐篇】07.key 的作用源码解析
这一章中，我们在讨论 Vue 中 key 的作用这个话题之前，先聊到了虚拟 DOM，引出组件更新的 patch 函数，最终我们详细解析了其中的 diff 算法，理解了 diff 算法的流程以及 key 在 diff 算法中的用处。源码在 @vue/runtime-core/dist/runtime-core.cjs。
2023-03-20 10:05:25
318
原创 【Vue3 基础篇】05.组件化
本章中，我们首先结合 Vue 的生命周期的流程图，例举了各个生命周期钩子的触发时机，以及部分钩子的使用场景。然后讲到了 ref 的作用，最后讲完并实战了组件通信相关的 API。至此 Vue3 的基础知识到这里已经结束了，还剩下一小部分，留在我们实战课程中探索。下一章我们学习 TypeScript 相关基础知识，课程不会很长，带大家了解 TypeScript 常用的一些知识，为实战做准备。
2023-03-19 10:33:13
411
原创 【Vue3 基础篇】04.响应式 API
在这一章节中我们梳理了，两个响应式 API。一个是通过监听依赖返回数据，并且需要在模板中使用。另一个是通过监听依赖触发与该依赖相关的逻辑，并且可以是有"副作用”的。接着我们从源码的角度，探讨了这两个 API 可以监听依赖背后的逻辑，离不开 Vue 核心-响应式。在下一章中我们会讲到组件化相关知识，包括 ref、生命周期和组件传值等知识，我们下一章见。
2023-03-18 16:10:57
230
原创 【Vue3 基础篇】03.模板语法
这节中讲的指令就这么多了，相信你已经感受到了 Vue 的模板指令的魅力了。虽然看上去还是在写 HTML ，但是有了指令的加持，数据的展示和方法的绑定等都显得如此简单对吧，接下来就是要记住这些指令。中的 API 指令讲解结束了，下章中将会讲解，在 script 中的 Vue 的 API。
2023-03-18 16:04:48
326
原创 【Vue3 基础篇】02.声明式渲染
Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。当状态改变时，HTML 自动更新，这个能在改变时触发状态更新，被称作是响应式的。对应的我们想声明一个响应式状态，可以使用 Vue 的reactive()或者ref()API。reactive()创建的对象都是 JavaScript 的Proxy，其行为与普通对象一样。不同之处在于。
2023-03-18 15:56:08
959
原创 【Vue3 基础篇】01.初识 Vue
渐进式JavaScript框架。易学易用，性能出色，适用场景丰富的 Web 前端框架。同时他还有三个特点：1.易学易用：基于标准HTML、CSS 和 JavaScript构建，加上一流的文档介绍和易懂的API，相较于其它框架能快速上手。2.性能出色经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。3.灵活多变丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。简单来说Vue是一款用于构建用户界面的JavaScript框架。它基于标准。
2023-03-18 15:43:04
636
原创 关于 React 官方纪录片的一系列思考
这部纪录片还是挺不错的，一个又一个传奇的东西背后一定有许多传奇的故事，这些开发者们保持专注并且相信他们自己创造的东西，至少这背后的团队做到了，非常鼓舞人心。未知的东西往往会让人感到一定的害怕，但勇于面对之后你会发现其中的奥秘。最后，看完全文描述之后，对于设计模式又多了一份兴趣，在源码层之上能够大概了解编程上的思想其实是挺有意思的，而阅读源码其实是与框架的各位开发者们交流一样，加油吧，后续快速更新设计模式的内容！
2023-02-22 20:43:00
209
原创 初见 monorepo
大家好，我是 Chocolate。monorepo 不知道大家是否了解呢，我依旧记得在去年博客社区就有大佬写过这方面文章，当时对这个词语有点陌生，平常貌似也接触不到，不过算是给自己脑海中多添了一个词汇。而在最近一个月内，我发现给我推荐了好多关于 monorepo 的文章，这让我不得不去了解一下了，于是我就在开源社区逛了逛，然后也查阅了一些资料。发现原来现在 Vue3 也是使用了 monorepo 的方式。
2022-08-22 10:01:51
535
原创 这就下半年了，总结一下 6 月的工作
这里复盘一下 6 月份做的一些事情以及遇到的问题和如何解决的：这个已经单独输出了一篇文章来进行介绍，原本我是打算和这篇文章一起的，但没想到一写就写了那么多，全部堆在一起感觉不是很好，“拆出去成为一个组件，现在在这边文章进行引用”。具体内容大家可以参考这篇文章哈：algolia 搜索需求，做的快自闭了…因为部门关系，受邀参与了一次公司级别的直播，别说，当时给我激动地。可能部分读者们知道哈，我也是一名 UP 主，但其实我做的视...
2022-07-03 11:50:11
397
原创 algolia 搜索需求，做的快自闭了...
大家好，我是 Chocolate。6 月份，别说，做需求那真的是做的快自闭了，今天咱们重点聊一聊这次接触 algolia 搜索这玩意。提到搜索现在就很烦，6 月份穿插着做这个搜索功能，为啥说很烦呢，先例举一下：那咱们就逐个聊吧：首先是前端项目配置问题，尽管 algolia 支持，提供了 js 版本的库，叫做 Autocomplete，官方文档的搜索效果也是用这个来做的，并且还提供了相关搭建介绍。但是让我去实现起来是真的麻烦啊，在 js 文件里边写 html，你敢想吗？其次会存在很多重复代码，当然这里重复不
2022-07-01 21:43:48
2555
原创 「随笔」我的导师离职了...
大家好，我是 Chocolate。好久不见，我又来更新文章了。本次就不写技术相关了，聊聊技术之外的吧，文章写于 5 月 24 日晚，与我的导师吃了离别的饭，刚坐地铁回到家，包一放下脑海中有许多想法，想想自己又许久没有写随笔了，不妨就从现在开始吧，这个习惯还是不能丢。于是立即坐在了电脑前，把这几周的一些想法记录下来，如果你觉得有一些感触的话，可以给本文点个赞支持一下，也许许久未更新文章了，看得人估摸也少一些了。正好昨天从我导师那捡漏了一台 mac 无头骑士，就边配环境边输出内容，本文仅个人愚见，如若有表达
2022-05-25 21:15:30
788
4
原创 折腾一个月，从重构到再次设计，管理系统总算接入了权限
这个管理系统差不多做了一年多了，老项目不断地迭代，但之前产品设计的时候就没有考虑今后引入权限，做的一些功能也相对比较分散，一般有什么需求了就会往上面叠加功能。所以导致这次强行接入权限前端的工作量巨大
2022-03-27 15:15:30
1606
原创 关于 antd@4 之后 tree 树形控件不能横向排列这件事
在 17 年就有人提及需要支持横向排列，因为这个树形如果按照竖向的话，数据一多了，就显得很长。当时好像就没有解决这个问题，也看了 antd 之前的版本发现都没有这个配置项...
2022-02-25 14:06:39
2039
3
原创 前端网页文本选中出现一个反馈按钮，鼠标点击之后可以进行文档反馈
最近有一个需求，就是增强文档的反馈能力，类似于腾讯云文档一样，如图：当我们选中一些文本之后，会有一个 文档反馈的 tooltip 提示框，点击之后会有表单提交，不过这个文档技术比较牛的点就是，点击反馈提示框之后，还会自动截屏，存放图片，方便管理者查看。参考文章先放出参考文章吧，还是 css 世界作者大佬的，虽然时间是 2011 年，但是那会实现的到现在依旧还是可以的，如果大家能看懂的话，可以直接看参考文章即可。js页面文字选中后分享到新浪微博实现我的解决代码以下仅个人使用代码，大部分情况能够通
2022-02-16 14:24:17
1113
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人