自然框架_社区达人页

2022年04月

• 04.28 15:57:41
  发表了文章 2022-04-28 15:57:41

  基于el-menu，用递归实现动态n级菜单

  element-plus 的 el-menu 菜单组件，功能非常强大，支持n级菜单、图标等等功能。如果菜单是静态的，直接手撸的话，那么按照官网实例即可，但是如果需要基于json动态绑定，而且还是n级菜单，那么要怎么办呢？
• 04.28 15:55:10
  发表了文章 2022-04-28 15:55:10

  如何优雅的设置UI库组件的属性？

  UI库提供了很多组件，组件又带有很多属性，有一些常用属性我们可以记住并且手撸，但是有些不常用的属性，或者需要设置多个属性，这样的情况下写起来就麻烦了，有时候还要打开帮助文档看看属性是怎么设定的，需要设置什么样的属性值。

  
• 04.28 15:38:52
  发表了文章 2022-04-28 15:38:52

  2022-01-01 关于日期格式化的YYYY 的坑。

  传说日期格式化的YYYY会出问题，我一直都是这么写的呀，也没注意过。
• 04.28 15:37:10
  发表了文章 2022-04-28 15:37:10

  vue3 官网没有明说的隐藏技能（一）watch与reactive

  在 vue3里面，reactive、watch等都属于基础用法。
• 04.28 15:32:28
  发表了文章 2022-04-28 15:32:28

  vue3 做一个后台管理用的轻量级路由 + 菜单

  Vue3 的后台管理的项目想要做个菜单的话，一般会使用 VueRouter 设置路由，然后用UI库的菜单组件（比如 el-menu）设置各种属性，然后还需要考虑权限等问题。
• 04.28 15:25:52
  发表了文章 2022-04-28 15:25:52

  温故而知新之：生命周期

  vue的生命周期还是比较饶腾的，最直接的方法就是都写出来体验一下。

  
• 04.28 15:19:29
  发表了文章 2022-04-28 15:19:29

  想要判断是不是 empty 还真的挺麻烦的

  封装了一个查询控件，如果没有输入查询条件的话，就清空对应的查询条件，如果输入查询条件，则生成对应的查询对象。
• 04.28 15:16:26
  发表了文章 2022-04-28 15:16:26

  （一）JavaScript小工具库

  有一些小的常用的方法，整理起来封装一下，便于使用。
• 04.27 18:19:08
  发表了文章 2022-04-27 18:19:08

  使用class的方式创建Vue的组件，解决代码复用的问题

  在Vue的项目里，创建组件是一个基本技能，Vue也提供了多种方法，比如 option API、 setup、script setup等。
• 04.27 18:16:09
  发表了文章 2022-04-27 18:16:09

  简单了解一下pinia的结构

  随着 Vue3 的正式转正，Pinia 也渐渐火了起来。所以要更新一下自己的知识树了。这里主要是看看新的状态是什么“形态”。

  
• 04.27 17:55:13
  发表了文章 2022-04-27 17:55:13

  nf-Press —— 在线文档也可以加载组件和编写代码

  上一篇 juejin.cn/post/707482… 介绍了一下基本功能，这里介绍一下关于代码方面的功能

  
• 04.27 17:17:13
  发表了文章 2022-04-27 17:17:13

  vite2 打包的时候vendor-xxx.js文件过大的解决方法

  vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，这就郁闷了。
• 04.27 17:05:27
  发表了文章 2022-04-27 17:05:27

  基于 vite2 + Vue3 写一个在线帮助文档工具

  提起帮助文档，想必大家都会想到 VuePress等，我也体验了一下，但是感觉和我的思路不太一样，我希望的是那种可以直接在线编辑文档，然后无需编译就可以直接发布的方式，另外可以在线写（修改）代码并且运行的效果。

  
• 04.27 16:53:00
  发表了文章 2022-04-27 16:53:00

  vite的项目，使用rollup打包的方法

  使用rollup打包的方法

  
• 04.27 16:39:23
  发表了文章 2022-04-27 16:39:23

  vite2 + vite.config.js 比较坑的环境变量，vite2模式的使用

  想在vite.config.js 里面判断一下环境，看看是不是开发环境，查了一下官网（cn.vitejs.dev/guide/env-a… 可以使用 import.meta.env.DEV 。
• 04.27 16:37:21
  发表了文章 2022-04-27 16:37:21

  告别Vuex，发挥compositionAPI的优势，打造Vue3专用的轻量级状态

  告别Vuex，发挥compositionAPI的优势，打造Vue3专用的轻量级状态

  
