代码改变世界

随笔分类 - Vue3

整理一下在 npmjs.com 上面发布资源包踩过的坑

2021-10-25 15:41 by 金色海洋(jyk), 37 阅读, 收藏, 编辑
摘要: 正常流程就不说了,网上有很多,比如写代码、打包、注册、登录、发布等。 邮箱要激活 在 npmjs.com 上面注册账号的时候需要填写邮箱,然后登录网址的时候并没有强制要求你去邮箱激活。 但是到了发布资源包的时候,如果还没有去邮箱激活的话,就会报错。 具体出错信息记不清了,好像有 email 的字样。 阅读全文

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

2021-10-17 11:10 by 金色海洋(jyk), 241 阅读, 收藏, 编辑
摘要: Vuex 的遗憾 Vuex 是基于 Vue2 的 option API 设计的,因为 optionAPI 的一些先天问题,所以导致 Vuex 不得不用各种方式来补救,于是就出现了 getter、mutations、action、module、mapXXX 这些绕圈圈的使用方式。想要使用 Vuex 就 阅读全文

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

2021-10-14 14:42 by 金色海洋(jyk), 398 阅读, 收藏, 编辑
摘要: IndexedDB 的官网 https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API 这个大概是官网吧,原始是英文的,现在陆续是出中文版。有空的话还是多看看官网。 简介 IndexedDB 是一种底层 API,用于在客户端存储大量的 阅读全文

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

2021-08-24 14:25 by 金色海洋(jyk), 510 阅读, 收藏, 编辑
摘要: 上一篇 https://www.cnblogs.com/jyk/p/14706005.html 介绍了一个自己做的轻量级的状态管理,好多网友说,状态最重要的是跟踪功能,不能跟踪算啥状态管理? 因为vue3的状态都是 reactive 的形式,也就是 proxy,原本以为有自动跟踪的功能,但是后来发现 阅读全文

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

2021-07-07 13:51 by 金色海洋(jyk), 683 阅读, 收藏, 编辑
摘要: 技术栈 vite2 vue 3.0.5 vue-router 4.0.6 vue-data-state 0.1.1 element-plus 1.0.2-beta.39 前情回顾 表单控件 查询控件 轻量级状态管理 前面介绍的表单控件和查询控件,都是原子性的,实现自己的功能即可。 而这里要介绍的是管 阅读全文

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

2021-06-02 16:50 by 金色海洋(jyk), 711 阅读, 收藏, 编辑
摘要: 前情回顾 基于 el-form 封装一个依赖 json 动态渲染的表单控件 Vue3 封装第三方组件(一)做一个合格的传声筒 功能 使用 vue3 + element-plus 封装了一个查询控件,专为管理后台量身打造,支持各种查询需求: 多种查询方式 快捷查询 更多查询 自定义查询 支持防抖 清空 阅读全文

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

2021-05-25 09:17 by 金色海洋(jyk), 1184 阅读, 收藏, 编辑
摘要: element-plus 提供的 el-dialog 对话框功能非常强大,只是美中不足不能通过拖拽的方式改变位置,有点小遗憾,那么怎么办呢?我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框(el-dialog)。 拖拽演示 https://www.zhihu.com/zvideo/138 阅读全文

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

