暂时未有相关云产品技术能力~
喜欢编程
element-plus 的 el-menu 菜单组件,功能非常强大,支持n级菜单、图标等等功能。如果菜单是静态的,直接手撸的话,那么按照官网实例即可,但是如果需要基于json动态绑定,而且还是n级菜单,那么要怎么办呢?
UI库提供了很多组件,组件又带有很多属性,有一些常用属性我们可以记住并且手撸,但是有些不常用的属性,或者需要设置多个属性,这样的情况下写起来就麻烦了,有时候还要打开帮助文档看看属性是怎么设定的,需要设置什么样的属性值。
传说日期格式化的YYYY会出问题,我一直都是这么写的呀,也没注意过。
在 vue3里面,reactive、watch等都属于基础用法。
Vue3 的后台管理的项目想要做个菜单的话,一般会使用 VueRouter 设置路由,然后用UI库的菜单组件(比如 el-menu)设置各种属性,然后还需要考虑权限等问题。
vue的生命周期还是比较饶腾的,最直接的方法就是都写出来体验一下。
封装了一个查询控件,如果没有输入查询条件的话,就清空对应的查询条件,如果输入查询条件,则生成对应的查询对象。
有一些小的常用的方法,整理起来封装一下,便于使用。
在Vue的项目里,创建组件是一个基本技能,Vue也提供了多种方法,比如 option API、 setup、script setup等。
随着 Vue3 的正式转正,Pinia 也渐渐火了起来。所以要更新一下自己的知识树了。这里主要是看看新的状态是什么“形态”。
上一篇 juejin.cn/post/707482… 介绍了一下基本功能,这里介绍一下关于代码方面的功能
vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了。
提起帮助文档,想必大家都会想到 VuePress等,我也体验了一下,但是感觉和我的思路不太一样,我希望的是那种可以直接在线编辑文档,然后无需编译就可以直接发布的方式,另外可以在线写(修改)代码并且运行的效果。
使用rollup打包的方法
想在vite.config.js 里面判断一下环境,看看是不是开发环境,查了一下官网(cn.vitejs.dev/guide/env-a… 可以使用 import.meta.env.DEV 。
告别Vuex,发挥compositionAPI的优势,打造Vue3专用的轻量级状态
IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。该 API 可以使用索引实现对数据的高性能搜索。
因为vue3的状态都是 reactive 的形式,也就是 proxy,原本以为有自动跟踪的功能,但是后来发现,好像没有。
为啥需要状态?因为组件划分的非常原子化(细腻),所以造成了很多的组件,那么组件之间就需要一种“通讯方式”,这个就是状态了。不仅仅是传递数据,还可以实现事件总线。
封装一个依赖 json 动态渲染的查询控件
element-plus 提供的 el-dialog 对话框功能非常强大,只是美中不足不能通过拖拽的方式改变位置,有点小遗憾,那么怎么办呢?我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框(el-dialog)。
先介绍功能,然后演示功能,最后介绍思路和编码方式。
上两篇介绍了如何用vite2 + Vue3 搭建一个博客网站,以及轻量级状态的基础使用,那么二者结合起来会发生什么呢?
Vuex 是针对 Vue2 来设计的,因为 option API 本身有很多缺点,所以 Vuex 只好做各种补丁弥补这些缺点,于是变得比较“复杂”。
Composition API,就是组合API的意思,那么是不是应该把js代码分离出来,做成独立的管理类的形式呢?
项目搭建好了之后是不是可以编码了呢? 等等不要着急,我们是不是应该先设计一下?比如博客的功能等?
vite2可以有很多配置,也可以都使用默认配置,这个看项目需要。
不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢。 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳。
看过官网文档的都知道,Vue3 的响应性分为浅层和深层,我们常用的 reactive 是深层的。
各种UI库的功能都是非常强大的,尤其对于我这种不会 css 的人来说,就更是帮了大忙了。
全面了解Vue3的 ref 以及相关函数和计算属性
这几天学习Vue的官网,看到 customRef 提供了一个例子,研究半天发现这是一个防抖函数,觉得挺好,于是把这个例子扩展了一下,可以用于表单子控件和查询子控件。
Vue3的 reactive 怎么用,原理是什么,官网上和reactive相关的那些函数又都是做什么用处的?这里会一一解答。
用Class + Promise封装一下Web SQL
用递归的组件实现json的格式化
如何优雅的给组件设置属性
ref(0)vs reactive({value: 0})放在一起,似乎好像是一样的,但是只能说实现的功能是一样的,而且我们也确实可以这么做,但是vue内部却并不是这么实现。
网上关于watch的介绍有很多,但是一般都是按照官网的套路来介绍,比如监听一个属性,监听多个属性等等。
既然reactive是使用Proxy实现的,而且也可以套娃,那么我们自己定义一个Proxy套一下reactive会怎么样呢?
给表单控件设置一个插槽
话说UI库提供的功能是越来越强了,比如这个 element 的 Cascader 实在是太强大了,拿过来准备好数据就可以直接使用了。那么为啥还要封装一下呢?一个是为了封装表单控件统一风格,这样可以统一管理,另一个就是想小改一下数据结构。
Vuex4,在Vue3环境下如何优雅的管理状态?
基于注入的一种状态管理的思路
控件属性的设置方式
Vue3组件(七)封装选择类的组件
UI库的日期组件嘛,还是很强大的,稍微封装一下就好,主要还是为了可以统一接口。
这个表单控件是基于 element-plus 的 el-form 做的二次封装,所以首先感谢 element-plus 提供了这么强大的UI库,以前用 jQuery 做过类似的,但是非常麻烦,既不好看,可维护性、扩展性也差,好多想法都实现不了(技术有限)。
官网有一个url组件的例子,但是比较简陋,基本不太好用,那么我们来完善一下。
在开源世界里面就是这么简单,我们完全可以在开源的UI库的基础上实现自己的想法。
一般UI库都会提供一个form控件,非常方便好用,自己其中的item还是需要一行一行的写,比较麻烦