• 04.27 16:30:09
  发表了文章 2022-04-27 16:30:09

  vue3 专用 indexedDB 封装库，基于Promise告别回调地狱

  IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 可以使用索引实现对数据的高性能搜索。

  
• 04.27 16:22:35
  发表了文章 2022-04-27 16:22:35

  vue3 自己做一个轻量级状态管理，带跟踪功能，知道是谁改的，还能定位代码

  因为vue3的状态都是 reactive 的形式，也就是 proxy，原本以为有自动跟踪的功能，但是后来发现，好像没有。

  
• 04.27 16:17:10
  发表了文章 2022-04-27 16:17:10

  vue3，后台管理列表页面各组件之间的状态关系

  为啥需要状态？因为组件划分的非常原子化（细腻），所以造成了很多的组件，那么组件之间就需要一种“通讯方式”，这个就是状态了。不仅仅是传递数据，还可以实现事件总线。

  
• 04.27 16:06:42
  发表了文章 2022-04-27 16:06:42

  基于 element-plus 封装一个依赖 json 动态渲染的查询控件

  封装一个依赖 json 动态渲染的查询控件

  
• 04.27 15:50:38
  发表了文章 2022-04-27 15:50:38

  使用vue3的自定义指令给 el-dialog 增加拖拽功能

  element-plus 提供的 el-dialog 对话框功能非常强大，只是美中不足不能通过拖拽的方式改变位置，有点小遗憾，那么怎么办呢？我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框（el-dialog）。

  
• 04.27 15:45:19
  发表了文章 2022-04-27 15:45:19

  基于 el-form 封装一个依赖 json 动态渲染的表单控件

  先介绍功能，然后演示功能，最后介绍思路和编码方式。

  
• 04.27 15:36:28
  发表了文章 2022-04-27 15:36:28

  使用局部状态（轻量级状态）优化博客代码

  上两篇介绍了如何用vite2 + Vue3 搭建一个博客网站，以及轻量级状态的基础使用，那么二者结合起来会发生什么呢？
• 04.27 15:31:51
  发表了文章 2022-04-27 15:31:51

  制作一个轻量级的状态管理插件：Vue-data-state

  Vuex 是针对 Vue2 来设计的，因为 option API 本身有很多缺点，所以 Vuex 只好做各种补丁弥补这些缺点，于是变得比较“复杂”。

  
• 04.27 15:26:51
  发表了文章 2022-04-27 15:26:51

  做个开源博客学习Vite2 + Vue3 （四）实现博客功能

  Composition API，就是组合API的意思，那么是不是应该把js代码分离出来，做成独立的管理类的形式呢？

  
• 04.27 15:18:46
  发表了文章 2022-04-27 15:18:46

  做个开源博客学习Vite2 + Vue3 （三）博客设计和代码设计

  项目搭建好了之后是不是可以编码了呢？ 等等不要着急，我们是不是应该先设计一下？比如博客的功能等？

  
• 04.27 15:15:16
  发表了文章 2022-04-27 15:15:16

  做个开源博客学习Vite2 + Vue3 （二）设置别名、代理和ESLint

  vite2可以有很多配置，也可以都使用默认配置，这个看项目需要。

  
• 04.27 15:08:27
  发表了文章 2022-04-27 15:08:27

  做个开源博客学习Vite2 + Vue3 （一）搭建项目

  不会 webpack，遇到报错就一头雾水，完全不知道怎么办，而且体积还大速度还慢。 所以尤雨溪做了 vite 后就很向往，只是知道自己水平有限还是等大佬先趟趟坑，等差不多了在跳。

  
• 04.27 15:02:16
  发表了文章 2022-04-27 15:02:16

  reactive是如何实现深层响应的？

  看过官网文档的都知道，Vue3 的响应性分为浅层和深层，我们常用的 reactive 是深层的。

  
• 04.27 14:59:42
  发表了文章 2022-04-27 14:59:42

  Vue3 封装第三方组件（一）做一个合格的传声筒

  各种UI库的功能都是非常强大的，尤其对于我这种不会 css 的人来说，就更是帮了大忙了。

  
• 04.26 23:28:20
  发表了文章 2022-04-26 23:28:20

  全面了解Vue3的 ref 以及相关函数和计算属性

  全面了解Vue3的 ref 以及相关函数和计算属性

  
• 04.26 23:19:45
  发表了文章 2022-04-26 23:19:45

  用 customRef 做一个防抖函数，支持 element 等UI库

  这几天学习Vue的官网，看到 customRef 提供了一个例子，研究半天发现这是一个防抖函数，觉得挺好，于是把这个例子扩展了一下，可以用于表单子控件和查询子控件。