2021-05-19 07:44 by 金色海洋(jyk), 641 阅读, 收藏, 编辑
摘要: nf-form 表单控件的功能 基于 el-form 封装了一个表单控件,包括表单的子控件。 既然要封装,那么就要完善一些,把能想到的功能都要实现出来,不想留遗憾。 毕竟UI库提供的功能都很强大了,不能浪费了对吧。 依赖 json 动态创建表单 可以多行多列 可以调整布局 可以自定义子控件(插槽和动 阅读全文

使用局部状态(轻量级状态)优化博客代码

2021-05-10 11:10 by 金色海洋(jyk), 435 阅读, 收藏, 编辑
摘要: 上两篇介绍了如何用vite2 + Vue3 搭建一个博客网站,以及轻量级状态的基础使用,那么二者结合起来会发生什么呢? 做个开源博客学习Vite2 + Vue3 (四)实现博客功能 https://www.cnblogs.com/jyk/p/14696474.html 制作一个轻量级的状态管理插件: 阅读全文

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

2021-04-26 18:49 by 金色海洋(jyk), 632 阅读, 收藏, 编辑
摘要: Vuex 是不是有点繁琐? Vuex 是针对 Vue2 来设计的,因为 option API 本身有很多缺点,所以 Vuex 只好做各种补丁弥补这些缺点,于是变得比较“复杂”。 现在 Vue3 推出了Composition API,功能更强大也弥补了之前的缺点,但是 Vuex 4.0 只是兼容了 V 阅读全文

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

2021-04-24 11:14 by 金色海洋(jyk), 595 阅读, 收藏, 编辑
摘要: 我们再来看一下管理类的设计。 Composition API,就是组合API的意思,那么是不是应该把js代码分离出来,做成独立的管理类的形式呢? 这样代码可以更整洁一些,主要是setup里面的代码就不会乱掉了。 管理类 import webSQLHelp from '../store/websql- 阅读全文

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

2021-04-23 17:49 by 金色海洋(jyk), 441 阅读, 收藏, 编辑
摘要: 项目搭建好了之后是不是可以编码了呢? 等等不要着急,我们是不是应该先设计一下?比如博客的功能等? 博客设计 先做个简单的个人博客,因为是个人版,所以可以省略注册、登录这些功能,表结构也可以简单一点。 基础功能:添加博文、显示博文、博文列表+查询+分页、讨论列表和添加讨论。 虽然功能弱了一点,但是麻雀 阅读全文

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

2021-04-22 07:04 by 金色海洋(jyk), 666 阅读, 收藏, 编辑
摘要: vite2可以有很多配置,也可以都使用默认配置,这个看项目需要。 vite.config.js 我们先看看 vite.config.js里面的常用配置,其他配置可以看官网:https://cn.vitejs.dev/config/ // vite.config.js import { defineC 阅读全文

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

2021-04-22 06:40 by 金色海洋(jyk), 1028 阅读, 收藏, 编辑
摘要: 前言 不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢。 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳。 现在vite2发布了,官网也有了,网上也能找到大佬写的相关资料,时机应该成熟可以往里跳了。 所以打算做个开源博客, 阅读全文

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

2021-04-17 12:13 by 金色海洋(jyk), 77 阅读, 收藏, 编辑
摘要: 深层响应的 reactive 看过官网文档的都知道,Vue3 的响应性分为浅层和深层,我们常用的 reactive 是深层的。 我们也都知道,reactive 是使用 proxy 来实现响应性的,那么问题来了: 既然 proxy 的拦截操作是浅层的,对于嵌套属性的操作无感,那么 reactive 是 阅读全文

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

2021-04-17 10:14 by 金色海洋(jyk), 700 阅读, 收藏, 编辑
摘要: 各种UI库的功能都是非常强大的,尤其对于我这种不会 css 的人来说,就更是帮了大忙了。 只是嘛,如果再封装一下的话,那么用起来就会更方便了。 那么如何封装呢? 封装三要素 —— 属性、插槽、事件、方法 可以封装,但是原生UI库提供的强大功能不能给封装没了吧,吃了回扣可是不好滴。 那么如何做到不遗漏 阅读全文

初探 vite2 + vue3

2021-04-10 09:38 by 金色海洋(jyk), 658 阅读, 收藏, 编辑
摘要: vite2已经出来一段时间了,这几天没忍住尝试了一下,首先体验到的就是 —— 快,真的很快,再也不用痛苦的等待了。 然后就是踩坑,因为vite2还算是比较新,所以介绍文章不多,虽然已经出来官网文档了,但是现在的官网似乎侧重原理介绍,对于最初级的使用方式,似乎没有,或者是我还没有找到。 这里汇总一些基 阅读全文

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

2021-04-10 09:21 by 金色海洋(jyk), 765 阅读, 收藏, 编辑
摘要: 基础类型的响应性 —— ref 在vue3里面,我们可以通过 reactive 来实现引用类型的响应性,那么基础类型的响应性如何来实现呢? 可能你会想到这样来实现: const count = reactive({value: 0}) count.value += 1 这么做确实可以实现,而且也很像 阅读全文

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

2021-04-03 14:20 by 金色海洋(jyk), 263 阅读, 收藏, 编辑
摘要: 这几天学习Vue的官网,看到 customRef 提供了一个例子,研究半天发现这是一个防抖函数,觉得挺好,于是把这个例子扩展了一下,可以用于表单子控件和查询子控件。 需求 v-model 基于 element-plus 封装表单控件,同时也要封装一下表单子控件,还有查询控件。 由于 el-input 阅读全文

Vue组件(35)动态组件 component 的 is 到底可以是啥?

2021-04-01 18:56 by 金色海洋(jyk), 1719 阅读, 收藏, 编辑
摘要: component 动态组件 Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ,那么这里的 is 到底是什么呢? 官网介绍的太分散了,这里尽量全面的列举出来。如果有遗漏欢迎补充。 原生HTML <component is="input" p 阅读全文
2