自然框架的博客_JavaScript,Mysql,HTML5

Vue3.3 的新功能的体验（下）：泛型组件（Generic Component) 与 defineSlots

> 上一篇说了 DefineOptions、defineModel、Props 的响应式解构和从外部导入类型这几个新功能

泛型

插槽

作用域

原创精选 3月前 329 阅读

Vue3.3 的新功能的一些体验

Vue3 在大版本 3.3 里面推出来了一些新功能（主要是语法糖），网上有各种文章，但是看起

Vue

ci

封装

原创 3月前 315 阅读

Vue3实现组件级基类的几种方法

Vue3的组件有三种代码组织方式纯Option API （不含setup） option API + setup 纯 setup （即composition API）对

API

官网

模板模式

原创 4月前 259 阅读

【摸鱼神器】UI库秒变低代码工具——表单篇（一）设计

前面说了列表的低代码化的方法，本篇介绍一下表单的低代码化。内容摘要需求分析。定义 interface。定义表单控件的

表单

控件

json

原创 10月前 69 阅读

用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。

Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等，想来大家都很熟悉了，本篇介绍一种使用 Typescript 的方式进行统一的封装的方法。基础使用方法 Vue3对于表单的绑定提供了一种简单的方式：v-model。对于使用者来说非常方便，v-model="name" 就可以了。自己

封装

字段

控件

原创 10月前 138 阅读

【摸鱼神器】UI库秒变LowCode工具——列表篇（一）设计与实现

内容需求分析定义 interface 定义 json 文件定义列表控件的 props 基于 el-table 封装，实现依赖 json 渲染实现内置功能：选择行（单选、多选），格式化、锁定等。使用 slot 实现自定义扩展做个工具维护 json 文件（下篇介绍）管理后台里面，列表

单选

数据

列表控件

原创 10月前 62 阅读

【摸鱼神器】UI库秒变LowCode工具——列表篇（二）维护json的小工具

下下

json

拖拽

表单

原创 2022-09-18 10:15:08 151 阅读

【摸鱼神器】UI库秒变低代码工具——表单篇（二）子控件

上一篇介绍了表单控件，这一篇介绍一下表单里面的实现自定义

控件

封装

表单

原创 2022-07-23 00:24:52 54 阅读

【摸鱼神器】一次搞定 vue3的路由 + 菜单 + tabs

做一个管理后台，首先要设置路由，然后配置菜单（有时候还需要导航），再来一个动态tabs，最后加上权限判断。这个是不是有点繁

加载

ico

封装

原创 2022-06-28 23:36:51 685 阅读

被迫开始学习Typescript —— vue3的 props 与 interface

vue3 的 props Vue3 的 props ，分为 composition API 的方式以及 option

控件

表单

字段

原创 2022-05-24 11:58:11 297 阅读

被迫开始学习Typescript —— class

TS 的 class 看起来和 ES6 的 Class 有点像，基本上差别不大，除了可以继承（实现）接口、私有成员、只读等之外。

赋值

数组

封装

原创 2022-05-19 13:55:30 135 阅读

被迫开始学习Typescript —— interface

一开始以为，需要使用 class 来定义呢，学习之后才发现，一般都是使用 interface 来定义的。这个嘛，倒是挺适合 js 环境的。参考：https://typescript.bootcss.com/interfaces.html 简单接口我们先来定义一个简单的接口 interface

数组

多继承

typescript

原创 2022-05-17 09:35:13 145 阅读

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

webpack、vite、vue-cli、create-vue 这些都是什么？看着有点晕，不要怕，我们一起来分辨一下。先看这个表格：脚手架 vue-cli create-vue 构建项目 vite 打包代码 webpack rollup 脚手架：创建项目，选择性安装需要的插件，指定统一的风格，生

官网

ide

打包工具

原创 2022-05-14 18:24:47 549 阅读

从 jQuery 到 Vue3 的快捷通道

