博客园 - 金色海洋(jyk)
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=64657
2023-05-26T04:11:42Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
feed.cnblogs.com
https://www.cnblogs.com/jyk/p/17434408.html
Vue3.3 的新功能的体验(下):泛型组件(Generic Component) 与 defineSlots - 金色海洋(jyk)
> 上一篇说了 DefineOptions、defineModel、Props 的响应式解构和从外部导入类型 这几个新功能,但是没有说Generic、defineSlots等,这是因为还没有完全搞清楚可以用在什么地方。折腾了几天终于弄清楚了。 这还要从 TS 的泛型说起。 ## 泛型的目的和意义 泛
2023-05-26T04:12:00Z
2023-05-26T04:12:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】> 上一篇说了 DefineOptions、defineModel、Props 的响应式解构和从外部导入类型 这几个新功能,但是没有说Generic、defineSlots等,这是因为还没有完全搞清楚可以用在什么地方。折腾了几天终于弄清楚了。 这还要从 TS 的泛型说起。 ## 泛型的目的和意义 泛 <a href="https://www.cnblogs.com/jyk/p/17434408.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/17406348.html
Vue3.3 的新功能的一些体验 - 金色海洋(jyk)
Vue3 在大版本 3.3 里面推出来了一些新功能(主要是语法糖),网上有各种文章,但是看起来似乎是一样的。 我觉得吧,有新特性了,不能光看,还要动手尝试一下。 DefineOptions 宏定义 先来一个简单的,以前我们有时候想设个name,有时候不想让组件自动继承属性,这时候需要单独设置一个sc
2023-05-16T09:38:00Z
2023-05-16T09:38:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】Vue3 在大版本 3.3 里面推出来了一些新功能(主要是语法糖),网上有各种文章,但是看起来似乎是一样的。 我觉得吧,有新特性了,不能光看,还要动手尝试一下。 DefineOptions 宏定义 先来一个简单的,以前我们有时候想设个name,有时候不想让组件自动继承属性,这时候需要单独设置一个sc <a href="https://www.cnblogs.com/jyk/p/17406348.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/17360859.html
Vue3实现组件级基类的几种方法 - 金色海洋(jyk)
Vue3的组件有三种代码组织方式 纯Option API (不含setup) option API + setup 纯 setup (即composition API) 对于这三种形式,设置基类的方法也略有不同。 使用 mixins、extends vue3提供了 mixins和extends,但是
2023-04-28T00:21:00Z
2023-04-28T00:21:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】Vue3的组件有三种代码组织方式 纯Option API (不含setup) option API + setup 纯 setup (即composition API) 对于这三种形式,设置基类的方法也略有不同。 使用 mixins、extends vue3提供了 mixins和extends,但是 <a href="https://www.cnblogs.com/jyk/p/17360859.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16485920.html
【摸鱼神器】UI库秒变低代码工具——表单篇(二)子控件 - 金色海洋(jyk)
上一篇介绍了表单控件,这一篇介绍一下表单里面的各种子控件的封装方式。 主要内容 需求分析 子控件的分类 子控件属性的分类 定义 interface。 定义子控件的的 props。 定义 json 文件。 基于 UI库 进行二次封装,实现依赖 json 渲染。 通过 slot 、 “字典”,实现自定义
2022-07-17T01:22:00Z
2022-07-17T01:22:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】上一篇介绍了表单控件,这一篇介绍一下表单里面的各种子控件的封装方式。 主要内容 需求分析 子控件的分类 子控件属性的分类 定义 interface。 定义子控件的的 props。 定义 json 文件。 基于 UI库 进行二次封装,实现依赖 json 渲染。 通过 slot 、 “字典”,实现自定义 <a href="https://www.cnblogs.com/jyk/p/16485920.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16424726.html
【摸鱼神器】UI库秒变低代码工具——表单篇(一)设计 - 金色海洋(jyk)
前面说了列表的低代码化的方法,本篇介绍一下表单的低代码化。 内容摘要 需求分析。 定义 interface。 定义表单控件的 props。 定义 json 文件。 基于 el-form 封装,实现依赖 json 渲染。 实现多列、验证、分栏等功能。 使用 slot 实现自定义扩展。 自定义子控件。(
2022-06-29T11:43:00Z
2022-06-29T11:43:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】前面说了列表的低代码化的方法,本篇介绍一下表单的低代码化。 内容摘要 需求分析。 定义 interface。 定义表单控件的 props。 定义 json 文件。 基于 el-form 封装,实现依赖 json 渲染。 实现多列、验证、分栏等功能。 使用 slot 实现自定义扩展。 自定义子控件。( <a href="https://www.cnblogs.com/jyk/p/16424726.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16403985.html
用Typescript 的方式封装Vue3的表单绑定,支持防抖等功能。 - 金色海洋(jyk)
Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法。 基础使用方法 Vue3对于表单的绑定提供了一种简单的方式:v-model。对于使用者来说非常方便,v-model="name" 就可以了。 自己
2022-06-23T01:11:00Z
2022-06-23T01:11:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法。 基础使用方法 Vue3对于表单的绑定提供了一种简单的方式:v-model。对于使用者来说非常方便,v-model="name" 就可以了。 自己 <a href="https://www.cnblogs.com/jyk/p/16403985.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16361878.html
【摸鱼神器】UI库秒变LowCode工具——列表篇(二)维护json的小工具 - 金色海洋(jyk)
上一篇介绍了一下如何实现一个可以依赖 json 渲染的列表控件,既然需要 json 文件,那么要如何维护这个 json 文件就成了重点,如果没有好的维护方案的话,那么还不如直接用UI库。 所以需要我们做一个维护 json 文件的小工具,维护 json 有多方法: 最基础的方法就是手撸,显然这个是下下
2022-06-10T00:34:00Z
2022-06-10T00:34:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】上一篇介绍了一下如何实现一个可以依赖 json 渲染的列表控件,既然需要 json 文件,那么要如何维护这个 json 文件就成了重点,如果没有好的维护方案的话,那么还不如直接用UI库。 所以需要我们做一个维护 json 文件的小工具,维护 json 有多方法: 最基础的方法就是手撸,显然这个是下下 <a href="https://www.cnblogs.com/jyk/p/16361878.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16347748.html
【摸鱼神器】UI库秒变LowCode工具——列表篇(一)设计与实现 - 金色海洋(jyk)
内容摘要: 需求分析 定义 interface 定义 json 文件 定义列表控件的 props 基于 el-table 封装,实现依赖 json 渲染 实现内置功能:选择行(单选、多选),格式化、锁定等。 使用 slot 实现自定义扩展 做个工具维护 json 文件(下篇介绍) 管理后台里面,列表
2022-06-06T04:11:00Z
2022-06-06T04:11:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】内容摘要: 需求分析 定义 interface 定义 json 文件 定义列表控件的 props 基于 el-table 封装,实现依赖 json 渲染 实现内置功能:选择行(单选、多选),格式化、锁定等。 使用 slot 实现自定义扩展 做个工具维护 json 文件(下篇介绍) 管理后台里面,列表 <a href="https://www.cnblogs.com/jyk/p/16347748.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16308015.html
【摸鱼神器】一次搞定 vue3的 路由 + 菜单 + tabs - 金色海洋(jyk)
做一个管理后台,首先要设置路由,然后配置菜单(有时候还需要导航),再来一个动态tabs,最后加上权限判断。 这个是不是有点繁琐?尤其是路由的设置和菜单的配置,是不是很雷同?那么能不能简单一点呢?如果可以实现设置一次就全部搞定的话,那么是不会很香呢? 我们可以简单封装一下,实现这个愿望。 定义一个结构
2022-05-25T00:52:00Z
2022-05-25T00:52:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】做一个管理后台,首先要设置路由,然后配置菜单(有时候还需要导航),再来一个动态tabs,最后加上权限判断。 这个是不是有点繁琐?尤其是路由的设置和菜单的配置,是不是很雷同?那么能不能简单一点呢?如果可以实现设置一次就全部搞定的话,那么是不会很香呢? 我们可以简单封装一下,实现这个愿望。 定义一个结构 <a href="https://www.cnblogs.com/jyk/p/16308015.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16288682.html
被迫开始学习Typescript —— vue3的 props 与 interface - 金色海洋(jyk)
vue3 的 props Vue3 的 props ,分为 composition API 的方式以及 option API 的方式,可以实现运行时判断类型,验证属性值是否符合要求,以及提供默认值等功能。 props 可以不依赖TS,自己有一套运行时的验证方式,如果加上TS的话,还可以实现在编写代码
2022-05-19T07:24:00Z
2022-05-19T07:24:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】vue3 的 props Vue3 的 props ,分为 composition API 的方式以及 option API 的方式,可以实现运行时判断类型,验证属性值是否符合要求,以及提供默认值等功能。 props 可以不依赖TS,自己有一套运行时的验证方式,如果加上TS的话,还可以实现在编写代码 <a href="https://www.cnblogs.com/jyk/p/16288682.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16275700.html
被迫开始学习Typescript —— class - 金色海洋(jyk)
TS 的 class 看起来和 ES6 的 Class 有点像,基本上差别不大,除了 可以继承(实现)接口、私有成员、只读等之外。 参考:https://typescript.bootcss.com/classes.html 基本用法 我们可以定义一个 class,设置几个属性,然后设置一个方法,封
2022-05-16T01:03:00Z
2022-05-16T01:03:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】TS 的 class 看起来和 ES6 的 Class 有点像,基本上差别不大,除了 可以继承(实现)接口、私有成员、只读等之外。 参考:https://typescript.bootcss.com/classes.html 基本用法 我们可以定义一个 class,设置几个属性,然后设置一个方法,封 <a href="https://www.cnblogs.com/jyk/p/16275700.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16269238.html
被迫开始学习Typescript —— interface - 金色海洋(jyk)
一开始以为,需要使用 class 来定义呢,学习之后才发现,一般都是使用 interface 来定义的。 这个嘛,倒是挺适合 js 环境的。 参考:https://typescript.bootcss.com/interfaces.html 简单接口 我们先来定义一个简单的接口 interface
2022-05-14T02:11:00Z
2022-05-14T02:11:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】一开始以为,需要使用 class 来定义呢,学习之后才发现,一般都是使用 interface 来定义的。 这个嘛,倒是挺适合 js 环境的。 参考:https://typescript.bootcss.com/interfaces.html 简单接口 我们先来定义一个简单的接口 interface <a href="https://www.cnblogs.com/jyk/p/16269238.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16257632.html
结合 Vuex 和 Pinia 做一个适合自己的状态管理 nf-state - 金色海洋(jyk)
一开始学习了一下 Vuex,感觉比较冗余,就自己做了一个轻量级的状态管理。 后来又学习了 Pinia,于是参考 Pinia 改进了一下自己的状态管理。 结合 Vuex 和 Pinia, 保留需要的功能,去掉不需要的功能,修改一下看着不习惯的使用方法,最后得到了一个满足自己需要的轻量级状态管理 ——
2022-05-11T05:46:00Z
2022-05-11T05:46:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】一开始学习了一下 Vuex,感觉比较冗余,就自己做了一个轻量级的状态管理。 后来又学习了 Pinia,于是参考 Pinia 改进了一下自己的状态管理。 结合 Vuex 和 Pinia, 保留需要的功能,去掉不需要的功能,修改一下看着不习惯的使用方法,最后得到了一个满足自己需要的轻量级状态管理 —— <a href="https://www.cnblogs.com/jyk/p/16257632.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16248880.html
一篇文章说清 webpack、vite、vue-cli、create-vue 的区别 - 金色海洋(jyk)
webpack、vite、vue-cli、create-vue 这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。 先看这个表格: 脚手架 vue-cli create-vue 构建项目 vite 打包代码 webpack rollup 脚手架:创建项目,选择性安装需要的插件,指定统一的风格,生
2022-05-09T05:20:00Z
2022-05-09T05:20:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】webpack、vite、vue-cli、create-vue 这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。 先看这个表格: 脚手架 vue-cli create-vue 构建项目 vite 打包代码 webpack rollup 脚手架:创建项目,选择性安装需要的插件,指定统一的风格,生 <a href="https://www.cnblogs.com/jyk/p/16248880.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16212215.html
从 jQuery 到 Vue3 的快捷通道 - 金色海洋(jyk)
当初使用 jQuery 做了几个简单的项目,算是有一点点了解,现在学习Vue3,发现了一个可以快速转换思维的通道 —— 使用CDN的方式模拟 Vite 建立的项目! CDN方式 jQuery的使用非常方便,用 script 引入 js文件即可,然后找到DOM即可开始操作。 而 Vue3 也支持直接用
2022-05-01T01:23:00Z
2022-05-01T01:23:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】当初使用 jQuery 做了几个简单的项目,算是有一点点了解,现在学习Vue3,发现了一个可以快速转换思维的通道 —— 使用CDN的方式模拟 Vite 建立的项目! CDN方式 jQuery的使用非常方便,用 script 引入 js文件即可,然后找到DOM即可开始操作。 而 Vue3 也支持直接用 <a href="https://www.cnblogs.com/jyk/p/16212215.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16054309.html
简单了解一下pinia的结构 - 金色海洋(jyk)
随着 Vue3 的正式转正,Pinia 也渐渐火了起来。所以要更新一下自己的知识树了。这里主要是看看新的状态是什么“形态”。 状态的容器还是“reactive” 按照官网教程,做一个简单的例子: import { defineStore } from 'pinia' export const use
2022-03-25T05:51:00Z
2022-03-25T05:51:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】随着 Vue3 的正式转正,Pinia 也渐渐火了起来。所以要更新一下自己的知识树了。这里主要是看看新的状态是什么“形态”。 状态的容器还是“reactive” 按照官网教程,做一个简单的例子: import { defineStore } from 'pinia' export const use <a href="https://www.cnblogs.com/jyk/p/16054309.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16034137.html
nf-Press —— 在线文档也可以加载组件和编写代码 - 金色海洋(jyk)
如果帮助文档可以加载组件,那么在介绍的同时就可以运行演示demo,是不是很酷? 如果可以在线修改运行代码,那么是不是更容易理解? 上一篇 https://www.cnblogs.com/jyk/p/15994934.html 介绍了一下基本功能,这里介绍一下关于代码方面的功能。 源码和演示 http
2022-03-21T04:30:00Z
2022-03-21T04:30:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】如果帮助文档可以加载组件,那么在介绍的同时就可以运行演示demo,是不是很酷? 如果可以在线修改运行代码,那么是不是更容易理解? 上一篇 https://www.cnblogs.com/jyk/p/15994934.html 介绍了一下基本功能,这里介绍一下关于代码方面的功能。 源码和演示 http <a href="https://www.cnblogs.com/jyk/p/16034137.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/16029074.html
vite2 打包的时候vendor-xxx.js文件过大的解决方法 - 金色海洋(jyk)
vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了。 打包时遇到警告 输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk) Some
2022-03-20T02:03:00Z
2022-03-20T02:03:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了。 打包时遇到警告 输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk) Some <a href="https://www.cnblogs.com/jyk/p/16029074.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/15994934.html
基于 vite2 + Vue3 写一个在线帮助文档工具 - 金色海洋(jyk)
提起帮助文档,想必大家都会想到 VuePress等,我也体验了一下,但是感觉和我的思路不太一样,我希望的是那种可以直接在线编辑文档,然后无需编译就可以直接发布的方式,另外可以在线写(修改)代码并且运行的效果。 VuePress 是“静态网站生成器”,需要我们自行编写文档,然后交给VuePress变成
2022-03-11T10:40:00Z
2022-03-11T10:40:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】提起帮助文档,想必大家都会想到 VuePress等,我也体验了一下,但是感觉和我的思路不太一样,我希望的是那种可以直接在线编辑文档,然后无需编译就可以直接发布的方式,另外可以在线写(修改)代码并且运行的效果。 VuePress 是“静态网站生成器”,需要我们自行编写文档,然后交给VuePress变成 <a href="https://www.cnblogs.com/jyk/p/15994934.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jyk/p/15814617.html
通过UI库深入了解Vue的插槽的使用技巧 - 金色海洋(jyk)
Vue官网对于插槽的介绍比较简略,插槽本身也比较“烧脑”,很容易看晕,我就一直没看懂,直到 使用了element-plus的组件的插槽。 其实我们可以换一个角度来理解插槽,就会豁然开朗了。 技术栈 vite vue3 element-plus 从父子组件的传值开始 父子组件传值可以通过 prosp
2022-01-17T10:10:00Z
2022-01-17T10:10:00Z
金色海洋(jyk)
https://www.cnblogs.com/jyk/
【摘要】Vue官网对于插槽的介绍比较简略,插槽本身也比较“烧脑”,很容易看晕,我就一直没看懂,直到 使用了element-plus的组件的插槽。 其实我们可以换一个角度来理解插槽,就会豁然开朗了。 技术栈 vite vue3 element-plus 从父子组件的传值开始 父子组件传值可以通过 prosp <a href="https://www.cnblogs.com/jyk/p/15814617.html" target="_blank">阅读全文</a>