• 04.26 23:15:32
  发表了文章 2022-04-26 23:15:32

  全面了解Vue3的 reactive 和相关函数

  Vue3的 reactive 怎么用，原理是什么，官网上和reactive相关的那些函数又都是做什么用处的？这里会一一解答。

  
• 04.26 22:54:20
  发表了文章 2022-04-26 22:54:20

  ES6（六）用Class + Promise封装一下Web SQL

  用Class + Promise封装一下Web SQL
• 04.26 22:51:08
  发表了文章 2022-04-26 22:51:08

  Vue组件（20）用递归的组件实现json的格式化

  用递归的组件实现json的格式化

  
• 04.26 22:47:44
  发表了文章 2022-04-26 22:47:44

  Vue3组件（19）如何优雅的给组件设置属性

  如何优雅的给组件设置属性

  
• 04.26 22:42:51
  发表了文章 2022-04-26 22:42:51

  Vue3（九）ref（0）vs reactive（{value: 0}）

  ref（0）vs reactive({value: 0})放在一起，似乎好像是一样的，但是只能说实现的功能是一样的，而且我们也确实可以这么做，但是vue内部却并不是这么实现。

  
• 04.26 22:36:59
  发表了文章 2022-04-26 22:36:59

  Vue3（八）用watch监听对象任意属性的变化（含嵌套属性）

  网上关于watch的介绍有很多，但是一般都是按照官网的套路来介绍，比如监听一个属性，监听多个属性等等。
• 04.26 22:34:49
  发表了文章 2022-04-26 22:34:49

  用Proxy给reactive套个娃会怎么样？

  既然reactive是使用Proxy实现的，而且也可以套娃，那么我们自己定义一个Proxy套一下reactive会怎么样呢？
• 04.26 22:31:47
  发表了文章 2022-04-26 22:31:47

  Vue3组件（17）给表单控件设置一个插槽

  给表单控件设置一个插槽

  
• 04.26 22:27:59
  发表了文章 2022-04-26 22:27:59

  Vue3组件（15）封装一下联动下拉

  话说UI库提供的功能是越来越强了，比如这个 element 的 Cascader 实在是太强大了，拿过来准备好数据就可以直接使用了。那么为啥还要封装一下呢？一个是为了封装表单控件统一风格，这样可以统一管理，另一个就是想小改一下数据结构。

  
• 04.26 22:24:10
  发表了文章 2022-04-26 22:24:10

  Vuex4，在Vue3环境下如何优雅的管理状态？

  Vuex4，在Vue3环境下如何优雅的管理状态？
• 04.26 22:19:12
  发表了文章 2022-04-26 22:19:12

  基于注入的一种状态管理的思路

  基于注入的一种状态管理的思路
• 04.26 22:12:44
  发表了文章 2022-04-26 22:12:44

  Vue3组件（14）控件属性的设置方式

  控件属性的设置方式
• 04.26 22:03:14
  发表了文章 2022-04-26 22:03:14

  Vue3组件（七）封装选择类的组件

  Vue3组件（七）封装选择类的组件
• 04.26 21:57:05
  发表了文章 2022-04-26 21:57:05

  Vue3组件（六）封装一下日期组件

  UI库的日期组件嘛，还是很强大的，稍微封装一下就好，主要还是为了可以统一接口。

  
• 04.26 21:52:47
  发表了文章 2022-04-26 21:52:47

  Vue3组件（九）Vue3+element+json实现一个动态渲染的表单控件

  这个表单控件是基于 element-plus 的 el-form 做的二次封装，所以首先感谢 element-plus 提供了这么强大的UI库，以前用 jQuery 做过类似的，但是非常麻烦，既不好看，可维护性、扩展性也差，好多想法都实现不了（技术有限）。

  
• 04.26 21:46:06
  发表了文章 2022-04-26 21:46:06

  Vue3组件（五）封装一个更好用的url组件

  官网有一个url组件的例子，但是比较简陋，基本不太好用，那么我们来完善一下。

  
• 04.26 21:40:35
  发表了文章 2022-04-26 21:40:35

  Vue3组件（三）把别人的组件拿过来再封装一下

  在开源世界里面就是这么简单，我们完全可以在开源的UI库的基础上实现自己的想法。

  
• 04.26 21:35:53
  发表了文章 2022-04-26 21:35:53

  Vue3组件（四）用v-for做表单成员（上）

  一般UI库都会提供一个form控件，非常方便好用，自己其中的item还是需要一行一行的写，比较麻烦