joken1310 - 博客园

nvm 下载和安装使用

摘要：下载地址： https://nvm.uihtm.com/ 或者github下载免安装版本，需要自己设置环境变量 https://github.com/nvm-sh/nvm/releases 环境变量设置创建环境变量名 path 设置环境变量经过上面的设置，nvm就成为了全局命令；node也成为阅读全文

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

vue3 ts 项目增加eslint插件实现命令行报错提示和vscode 报错提示,eslint 最新版本9.x多 2024年, prettier配置，前端规范化开发

摘要：快速开始安装eslint yarn add eslint -D 然后运行初始化eslint npx eslint --init 接着上面命令会自动生成一个新文件eslint.config.js eslint.config.js import globals from "globals"; impo 阅读全文

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

xlsx 前端插件导出 elment表格示例

摘要：安装 yarn add xlsx yarn add file-saver git文档：https://github.com/rockboom/SheetJS-docs-zh-CN npm地址：https://www.npmjs.com/package/xlsx 代码 <template> <div 阅读全文

posted @ 2024-07-21 12:15 joken1310 阅读(51) 评论(0) 推荐(0)

mockjs 使用案例

摘要：案例 import Mock, { Random } from "mockjs"; const resData = Mock.mock({ // key中min-max 代表随机生成5到10条数组数据 'list|5-10': [{ //value @id 可以随机生成id 'id': '@id', 阅读全文

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

vscode注释插件koroFileHeader使用, vue 文件注释插件

摘要：使用文档 https://github.com/OBKoro1/koro1FileHeader/wiki/安装和快速上手 git 地址 https://github.com/OBKoro1/koro1FileHeader 安装测试搜索setting.json 用户输入如下配置 // 头部注释 " 阅读全文

posted @ 2024-07-21 12:03 joken1310 阅读(284) 评论(0) 推荐(0)

vue3 使用component is 动态组件

摘要：使用方式父组件 <template> <div class="box"> <div>   <component :is="childT" 阅读全文

posted @ 2024-07-18 23:22 joken1310 阅读(884) 评论(2) 推荐(1)

ts vue3 定义props写法参考

摘要：写法1 export interface Config { arr1: Array<IObject>, obj1?: IObject } const props = defineProps({ title: { type: String, //必须的prop required: true, defa 阅读全文

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

vue3 watch watchEffect computed 使用差别

摘要：概论 watch 监听明确的数据 computed 监听数据并返回计算结果 watchEffect重视监听过程测试代码子组件 <template> <div class='box'> <div>props 监听测试</div> computed返回的内容的深度属性:{{ configTwo.ob 阅读全文

posted @ 2024-07-18 23:10 joken1310 阅读(58) 评论(0) 推荐(0)

vue 使用svg文件图片或者组件方式

摘要：代码 <template>  <div class="box"> <div>  <svg style="fill: red" xmlns="http://www.w3.org/2000/sv 阅读全文

posted @ 2024-07-16 22:01 joken1310 阅读(111) 评论(0) 推荐(0)

css 变量定义和使用方式

摘要：使用示例 <style lang="css" scoped> div,span{ --font-size-20:20px; } .color{ color:var(--color-red); font-size:var(--font-size-20); } </style> 另外也可以放在根节点: 阅读全文

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

vue3 widthDefaults 设置props默认值

摘要：测试代码 <template> <div class="box"> <div><i-ep-edit /></div> <div><i-ep-chat-dot-round /></div> <div><i-ep-close /></div> </div> </template> <script lan 阅读全文

posted @ 2024-07-16 20:50 joken1310 阅读(188) 评论(0) 推荐(0)

vite 实现全局自动导入iconify 图标库组件方式

摘要： iconify https://iconify.design/ Iconify支持100多个图标集，上万种图标可随意使用，你能想到的他都有，Iconify是SVG图标，不是字体图标，所以你也可以结合elementui-plus使用，最后感谢antfu大佬提供的vite插件。 vite.config. 阅读全文

posted @ 2024-07-15 21:02 joken1310 阅读(539) 评论(0) 推荐(0)

base64 数据转png本地图片保存，js实现

摘要：要将 base64 编码的图像数据保存为 PNG 文件到本地，可以借助 JavaScript 和浏览器的 File API。以下是一个简单的步骤和示例代码：步骤：解析 Base64 数据：将 Base64 编码的字符串解析为二进制数据。创建 Blob 对象：使用解析后的二进制数据创建一个 Bl 阅读全文

posted @ 2024-07-14 15:35 joken1310 阅读(3619) 评论(0) 推荐(0)

html svg如何写，如何自己写、实现

摘要： SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 格式标记语言，它可以被浏览器直接渲染。SVG 图形具有良好的可伸缩性和清晰度，非常适合用于图标、图表、地图等应用场景。以下是编写 SVG 的基本语法和示例： 1. SVG 基本结构 SVG 图形可以直接写阅读全文

posted @ 2024-07-14 15:26 joken1310 阅读(487) 评论(0) 推荐(0)

css 自定义属性

摘要： CSS 自定义属性（Custom Properties），也称为 CSS 变量，是 CSS 中一种能够保存和复用值的机制。它们与常规的 CSS 属性不同，因为它们可以在整个文档中定义一次，然后在需要的任何地方使用。定义和语法定义一个自定义属性使用两个连字符（--）开头，后面跟着属性名，类似于下面阅读全文

posted @ 2024-07-14 15:21 joken1310 阅读(141) 评论(0) 推荐(0)

es5 js函数有哪几种继承方式

摘要：在 ES5（ECMAScript 5）中，JavaScript 函数有几种继承方式，主要是通过原型链实现的。以下是常见的几种继承方式：原型链继承（Prototype Inheritance）：原理：通过将子类的原型对象设置为父类的实例来实现继承。特点：可以继承父类的实例方法和属性，但无法实现多阅读全文

posted @ 2024-07-14 15:16 joken1310 阅读(33) 评论(0) 推荐(0)

js class super的作用

摘要： js super作用在 JavaScript 中，super 关键字有两个主要用途：在子类的构造函数中调用父类的构造函数：使用 super() 来调用父类的构造函数，并继承父类的属性。在子类的方法中调用父类的方法：使用 super.methodName() 来调用父类的方法。示例解释使阅读全文

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

ts一个class有几种类型的属性

摘要：在 TypeScript 中，一个类（class）可以拥有以下几种类型的属性：实例属性（Instance properties）：这些属性是在类的构造函数中使用 this 关键字定义的。每个实例都有自己独立的实例属性。原型属性（Prototype properties）：这些属性是定义在类阅读全文

posted @ 2024-07-14 15:11 joken1310 阅读(226) 评论(0) 推荐(0)

js 一个函数有几种类型的属性

摘要：在 JavaScript 中，函数对象可以拥有多种类型的属性。主要可以分为以下几类：实例属性（Instance properties）：这些属性是在通过函数构造函数创建实例时绑定到实例上的属性。原型属性（Prototype properties）：这些属性是绑定到函数对象的原型上的属性。实例阅读全文

posted @ 2024-07-14 15:08 joken1310 阅读(38) 评论(0) 推荐(0)

ts bigint和number的区别

摘要：在 TypeScript（以及 JavaScript）中，bigint 和 number 是两种不同的数值类型，它们有一些显著的区别和特性。区别和特性表示范围： number：表示标准的双精度 64 位浮点数，可以表示的范围是从 -Number.MAX_SAFE_INTEGER 到 Number 阅读全文

posted @ 2024-07-14 13:48 joken1310 阅读(740) 评论(0) 推荐(0)

vite webpack tree shaking原理

摘要： Tree shaking 是一种优化 JavaScript 或 TypeScript 代码打包输出的技术，其主要目的是移除代码中未使用的部分（即死代码），从而减小最终生成的文件大小，提升应用程序的性能和加载速度。 Tree Shaking 的工作原理包括以下几个关键步骤：静态分析： Tree sh 阅读全文

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

js实现归并排序算法

摘要：在 JavaScript 中实现归并排序可以通过递归的方式完成。归并排序使用了“分而治之”的策略，将数组递归地分成两个子数组，分别进行排序，然后将它们合并成一个有序数组。以下是一个简单的归并排序实现： function mergeSort(arr) { // 如果数组只有一个元素或为空，则直接返回数阅读全文

posted @ 2024-07-14 10:02 joken1310 阅读(139) 评论(0) 推荐(0)

js实现快速排序算法

摘要：在JavaScript中实现快速排序可以通过递归方式来完成。下面是一个示例代码： function quickSort(arr) { // 如果数组为空或只有一个元素，则无需排序 if (arr.length <= 1) { return arr; } // 选择基准元素（这里选择中间元素） con 阅读全文

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

js 实现冒泡排序算法

摘要：冒泡排序是一种简单的排序算法。它重复地遍历待排序的列表，比较相邻的元素并交换位置，如果它们的顺序错误。这个过程会重复进行，直到整个列表排序完成。下面是用 JavaScript 实现的冒泡排序算法： function bubbleSort(arr) { let n = arr.length; let 阅读全文

posted @ 2024-07-13 20:52 joken1310 阅读(210) 评论(0) 推荐(0)

js 实现二分搜索算法

摘要：二分算法搜索数字二分搜索算法是一种在有序数组中查找目标值的高效方法。其时间复杂度为 (O(\log n))。下面是用 JavaScript 实现的二分搜索算法： function binarySearch(arr, target) { let left = 0; let right = arr.l 阅读全文

posted @ 2024-07-13 20:50 joken1310 阅读(123) 评论(0) 推荐(0)

`require.context` 参数和使用

摘要： require.context 是 Webpack 提供的一个方法，用于创建自己的（上下文）模块。这些模块可以动态导入符合特定条件的文件。在使用 require.context 时，你需要提供三个参数： directory: 要搜索的文件夹路径（字符串）。 useSubdirectories: 是否阅读全文

posted @ 2024-07-13 17:23 joken1310 阅读(267) 评论(0) 推荐(0)

ts vue3 自定义指令

摘要：当然，以下是将前面两个步骤汇总到一起的完整实现方案： 1. 定义指令首先，在 src/directives 文件夹中创建你的自定义指令文件。例如，v-focus.ts 和 v-color.ts： v-focus.ts： import { Directive } from 'vue'; const 阅读全文

posted @ 2024-07-13 17:22 joken1310 阅读(344) 评论(0) 推荐(0)

js 树形数组转一维数组，或一维数组转树形数组

摘要：树形数组转一维数组要将一棵树结构（包含 children 属性）拍平为一个一维数组，可以使用递归或迭代的方法。下面是两种常见的实现方式： 1. 使用递归 function flattenTree(tree) { let result = []; tree.forEach(node => { res 阅读全文

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

unplugin-vue-components 简介

摘要： unplugin-vue-components 简介 unplugin-vue-components 是一个用于自动导入 Vue 组件的插件，能够在 Vue 3 项目中简化组件的使用，无需手动导入每个组件。它支持按需加载，提高开发效率。安装使用 npm 或 yarn 安装插件： npm inst 阅读全文

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

unplugin-auto-import 简介

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

posted @ 2024-07-13 16:21 joken1310 阅读(770) 评论(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 阅读(558) 评论(0) 推荐(0)

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

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

posted @ 2024-07-10 21:50 joken1310 阅读(191) 评论(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 阅读(792) 评论(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 阅读(45) 评论(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 阅读(680) 评论(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 阅读(133) 评论(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 阅读(13) 评论(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 阅读(477) 评论(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 阅读(86) 评论(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 阅读(215) 评论(0) 推荐(0)

joken-前端工程师