摘要：
测试代码 <template> <div class='box'> demo <el-button type="primary" @click="exportImageToExcel">test</el-button> </div> </template> <script lang='ts' set 阅读全文
摘要：
TypeScript 中的函数与类重载 在 TypeScript 中，函数和类的重载允许我们根据不同的参数类型和数量来调用相同的函数或构造函数。这种特性使得代码更加灵活和可读。本文将详细介绍如何在 TypeScript 中实现函数和类的重载。 1. 普通函数重载 示例 以下是一个普通函数重载的简单示 阅读全文
摘要：
测试代码 const obj1 = { name: "Alice", age: 25 } const obj2 = Object.create(obj1) console.log(obj2, "sdjlfsjldsfjlkf") console.log(obj1.name, "sdfsdfsfsdf 阅读全文
摘要：
在 JavaScript 中，只有函数（特别是构造函数）才有 prototype 属性。这个属性用于定义所有实例共享的方法和属性。 详细说明 函数的 prototype 属性： 每个函数都有一个 prototype 属性，默认为一个空对象。 当使用 new 关键字调用构造函数时，新创建的对象会自动将 阅读全文
摘要：
下面是 TypeScript 版本的 myNew 函数实现： function myNew<T>(constructor: new (...args: any[]) => T, ...args: any[]): T { // 创建一个新对象，原型指向构造函数的 prototype const obj 阅读全文
摘要：
TypeScript 中的类既可以作为值，也可以作为类型。让我们分别详细探讨这两个方面。 1. 类作为值 在 TypeScript 和 JavaScript 中，类实际上是构造函数的特殊形式，因此可以像其他函数一样使用。你可以将类赋值给变量、作为参数传递给函数，或者在其他上下文中使用它。 示例 cl 阅读全文
摘要：
在 TypeScript 中，构造函数类型和构造函数返回值类型是两个不同的概念，它们分别用于描述构造函数的行为和结果。下面详细解释这两者的区别。 1. 构造函数类型 构造函数类型描述的是一个类的构造函数的签名，包括构造函数的参数类型和返回类型。它定义了如何通过 new 关键字创建一个实例。 示例 c 阅读全文
摘要：
代码 子组件 import { defineComponent, PropType } from 'vue'; const MyComponent = defineComponent({ name: 'MyComponent', props: { title: { type: String as P 阅读全文
摘要：
出错代码部分 <script lang="tsx"> import { defineComponent } from 'vue'; import MyComponent from './components/childAbc'; const App = defineComponent({ name: 阅读全文
摘要：
在 Vue 3 中，useAttrs 是一个组合式 API 函数，允许你访问组件的所有属性（props）和传递给组件的非 prop 特性。这在自定义组件时非常有用，尤其是当你想要将这些属性传递给子组件或原生 HTML 元素时。 使用 useAttrs 的基本步骤 引入 useAttrs：从 Vue 阅读全文
摘要：
要移除 Yorkie 设置的 Git hooks，你可以按照以下步骤进行操作： 1. 手动删除 Git Hooks Yorkie 将 Git hooks 安装在项目的 .git/hooks 目录中。你可以手动删除这些 hooks 文件： 打开终端，导航到你的项目目录。 进入 .git/hooks 目 阅读全文
摘要：
以下是使用 Yorkie 的详细教程，包括如何在 npm postinstall 中自动运行 npx yorkie。 使用 Yorkie 的步骤 1. 安装 Yorkie 首先，在你的项目中安装 Yorkie： npm install --save-dev yorkie 2. 配置 package. 阅读全文
摘要：
npm 生命周期是指在执行 npm 命令时，特定阶段会自动触发的脚本。这些生命周期脚本可以帮助开发者在不同的安装和管理过程中的特定时刻执行自定义命令。 主要生命周期脚本 以下是常见的 npm 生命周期脚本： preinstall： 在安装依赖之前执行。 install： 在安装依赖时执行。 post 阅读全文
摘要：
步骤 先代码行点击断点 点击调试按钮 添加调试的项目配置 接着配置 写入代码运行的端口，和项目名称 开始运行断点调试 接着自动会跳出浏览器 vscode中断点的代码生效了，可以查看数据信息 停止断点 关闭浏览器即可 阅读全文
摘要：
代码测试 <template> <div class='box'> {{ demo[0]?.a?.b?.c }} </div> </template> <script lang='ts' setup> import { ref, reactive, computed, onMounted, next 阅读全文
摘要：
代码测试 源对象改变也会改变ref内存数据 <template> <div class='box'> {{ abcDemo?.a?.b?.c }} <button @click="changeAbc">Change ABC</button> <div> {{ abdDemo?.a?.b?.c }} 阅读全文
摘要：
<template> <div class='box'> {{ abc[0] }} </div> </template> <script lang='ts' setup> import { ref, reactive, computed, onMounted, nextTick, PropType 阅读全文
摘要：
代码测试 <template> <div class='box'> demo:{{ d }} <div> <child :abc='abc' /> </div> </div> </template> <script lang='ts' setup> import { ref, reactive, c 阅读全文
摘要：
<template> <div class='box'> <template v-for="(ditem, dindex) in data1" :key="dindex"> <el-select v-model="ditem.value" clearable filterable> <el-opti 阅读全文
摘要：
要将 locales/en.json 拆分为多个文件，并自动读取这些语言包，可以采用与中文语言包相似的方式。以下是具体步骤： 1. 创建语言包文件夹和子文件 首先，在 locales 文件夹中创建一个 en 文件夹，并在其中添加多个 JSON 文件。例如： src/ ├── locales/ │ ├ 阅读全文
摘要：
代码 store import { defineStore } from "pinia"; import { ref } from "vue"; export const useMyTestStore = defineStore('mytestStore', () => { // state con 阅读全文
摘要：
Vite 和 Webpack 是现代前端开发中常用的构建工具，但它们在设计理念和使用体验上有所不同。以下是对它们的一些对比： 1. 构建速度 Vite: 使用原生 ES 模块导入，开发时通过浏览器直接加载模块，启动速度快，热更新即时。 Webpack: 以打包为中心，构建速度相对较慢，尤其在大型项目 阅读全文
摘要：
要确保 JavaScript 代码能够成功进行树摇（Tree Shaking），你可以遵循以下几个实践： 1. 使用 ES6 模块 树摇主要依赖于 ES6 的模块语法 (import 和 export)。确保你的代码使用这种模块系统，而不是 CommonJS 的 require 和 module.e 阅读全文
摘要：
Rollup 和 Webpack 之间的差异在于它们的打包方式和优化策略，这导致了 Rollup 通常能生成更小的包体积。以下是一些主要原因： 1. 树摇（Tree Shaking） Rollup 对 ES6 模块的静态结构分析非常出色，能够有效地删除未使用的代码。这一过程被称为树摇（Tree Sh 阅读全文
摘要：
在 Vue 3 和 TypeScript 项目中使用 i18n（国际化）可以通过 vue-i18n 插件来实现。 步骤 1：安装依赖 首先，你需要安装 vue-i18n： npm install vue-i18n 步骤 2：创建语言文件 在项目中创建一个文件夹（如 src/i18n），并在其中创建语 阅读全文
摘要：
在 Vite 中，你可以通过使用 Rollup 插件来自动去除 console.log 语句。一个常用的插件是 rollup-plugin-terser，它能够压缩和优化代码，包括去除调试语句。 以下是如何在 Vite 中配置该插件的步骤： 安装插件： 首先，你需要安装 terser 和 rollu 阅读全文
摘要：
<link rel="modulepreload"> 和 <link rel="preload"> 的功能在某种程度上是相似的，主要都是用于优化资源的加载性能，但它们之间有一些关键区别： 相似之处 预加载资源： 两者都允许浏览器提前下载指定的资源，以减少后续使用时的加载延迟。 非阻塞加载： 都不会阻 阅读全文
摘要：
代码实现 <template> <div> <el-button type="primary" size="default" @click="upDown('up')">up</el-button> <el-button type="primary" size="default" @click="u 阅读全文
摘要：
1. @ts-ignore 用途：忽略下一行代码中的所有类型错误。 示例： // @ts-ignore const value: string = 123; // 不会报错 注意：使用此指令时不需要提供描述，然而，滥用可能会隐藏潜在的错误。 2. @ts-nocheck 用途：在整个文件中禁用 Ty 阅读全文
摘要：
第一种方式 设置里面搜索 git verify，然后打钩 然后git提交这里就有不校验的按钮了 第二种方式 直接setting.json 里添加配置"git.allowNoVerifyCommit": true, 阅读全文
摘要：
概论 vue3 的props是深度响应的，深度数据改变都能监听到，并改变模板 3.2左右的版本解构props子对象不能响应式 若遇到props子对象不能响应式监听，一般就是改变之前的数据和改变之后的数据没产生变化，所以没发生响应式 代码 父组件 <template> <div class='box' 阅读全文
摘要：
child.tsx import { defineComponent } from 'vue'; // 响应式数据需要放在函数外面，或者放在setup里面 const data1 = ref(123); function myComponent() { const data2 = ref(34); 阅读全文
摘要：
说明 主要用来让vite启动的时候预编译一些包，而不是运行网页的时候才编译，这样可以加快网页首次的加载速度，但是可能vite首次启动会比较慢点 配置示例 optimizeDeps: { include: [ 'vue', 'vue-router', 'vue-types', 'element-plu 阅读全文
摘要：
.js 文件和 .mjs 文件之间的主要区别在于模块系统的使用： 1. 模块类型 .js 文件： 默认使用 CommonJS 模块系统（尤其在 Node.js 环境中）。 可以使用 require() 导入模块和 module.exports 导出模块。 .mjs 文件： 明确表示使用 ES6 模块 阅读全文
摘要：
去掉子组件多余的空参数即可，比如props:{} 阅读全文
摘要：
代码 使用方组件 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; import useMyHooks from './hooks/useMyHooks'; export default defineC 阅读全文
摘要：
tsx 实现slot插槽 父组件 <template> <div class="component-name"> <child> <template #default="scope"> <div>default</div> <div>{{ scope.a }}</div> </template> < 阅读全文
摘要：
参考代码 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; import type { Reactive, Ref } from 'vue'; import styles from '../scss/c 阅读全文
摘要：
tsx 子组件、tsx 使用class 方式 tsx 组件代码 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; import type { Reactive, Ref } from 'vue'; im 阅读全文
摘要：
emits 定义结构和使用 子组件 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; export default defineComponent({ name: 'PageF', props: { r 阅读全文