摘要：
import './assets/main.css'; import './assets/tailwind.css'; import './components/myts'; import { createApp } from 'vue'; import { createPinia } from ' 阅读全文
摘要：
// 1. 原型链继承 function Animal(name) { this.name = name; this.colors = ['black', 'white']; } Animal.prototype.getName = function () { return this.name; } 阅读全文
摘要：
enum既可以作为值使用，也可以作为类型使用。 枚举的打印结果是一个对象 <template> <div class='box'> <div class="enum-demo"> <h3>用户状态: {{ userStatusText }}</h3> <button @click="toggleUs 阅读全文
摘要：
<template> <div class='box'> <button @click="addItem">添加项目</button> <button @click="removeItem">删除项目</button> <TransitionGroup name="list" tag="ul" cl 阅读全文
摘要：
// 1. 普通函数中的this function normalFunction() { console.log('普通函数this指向:', this); } // 在非严格模式下，this指向window normalFunction(); // window // 严格模式下，this指向un 阅读全文
摘要：
MutationObserver 是一个强大的 API，用于监测 DOM 的变化。它可以监听节点的添加、删除、属性变化等操作，并在这些变化发生时执行指定的回调函数。以下是 MutationObserver 的基本用法和示例。 1. 创建 MutationObserver 首先，创建一个 Mutati 阅读全文
摘要：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width 阅读全文
摘要：
Shadow DOM 是 Web Components 的一部分，允许开发者将一个元素的内部结构和样式封装在一个独立的 DOM 中，从而避免与外部页面的其他样式和脚本发生冲突。以下是 Shadow DOM 的基本概念和用法： 1. 基础概念 封装性：Shadow DOM 提供了样式和内容的封装，只有 阅读全文
摘要：
拓展基础元素功能用法 is使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="wi 阅读全文
摘要：
测试代码 index.vue <template> <div class='box'> demo </div> </template> <script lang='ts' setup> import { ref, reactive, computed, onMounted, nextTick, Pr 阅读全文
摘要：
测试代码 <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, 阅读全文