摘要：
官网资料 构建生产版本——库模式 https://cn.vitejs.dev/guide/build.html#library-mode 详细设置 https://cn.vitejs.dev/config/#build-lib 技术栈 vite rollup 打包方式 vue-cli 自带的是 we 阅读全文
随笔分类 - Vue3
vite2 + vite.config.js 比较坑的环境变量，vite2模式的使用
2021-11-21 19:40 by 金色海洋（jyk）, 3224 阅读, 收藏, 编辑
摘要：
想在vite.config.js 里面判断一下环境，看看是不是开发环境，查了一下官网（https://cn.vitejs.dev/guide/env-and-mode.html），说是 可以使用 import.meta.env.DEV 。 但是在 vite.config.js 里面直接写 impor 阅读全文
整理一下在 npmjs.com 上面发布资源包踩过的坑
2021-10-25 15:41 by 金色海洋（jyk）, 609 阅读, 收藏, 编辑
摘要：
正常流程就不说了，网上有很多，比如写代码、打包、注册、登录、发布等。 邮箱要激活 在 npmjs.com 上面注册账号的时候需要填写邮箱，然后登录网址的时候并没有强制要求你去邮箱激活。 但是到了发布资源包的时候，如果还没有去邮箱激活的话，就会报错。 具体出错信息记不清了，好像有 email 的字样。 阅读全文
告别Vuex，发挥compositionAPI的优势，打造Vue3专用的轻量级状态
2021-10-17 11:10 by 金色海洋（jyk）, 901 阅读, 收藏, 编辑
摘要：
Vuex 的遗憾 Vuex 是基于 Vue2 的 option API 设计的，因为 optionAPI 的一些先天问题，所以导致 Vuex 不得不用各种方式来补救，于是就出现了 getter、mutations、action、module、mapXXX 这些绕圈圈的使用方式。想要使用 Vuex 就 阅读全文
vue3 专用 indexedDB 封装库，基于Promise告别回调地狱
2021-10-14 14:42 by 金色海洋（jyk）, 1607 阅读, 收藏, 编辑
摘要：
IndexedDB 的官网 https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API 这个大概是官网吧，原始是英文的，现在陆续是出中文版。有空的话还是多看看官网。 简介 IndexedDB 是一种底层 API，用于在客户端存储大量的 阅读全文
vue3 自己做一个轻量级状态管理，带跟踪功能，知道是谁改的，还能定位代码。
2021-08-24 14:25 by 金色海洋（jyk）, 954 阅读, 收藏, 编辑
摘要：
上一篇 https://www.cnblogs.com/jyk/p/14706005.html 介绍了一个自己做的轻量级的状态管理，好多网友说，状态最重要的是跟踪功能，不能跟踪算啥状态管理？ 因为vue3的状态都是 reactive 的形式，也就是 proxy，原本以为有自动跟踪的功能，但是后来发现 阅读全文
vue3，后台管理列表页面各组件之间的状态关系
2021-07-07 13:51 by 金色海洋（jyk）, 1817 阅读, 收藏, 编辑
摘要：
技术栈 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）, 2340 阅读, 收藏, 编辑
摘要：
前情回顾 基于 el-form 封装一个依赖 json 动态渲染的表单控件 Vue3 封装第三方组件（一）做一个合格的传声筒 功能 使用 vue3 + element-plus 封装了一个查询控件，专为管理后台量身打造，支持各种查询需求： 多种查询方式 快捷查询 更多查询 自定义查询 支持防抖 清空 阅读全文
使用 vue3 的自定义指令给 element-plus 的 el-dialog 增加拖拽功能
2021-05-25 09:17 by 金色海洋（jyk）, 5228 阅读, 收藏, 编辑
摘要：
element-plus 提供的 el-dialog 对话框功能非常强大，只是美中不足不能通过拖拽的方式改变位置，有点小遗憾，那么怎么办呢？我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框（el-dialog）。 拖拽演示 https://www.zhihu.com/zvideo/138 阅读全文
基于 el-form 封装一个依赖 json 动态渲染的表单控件
2021-05-19 07:44 by 金色海洋（jyk）, 1988 阅读, 收藏, 编辑
摘要：
nf-form 表单控件的功能 基于 el-form 封装了一个表单控件，包括表单的子控件。 既然要封装，那么就要完善一些，把能想到的功能都要实现出来，不想留遗憾。 毕竟UI库提供的功能都很强大了，不能浪费了对吧。 依赖 json 动态创建表单 可以多行多列 可以调整布局 可以自定义子控件（插槽和动 阅读全文
使用局部状态（轻量级状态）优化博客代码
2021-05-10 11:10 by 金色海洋（jyk）, 591 阅读, 收藏, 编辑
摘要：
上两篇介绍了如何用vite2 + Vue3 搭建一个博客网站，以及轻量级状态的基础使用，那么二者结合起来会发生什么呢？ 做个开源博客学习Vite2 + Vue3 （四）实现博客功能 https://www.cnblogs.com/jyk/p/14696474.html 制作一个轻量级的状态管理插件： 阅读全文
制作一个轻量级的状态管理插件：Vue-data-state
2021-04-26 18:49 by 金色海洋（jyk）, 1002 阅读, 收藏, 编辑
摘要：
Vuex 是不是有点繁琐？ Vuex 是针对 Vue2 来设计的，因为 option API 本身有很多缺点，所以 Vuex 只好做各种补丁弥补这些缺点，于是变得比较“复杂”。 现在 Vue3 推出了Composition API，功能更强大也弥补了之前的缺点，但是 Vuex 4.0 只是兼容了 V 阅读全文
做个开源博客学习Vite2 + Vue3 （四）实现博客功能
2021-04-24 11:14 by 金色海洋（jyk）, 1119 阅读, 收藏, 编辑
摘要：
我们再来看一下管理类的设计。 Composition API，就是组合API的意思，那么是不是应该把js代码分离出来，做成独立的管理类的形式呢？ 这样代码可以更整洁一些，主要是setup里面的代码就不会乱掉了。 管理类 import webSQLHelp from '../store/websql- 阅读全文
做个开源博客学习Vite2 + Vue3 （三）博客设计和代码设计
2021-04-23 17:49 by 金色海洋（jyk）, 656 阅读, 收藏, 编辑
摘要：
项目搭建好了之后是不是可以编码了呢？ 等等不要着急，我们是不是应该先设计一下？比如博客的功能等？ 博客设计 先做个简单的个人博客，因为是个人版，所以可以省略注册、登录这些功能，表结构也可以简单一点。 基础功能：添加博文、显示博文、博文列表+查询+分页、讨论列表和添加讨论。 虽然功能弱了一点，但是麻雀 阅读全文
做个开源博客学习Vite2 + Vue3 （二）设置别名、代理和ESLint
2021-04-22 07:04 by 金色海洋（jyk）, 1501 阅读, 收藏, 编辑
摘要：
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）, 1499 阅读, 收藏, 编辑
摘要：
前言 不会 webpack，遇到报错就一头雾水，完全不知道怎么办，而且体积还大速度还慢。 所以尤雨溪做了 vite 后就很向往，只是知道自己水平有限还是等大佬先趟趟坑，等差不多了在跳。 现在vite2发布了，官网也有了，网上也能找到大佬写的相关资料，时机应该成熟可以往里跳了。 所以打算做个开源博客， 阅读全文
reactive是如何实现深层响应的？
2021-04-17 12:13 by 金色海洋（jyk）, 314 阅读, 收藏, 编辑
摘要：
深层响应的 reactive 看过官网文档的都知道，Vue3 的响应性分为浅层和深层，我们常用的 reactive 是深层的。 我们也都知道，reactive 是使用 proxy 来实现响应性的，那么问题来了： 既然 proxy 的拦截操作是浅层的，对于嵌套属性的操作无感，那么 reactive 是 阅读全文
Vue3 封装第三方组件（一）做一个合格的传声筒
2021-04-17 10:14 by 金色海洋（jyk）, 2172 阅读, 收藏, 编辑
摘要：
各种UI库的功能都是非常强大的，尤其对于我这种不会 css 的人来说，就更是帮了大忙了。 只是嘛，如果再封装一下的话，那么用起来就会更方便了。 那么如何封装呢？ 封装三要素 —— 属性、插槽、事件、方法 可以封装，但是原生UI库提供的强大功能不能给封装没了吧，吃了回扣可是不好滴。 那么如何做到不遗漏 阅读全文
初探 vite2 + vue3
2021-04-10 09:38 by 金色海洋（jyk）, 1322 阅读, 收藏, 编辑
摘要：
vite2已经出来一段时间了，这几天没忍住尝试了一下，首先体验到的就是 —— 快，真的很快，再也不用痛苦的等待了。 然后就是踩坑，因为vite2还算是比较新，所以介绍文章不多，虽然已经出来官网文档了，但是现在的官网似乎侧重原理介绍，对于最初级的使用方式，似乎没有，或者是我还没有找到。 这里汇总一些基 阅读全文
全面了解Vue3的 ref 和相关函数和计算属性
2021-04-10 09:21 by 金色海洋（jyk）, 4105 阅读, 收藏, 编辑
摘要：
基础类型的响应性 —— ref 在vue3里面，我们可以通过 reactive 来实现引用类型的响应性，那么基础类型的响应性如何来实现呢？ 可能你会想到这样来实现： const count = reactive({value: 0}) count.value += 1 这么做确实可以实现，而且也很像 阅读全文
