joken1310 - 博客园

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 阅读(179) 评论(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 阅读(27) 评论(0) 推荐(0)

js MutationObserver 使用

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

posted @ 2024-07-04 00:12 joken1310 阅读(266) 评论(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 阅读(169) 评论(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 阅读(125) 评论(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 阅读(104) 评论(0) 推荐(0)

vscode typescript语法提示开关

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

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

tsconfig.json 配置

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

posted @ 2024-07-02 22:37 joken1310 阅读(89) 评论(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 阅读(429) 评论(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 阅读(121) 评论(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 阅读(44) 评论(0) 推荐(0)

ts Symbol 属性类型的特点

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

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

ts Object object {} 的区别

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

posted @ 2024-06-30 22:32 joken1310 阅读(176) 评论(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 阅读(326) 评论(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 阅读(338) 评论(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 阅读(168) 评论(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 阅读(18) 评论(0) 推荐(0)

ts declare使用,全局声明类型

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

posted @ 2024-06-24 20:36 joken1310 阅读(453) 评论(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 阅读(45) 评论(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 阅读(390) 评论(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 阅读(530) 评论(0) 推荐(0)

vscode使用tabnine ide插件，ai插件

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

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

qiankun 微前端使用方式

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

posted @ 2024-06-12 20:47 joken1310 阅读(120) 评论(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 阅读(30) 评论(0) 推荐(0)

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

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

posted @ 2024-06-12 13:39 joken1310 阅读(48) 评论(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 阅读(111) 评论(0) 推荐(0)

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

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

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

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

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

posted @ 2024-06-05 21:55 joken1310 阅读(60) 评论(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 阅读(81) 评论(0) 推荐(0)

vue2 升级vue3 方式，通过GoGoCode cli编译为vue3代码

摘要：参考文章 https://www.cnblogs.com/fadeache/p/17777581.html https://blog.csdn.net/Ed7zgeE9X/article/details/118662575 先安装GoGoCode npm install gogocode-cli - 阅读全文

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

vue后台用户路由权限和按钮权限实现原理

摘要：概论主要是通过一个唯一标识name或者id来过滤判断用户所处的角色是否有路由的权限或者按钮的权限一般路由都有一个一个name可以作为唯一标识一般按钮的话，可以自定义一个name作为标识业务逻辑后台通过选中路由或者按钮给角色，代表这个角色有数组中name[]的权限，用户或者部门再绑定角色，实阅读全文

posted @ 2024-06-04 22:03 joken1310 阅读(399) 评论(0) 推荐(0)

requestAnimationFrame使用介绍

摘要：概述 requestAnimationFrame 是根据帧数来执行回调函数的，就是屏幕一帧，那 requestAnimationFrame就会执行一次。一般屏幕是60帧，也就是一秒执行60次回调函数. 性能相对定时器settimeout好，因为定时器执行权限在同步任务微任务之后，会受到其他任务影响阅读全文

posted @ 2024-06-03 21:27 joken1310 阅读(1326) 评论(0) 推荐(0)

谷歌浏览器Lighthouse网页性能分析工具使用

摘要：需要使用谷歌浏览器的无痕模式要不然其他浏览器插件的脚本会影响页面的性能判断使用截图操作界面点击分析按钮开始分析生成分析建议部分：红色是有必要解决的性能提升建议红色建议分析：静态资源大小分析图点击下面按钮看到如下静态资源页面 lighthouse文档文档地址： https://d 阅读全文

posted @ 2024-06-03 20:53 joken1310 阅读(146) 评论(0) 推荐(0)

浏览器 performance 测试页面性能，查看阻塞代码

摘要：截图黄色指的是js执行紫色指的浏览器渲染一般只需要看 js 和 render 这2个就行，其他不用看，并从这2个中看出哪里的代码导致阻塞线程比较久。 main线程推测 main线程就是浏览器的主线程，主要负责浏览器的渲染和js代码执行，由此可见，浏览器用于渲染和js执行是一个线程，也就是主线程阅读全文

posted @ 2024-06-03 16:47 joken1310 阅读(102) 评论(0) 推荐(0)

浏览器重绘和回流重排，浏览器渲染（render）和绘制（painting）过程

摘要：概述重绘指的是元素重新绘制，一般性能消耗很小，不用在意，一般修改颜色或者虚拟隐藏都是重绘回流指的是修改元素宽高或者位置或者获取元素宽高位置等都是回流，性能消耗较大。重绘(repaint)：元素样式改变不影响布局回流(reflow)：也叫重排,当元素的尺寸、结构变化或触发某些属性时，浏览器会重阅读全文

posted @ 2024-06-03 15:51 joken1310 阅读(62) 评论(0) 推荐(0)

浏览器渲染引擎线程和js执行引擎线程的关系

摘要：总论 1、js一个tab就是一个进程，这个tab下会有多个线程，主要是主线程、渲染线程、js线程、网络线程资源池； 2、js引擎线程通过dom 之类的api和渲染线程沟通和控制渲染线程的一些页面显示； 3、实际上权威的说法是js引擎和渲染都是在一个线程上执行的，通过dom api之类的沟通，都是在主阅读全文

posted @ 2024-06-03 00:30 joken1310 阅读(323) 评论(0) 推荐(1)

浏览器事件循环 event loop，同步任务微任务宏任务

摘要：示意图理解事件执行队列执行的顺序首先是同步任务队列，其次是微任务队列、再其次是宏任务队列测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt 阅读全文

posted @ 2024-06-03 00:14 joken1310 阅读(17) 评论(0) 推荐(0)

vue3 使用element plus 方式

摘要：安装依赖 npm install element-plus --save 引入依赖 import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App fr 阅读全文

posted @ 2024-06-02 22:01 joken1310 阅读(143) 评论(0) 推荐(0)

vue3 项目初始化npm init vue@latest

摘要：使用命令初始化 npm init vue@latest 初始化成功后项目截图具备了store router，还有ts的功能等阅读全文

posted @ 2024-06-02 21:02 joken1310 阅读(148) 评论(0) 推荐(0)

js 一些常见新语法实践测试

摘要： es6新语法解构赋值和剩余参数优化 // 对象解构赋值和剩余参数 let abcvdf = { a: 'sdfsdf', b: "sdlfjslfdsf", c: "sdfksjlfdsd" }; // 使用解构赋值获取对象的属性 const { a, b, c } = abcvdf; conso 阅读全文

posted @ 2024-06-02 18:13 joken1310 阅读(14) 评论(0) 推荐(0)

joken-前端工程师