当初使用 jQuery 做了几个简单的项目，算是有一点点了解，现在学习Vue3，发现了一个可以快速转换思维的通道 —— 使用CDN的方式模拟 Vite 建立的项目！ CDN方式 jQuery的使用非常方便，用 script 引入 js文件即可，然后找到DOM即可开始操作。而 Vue3 也支持直接用

加载

html

ios

原创 2022-05-05 14:54:22 99 阅读

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

vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，这就郁闷了。打包时遇到警告输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk) Some

ios

ide

解决方案

原创 2022-05-05 14:54:09 724 阅读

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

如果帮助文档可以加载组件，那么在介绍的同时就可以运行演示demo，是不是很酷？如果可以在线修改运行代码，那么是不是更容易理解？上一篇 https://www.cnblogs.com/jyk/p/15994934.html 介绍了一下基本功能，这里介绍一下关于代码方面的功能。源码和演示 http

加载

git

html

原创 2022-05-05 14:54:02 62 阅读

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

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

ico

json

css

原创 2022-05-05 13:54:21 285 阅读

简单了解一下pinia的结构

随着 Vue3 的正式转正，Pinia 也渐渐火了起来。所以要更新一下自己的知识树了。这里主要是看看新的状态是什么“形态”。状态的容器还是“reactive”按照官网教程，做一个简单的例子：import { defineStore } from 'pinia'export const usePersonStore = defineStore('objectTest', { state: () =

数据

实体类

赋值

原创 2022-03-28 14:16:05 314 阅读

通过UI库深入了解Vue的插槽的使用技巧

Vue官网对于插槽的介绍比较简略，插槽本身也比较“烧脑”，很容易看晕，我就一直没看懂，直到使用了element-plus的组件的插槽。其实我们可以换一个角度来理解插槽，就会豁然开朗了。技术栈 vite vue3 element-plus 从父子组件的传值开始父子组件传值可以通过 prosp

插槽

自定义

json

原创 2022-02-15 11:40:19 169 阅读

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

UI库提供了很多组件，组件又带有很多属性，有一些常用属性我们可以记住并且手撸，但是有些不常用的属性，或者需要设置多个属性，这样的情况下写起来就麻烦了，有时候还要打开帮助文档看看属性是怎么设定的，需要设置什么样的属性值。那么有没有优雅的方式来设置组件的各种属性呢？我做了一个在线小工具，可以方便的设置

数组

属性值

json

原创 2022-01-20 11:32:58 143 阅读 1点赞 1评论

彻底搞清楚 JavaScript 的原型和原型链

JavaScript真的挺无语的，怪不得看了那么多的介绍文章还是一头雾水，直到自己终于弄懂了一点点之后才深有体会：先从整体说起吧，发现没有基础做依据，那都是空中楼阁；先从基础开始介绍吧，又发现基础是个蛇头咬蛇尾的圆环，无从下手，应该先整体介绍。于是介绍本身就成了一个死循环。。。还是尝试着从基

javascript

构造函数

原型链

面向对象

继承关系

原创 2021-12-06 09:32:41 187 阅读

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

打包方式vue-cli 自带的是 webpack 的打包方式，打出的包体积有点大，而 vite 自带的是 rollup 的打包方式，这种方式打包的体积就非常小，官网也有一些使用说明，所以学会之后还是比较很方便的。vite 的库项目可以分为两类：（我自己分的）一个是纯js的项目，不带HTML；一个是可以带上HTML（模板）的项目，比如UI库。下面分别介绍一下编写和打包方式，其实大同小异。纯js的库项

第三方插件

html

文件路径

官网

全局变量

原创 2021-12-01 09:43:23 1924 阅读

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

想在vite.config.js 里面判断一下环境，看看是不是开发环境，查了一下官网（https://cn.vitejs.dev/guide/env-and-mode.html），说是可以使用 import.meta.env.DEV 。但是在 vite.config.js 里面直接写 impor

开发模式

json

库文件

ide

官网

原创 2021-11-22 09:39:17 1257 阅读

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

正常流程就不说了，网上有很多，比如写代码、打包、注册、登录、发布等。邮箱要激活在 npmjs.com 上面注册账号的时候需要填写邮箱，然后登录网址的时候并没有强制要求你去邮箱激活。但是到了发布资源包的时候，如果还没有去邮箱激活的话，就会报错。具体出错信息记不清了，好像有 email 的字样。

版本号

验证用户名

手机app

二维码

知乎

原创 2021-10-29 10:36:26 169 阅读

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

Vuex 的遗憾Vuex 是基于 Vue2 的 option API 设计的，因为 optionAPI 的一些先天问题，所以导致 Vuex 不得不用各种方式来补救，于是就出现了 getter、mutations、action、module、mapXXX 这些绕圈圈的使用方式。想要使用 Vuex 就必须先把这些额外的函数给弄明白。Vue3 发布之后，Vuex4 为了向下兼容只是支持了 Vue3 的写

嵌套

初始化

钩子函数

回调函数

数组

原创 2021-10-20 11:09:05 192 阅读

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

数据库

封装

增删改查

数据

sed

原创 2021-10-18 13:36:40 1135 阅读

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

介绍了一个自己做的轻量级的状态管理，好多网友说，状态最重要的是跟踪功能，不能跟踪算啥状态管理？因为vue3的状态都是 reactive 的形式，也就是 proxy，原本以为有自动跟踪的功能，但是后来发现

嵌套

数组

获取时间

属性值

git

原创 2021-08-26 14:33:45 94 阅读

一个保存数据的方法（可以切换存放的位置，可以设置密钥）

一个可以切换不同的存放位置（cookies、隐藏域、Session、Cache、application），可以设置自己的密钥的缓存数据的方式（当然也可以比加密）。

保存数据

数据

分页

赋值

隐藏域

原创 2021-08-01 12:46:25 138 阅读

文档驱动 —— 表单组件（二）：meta生成器，告别书写代码

手写代码？ meta（json）需要手写吗？别闹，手写多麻烦呀，我这么懒怎么可能手写，这辈子都别想，所以要弄个工具出来，咱们说干就干。这个工具，说白了本身就是一个表单，一个meta属性对应一个meta的属性，合在一起就是一个完整的meta了，只是不同的组件属性不同，需要区分对待不能混为一谈。先看

表单

json

控件

赋值

双引号

原创 2021-07-31 09:51:01 122 阅读

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

技术栈 vite2 vue 3.0.5 vue-router 4.0.6 vue-data-state 0.1.1 element-plus 1.0.2-beta.39 前情回顾表单控件查询控件轻量级状态管理前面介绍的表单控件和查询控件，都是原子性的，实现自己的功能即可。而这里要介绍的是管

vue.js

原创 2021-07-12 10:20:27 670 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	在线客服	网站地图	意见反馈

开源基础软件社区	51CTO学堂
51CTO	汽车开发者社区

51CTO博客

自然框架，你值得拥有

Vue3.3 的新功能的体验（下）：泛型组件（Generic Component) 与 defineSlots

Vue3.3 的新功能的一些体验

Vue3实现组件级基类的几种方法

【摸鱼神器】UI库秒变低代码工具——表单篇（一）设计

用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。

【摸鱼神器】UI库秒变LowCode工具——列表篇（一）设计与实现

【摸鱼神器】UI库秒变LowCode工具——列表篇（二）维护json的小工具

【摸鱼神器】UI库秒变低代码工具——表单篇（二）子控件

【摸鱼神器】一次搞定 vue3的路由 + 菜单 + tabs

被迫开始学习Typescript —— vue3的 props 与 interface

被迫开始学习Typescript —— class

被迫开始学习Typescript —— interface

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

从 jQuery 到 Vue3 的快捷通道

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

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

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

简单了解一下pinia的结构

通过UI库深入了解Vue的插槽的使用技巧

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

彻底搞清楚 JavaScript 的原型和原型链

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

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

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

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

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

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

一个保存数据的方法（可以切换存放的位置，可以设置密钥）

文档驱动 —— 表单组件（二）：meta生成器，告别书写代码

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