joken1310 - 博客园

unplugin-auto-import 简介

摘要： unplugin-auto-import 简介 unplugin-auto-import 是一个用于自动导入常用函数和变量的 Vite 和 Webpack 插件。它可以帮助开发者减少手动导入的麻烦，提高开发效率。安装使用 npm 或 yarn 安装： npm install -D unplugi 阅读全文

posted @ 2024-07-13 16:21 joken1310 阅读(898) 评论(0) 推荐(0)

ts vue3 element-plus 自建可配置表单弹窗实现

摘要：当然可以！下面是使用 TypeScript 语法的动态表单弹出组件示例。 1. 创建动态表单弹出组件（TypeScript） <template> <el-dialog :visible.sync="visible" title="表单" @close="handleClose"> <el-form 阅读全文

posted @ 2024-07-13 15:46 joken1310 阅读(737) 评论(0) 推荐(0)

ts中Array Object 既可以是数据值，也可以是类型

摘要：概论 ts中Array Object 既可以是数据值，也可以是类型在 TypeScript 中，确实有些语法上的重叠，使得 Array 和 Object 可以同时表示数据值和类型。让我们来看一些具体的情况：数组 (Array) 1. 数据值： const arr1: number[] = [1, 阅读全文

posted @ 2024-07-10 21:50 joken1310 阅读(232) 评论(0) 推荐(0)

在.d.ts文件中写declare global 声明全局类型无效解决方式

摘要：代码 global.d.ts global中声明全局类型 declare global { /** * 响应数据 */ interface ResponseData<T = any> { code: string; data: T; msg: string; } } //加入export 就可以使g 阅读全文

posted @ 2024-07-10 21:38 joken1310 阅读(888) 评论(0) 推荐(0)

js null 和undefined的区别

摘要：概论 null 就是一个变量为空，未赋值,比如var abc=null; undefined 就是未定义，就是属性还未声明，比如 var abc={}; abc.d 就是undefind未定义,或者变量声明了，确还未赋值过。一般一个变量声明了，但是空值，用null比较适合，比如 var abc=n 阅读全文

posted @ 2024-07-10 21:17 joken1310 阅读(72) 评论(0) 推荐(0)

vue3 element plus 表单组件规则rules验证数组列表对象方式

摘要：参考代码 <el-form ref="ruleFormRef" :hide-required-asterisk="true" :model="broker" :rules="rules"> <div v-for="(item, index) in broker.education" :key="in 阅读全文

posted @ 2024-07-10 21:06 joken1310 阅读(798) 评论(0) 推荐(0)

vue3 reactive form表单数据不能输入，选中等原因,v-model导致响应式失效，element plus form

摘要：原因原因是element plus form 组件的ref名字和表单reactive变量数据同名了参考文章 https://blog.51cto.com/u_15127677/4350477 阅读全文

posted @ 2024-07-10 21:01 joken1310 阅读(189) 评论(0) 推荐(0)

js promise 纯js实现参考

摘要：代码 class myPromise { constructor(syncFn) { this.callbacks = []; //resolve 的目的是调用下一个then中的函数 const resolve = (value) => { const nextThenFn = this.callb 阅读全文

posted @ 2024-07-10 00:10 joken1310 阅读(41) 评论(0) 推荐(0)

ts 对象可能未定义错误解决方式，不能将类型“ XXXX | undefined “分配给类型{ xxxx }

摘要：报错方式对象可能未定义的处理方式优化使用 Optional Chaining: 这是处理对象属性可能为 undefined 的推荐方式，特别是在 TypeScript 中： let targetId = arrD.find((i) => i.name "tom")?.id; console.lo 阅读全文

posted @ 2024-07-09 00:11 joken1310 阅读(634) 评论(0) 推荐(0)

vue3 watch使用方式，如何监听reactive子属性 ref数据等

摘要：代码 <template> <div class="box">childB</div> </template> <script lang="ts" setup> import { reactive, watch, ref } from "vue"; const data1 = reactive({ 阅读全文

posted @ 2024-07-08 21:43 joken1310 阅读(120) 评论(0) 推荐(0)

vue3 defineEmits 使用

摘要：概论 defineEmits 用来定义子组件暴漏给父组件的自定义事件测试代码子组件 <template> <div class="box">child</div> </template> <script lang="ts" setup> interface Emit { (e: "emitfn1 阅读全文

posted @ 2024-07-08 21:18 joken1310 阅读(271) 评论(0) 推荐(0)

vite element plus 自动导入实现

摘要：自动导入vite配置需要安装： npm install -D unplugin-vue-components unplugin-auto-import vite.config.ts配置 // vite.config.ts import { defineConfig } from 'vite' im 阅读全文

posted @ 2024-07-08 00:07 joken1310 阅读(254) 评论(0) 推荐(0)

vue3 pinia使用方式

摘要：安装 # 使用 npm npm install pinia@next # 使用 yarn yarn add pinia@next 代码使用 store代码 import { ref, computed } from 'vue' import { defineStore } from 'pinia' 阅读全文

posted @ 2024-07-08 00:03 joken1310 阅读(59) 评论(0) 推荐(0)

js MutationObserver 使用

摘要： MutationObserver 是一个用于观察 DOM 树变化的接口，可以监测节点的添加、删除、属性变化等。以下是如何使用 MutationObserver 的基本示例： 1. 创建一个 MutationObserver 实例 // 创建一个观察者实例 const observer = new M 阅读全文

posted @ 2024-07-04 00:12 joken1310 阅读(325) 评论(0) 推荐(0)

js 把一个树形数据拍平

摘要：树形数据拍平实现代码 js实现函数 function tree(arr) { var newarr = []; arr.forEach(item => { if (item.childrens) { newarr.push(...tree(item.childrens)) delete item.c 阅读全文

posted @ 2024-07-03 23:59 joken1310 阅读(201) 评论(0) 推荐(0)

vue3 toref ref toRow unref等等使用和功能测试

摘要：代码测试 js代码 const rowData = reactive({ nameAbc: 'sdfsdf' }) console.log(rowData, "rowData") let rowDataValue = toRaw(rowData); console.log(rowDataValue, 阅读全文

posted @ 2024-07-03 23:20 joken1310 阅读(158) 评论(0) 推荐(0)

vscode setting.json 设置

摘要：常见配置参考 { "editor.fontSize": 20, // 编辑器字体大小 "terminal.integrated.fontSize": 18, // terminal 框的字体大小 "editor.tabSize": 2, // Tab 的大小 2个空格 "editor.formatO 阅读全文

posted @ 2024-07-02 22:45 joken1310 阅读(151) 评论(0) 推荐(0)

vscode typescript语法提示开关

摘要：设置里面搜索typescript:validate 既可打开或者关闭ts语法错误提示阅读全文

posted @ 2024-07-02 22:39 joken1310 阅读(265) 评论(0) 推荐(0)

tsconfig.json 配置

摘要： tsconfig.json "compilerOptions": { "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度 "tsBuildInfoFile": "./buildFile" 阅读全文

posted @ 2024-07-02 22:37 joken1310 阅读(136) 评论(0) 推荐(0)

ts vue3 getCurrentInstance 使用，$refs 调用方式

摘要：代码示例可以通过ref变量实现绑定$ref,或者getCurrentInstance来获取$refs /** * $ref 使用方式，变量名和组件的属性ref值一致 */ const hChildRef = ref() console.log(hChildRef, "hChildRef") con 阅读全文

posted @ 2024-07-01 22:32 joken1310 阅读(518) 评论(0) 推荐(1)

ts lodash 使用示例

摘要： debounce 防抖使用示例代码 import {debounce,DebouncedFunc} from "lodash" const myDebounce:DebouncedFunc<(a:string)=>{}>=debounce((a)=>{ console.log(a,"debounc 阅读全文

posted @ 2024-06-30 23:44 joken1310 阅读(174) 评论(0) 推荐(0)

ts 数组使用方式

摘要：概论代码测试 // 普通数组 let uuy:Array<number>; uuy=[23,23423,23423423] let uud:[] // let uua:array; //报错，不能这样声明数组 //从右往左是越子级内容 let uuv:number[][] //二维数组 uuv=[ 阅读全文

posted @ 2024-06-30 23:29 joken1310 阅读(109) 评论(0) 推荐(0)

ts Symbol 属性类型的特点

摘要：概论 Symbol 是一种用于创建唯一标识符的原始数据类型。 Symbol 通常用作对象属性的键，以避免属性名冲突。 Symbol.for() 可以在全局 Symbol 注册表中创建或查找 Symbol。内置 Symbol 用于定义语言级别的行为和协议。 Symbol 属性与普通属性的区别 Sym 阅读全文

posted @ 2024-06-30 23:21 joken1310 阅读(94) 评论(0) 推荐(0)

ts Object object {} 的区别

摘要：概论在 TypeScript 中，object 类型是一个非原始类型的标志，表示任何不是 number、string、boolean、symbol、null 或 undefined 的值。因此，object 类型本身不允许 null 或 undefined 的赋值。 Object 和 {} 类型等阅读全文

posted @ 2024-06-30 22:32 joken1310 阅读(215) 评论(0) 推荐(0)

vite 实现自动导入vue方法

摘要：安装 yarn add unplugin-auto-import vite配置 // vite.config.js export default defineConfig({ plugins: [ vue(), AutoImport({ // 自动导入 Vue 相关函数，如：ref, reactiv 阅读全文

posted @ 2024-06-25 23:00 joken1310 阅读(388) 评论(0) 推荐(0)

yarn 解决报错error An unexpected error occurred: "EPERM: operation not permitted

摘要：报错内容 error An unexpected error occurred: "EPERM: operation not permitted, unlink 'C:\\Users\\zhouc\\Desktop\\临时工作区\\vue3-ts\\vue3-init\\node_modules\\ 阅读全文

posted @ 2024-06-25 22:40 joken1310 阅读(409) 评论(0) 推荐(0)

ts type 和interface使用，联合类型、交叉类型使用

摘要：代码联合类型、交叉类型 //联合类型 type abcNewType = string | number; type abcNewType2 = "a" | "b" | "c"; interface a1 { a: string } interface a2 { b: string } //交叉类阅读全文

posted @ 2024-06-24 22:12 joken1310 阅读(223) 评论(0) 推荐(0)

ts 函数声明或者约束的方式

摘要：代码 interface 方式 interface myFn7 { (a: string, b: string): string; } let myFn7Demo: myFn7 = function (a: string, b: string): string { return a + b; } c 阅读全文

posted @ 2024-06-24 20:51 joken1310 阅读(76) 评论(0) 推荐(0)

ts declare使用,全局声明类型

摘要：概论 declare是声明全局类型的一种方式 declare 关键字用来告诉编译器，某个类型是存在的，可以在当前文件中使用。测试代码测试了type 和 function 声明代码 declare type myGlobalNumber=number; //注意这里的function 是个值，不是阅读全文

posted @ 2024-06-24 20:36 joken1310 阅读(553) 评论(0) 推荐(0)

vue3 provide inject使用

摘要：概论 provide 就是父类用来提供数据给子类或者孙子类 inject 就是子类或者孙子类用来获取父类或者祖先提供的provide数据代码 app.vue 祖先层 <template> <header> <img alt="Vue logo" class="logo" src="@/assets 阅读全文

posted @ 2024-06-23 22:41 joken1310 阅读(76) 评论(0) 推荐(0)

uni app 唤起其他app方式参考

摘要： uni代码实现 export function startAndroidActivity() { const { activety, pakeage } = externalApp;//pakeage 就是唤起app包名，activety 就是唤起的页面 let Intent = plus.andr 阅读全文

posted @ 2024-06-17 19:41 joken1310 阅读(552) 评论(0) 推荐(0)

uni app 安卓微信支付唤起实现

摘要：唤起微信支付核心代码 async weixinPayApp() { const self = this; let postApi = ''; if (this.checkWexin) { postApi = 'getOpenWeixinSignOrderInfo'; } else if (this. 阅读全文

posted @ 2024-06-17 19:27 joken1310 阅读(676) 评论(0) 推荐(0)

vscode使用tabnine ide插件，ai插件

摘要：安装安装上面这个插件后，会提示登录，可以使用github在线地址登录。代码提示代码指令使用侧边栏功能总结 tabnine vscode插件就是一款代码ai自动补全的插件，侧边栏还可以进行代码解释、修正等功能。阅读全文

posted @ 2024-06-17 16:23 joken1310 阅读(2368) 评论(0) 推荐(0)

qiankun 微前端使用方式

摘要：概论主要是有一个微前端的主权项目，实现对微服务的调用，类似iframe显示，父应用和子应用可以通过一些数据通信方式实现数据通信。代码微前端注册 import Vue from 'vue' import App from './App.vue' import { registerMicroApp 阅读全文

posted @ 2024-06-12 20:47 joken1310 阅读(179) 评论(0) 推荐(0)

typescript Omit Required Pick Partial等常用工具类型使用

摘要：示例代码 interface mybasic { one: string, two: string, three: number, four: string } console.log("myts-demo") // 排除参数属性 interface my1 extends Omit<mybasic 阅读全文

posted @ 2024-06-12 17:24 joken1310 阅读(70) 评论(0) 推荐(0)

vue3 ref 打印效果，ref 成分分析

摘要：下面分别是ref普通基本数据，下面是ref对象数据 _rowValue 是原始数据，_value 是操作数据也就是代理数据阅读全文

posted @ 2024-06-12 13:39 joken1310 阅读(73) 评论(0) 推荐(0)

vue3 dom ref 实现，子组件ref实现，defineExpose暴露子组件作用域

摘要：示例代码 App.vue <template> <header> <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> <div class="wrapper"> <HelloWorl 阅读全文

posted @ 2024-06-12 13:19 joken1310 阅读(159) 评论(0) 推荐(0)

Vue父子组件生命周期执行顺序

摘要：顺序执行顺序：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。在单一组件中，钩子的执行顺序是beforeCreate-> cr 阅读全文

posted @ 2024-06-07 16:41 joken1310 阅读(1022) 评论(0) 推荐(0)

vue 实现路由权限方式2，通过菜单角色，和用户角色是否重合实现匹配过滤权限

摘要：接口数据查看，业务方式查看给角色分配路由权限，然后路由信息上meta就会有哪些角色可以访问的数组。就是说一个路径，哪些角色可以访问，都在meta下的roles里面保存着接着用户角色分配前端代码实现核心代码通过用户信息上用户的角色数组和路由meta上的角色数组是否包含用户角色，来过滤用户是否阅读全文

posted @ 2024-06-05 21:55 joken1310 阅读(114) 评论(0) 推荐(0)

eladmin-mp 低代码生成后台页面和服务端java代码接口调研

摘要：概述总体这个项目前端使用vue2，后端使用spring boot git地址 https://github.com/elunez/eladmin-mp 预览地址 https://eladmin.vip/demo/#/sys-tools/generator 数据表配置低代码下载生成后的前端代码示阅读全文

posted @ 2024-06-05 18:33 joken1310 阅读(137) 评论(0) 推荐(0)

joken-前端工程师