摘要：
概论 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 阅读全文
摘要：
总论 tsx setup里面定义了return dom 元素，则options api的 render函数不生效 options 的render函数生效前提是setup里面不能return dom options 的render里面不能使用this，只能使用ctx，且setup得返回数据，ctx才能 阅读全文
摘要：
代码实现示例 子组件 实现双向绑定 <template> <div class="component-name"> <input type="text" :value="modelValue" @input="handleChange" /> </div> </template> <script s 阅读全文
摘要：
在 Vue 3 中，使用 PropType 可以定义复杂类型的 props。这对于确保组件 props 接收到的值符合预期的结构非常有用。下面是一些定义复杂类型的常见方法。 1. 定义对象类型 你可以使用 TypeScript 的接口或类型别名来定义复杂对象类型。 import { defineCo 阅读全文
摘要：
husky 安装使用 说明 husky 作用是创建git钩子，然后触发命令执行 安装 yarn add husky 初始化 npx husky init 会出现下面文件夹 commitlint 安装和使用 安装 commitlint yarn add commitlint 安装校验规则库 @comm 阅读全文
摘要：
lint-staged 安装和使用 说明 lint-staged 是一个插件，为了方便触发eslint，配置哪些文件触发eslint stylelint等 安装 yarn add lint-staged 创建 .lintstagedrc 在根目录 { "*.vue": "eslint", "*.ts 阅读全文
摘要：
window cmd 修改临时环境变量 set path=D:\node\node20 powershell 修改临时环境变量 直接一个新的环境变量，不需要关心旧的，那就： $env:path="D:\node\node20" 如果需要依赖旧的环境变量，那： $env:path+="D:\node\ 阅读全文
摘要：
Array.prototype.indexOf() const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']; console.log(beasts.indexOf('bison')); // Expected output: 1 // St 阅读全文
摘要：
官方说明 https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout 默认是auto 自动根据单元格内容自适应 fixed 表格和列的宽度是由 table 和 col 元素的宽度或第一行单元格的宽度来设置的。后续行中的单元格不会影响列的 阅读全文
摘要：
在 JavaScript 中，'10' < '1' 的结果为 false，这是因为 JavaScript 在进行比较操作时，会将字符串按照字符编码进行比较，而不是将它们转换为数字。 字符编码比较： 字符串 '10' 的第一个字符是 '1'，而字符串 '1' 的第一个字符也是 '1'。 由于两个字符串 阅读全文
摘要：
在 Vue 项目中，设置的 color 样式为 Hex 代码，但最终显示为 RGB 代码，这通常是由于以下几种情况导致： 1. CSS 预处理器 (Sass, Less) 的影响: 当你使用 Sass 或 Less 等 CSS 预处理器时，它们会将 Hex 颜色代码转换为 RGB 颜色代码，以便更好 阅读全文
摘要：
startswidth 用于检查字符串是否以指定的子字符串开头。 startsWith(searchString, position) searchString: 要搜索的子字符串。 position: 可选参数，指定搜索开始的位置（默认值为 0）。 用法： const str = "hello w 阅读全文
摘要：
padStart 和 padEnd 是 JavaScript 中字符串方法，用于在字符串的开头或结尾添加填充字符，直到达到指定的长度。 padStart(targetLength, padString) targetLength: 目标字符串长度。 padString: 用于填充的字符串。 用法： 阅读全文
摘要：
代码 function rgbToHex(rgb) { // 将 RGB 字符串分割成三个数字 const [r, g, b] = rgb.match(/\d+/g).map(Number); // 将每个数字转换为十六进制，并补零到两位 const hexR = r.toString(16).pa 阅读全文
摘要：
代码 <template> <div class="page-box"> <!-- colgroup 使用方式1 --> <table> <colgroup> <col span="2" style="width: 100px" /> <col style="width: 50px" /> <col 阅读全文
摘要：
代码 <template> <div> <span class="myColor">sdfsdfs</span> <br /> <span style="color: var(--my-color)">沙发斯蒂芬斯蒂芬</span> </div> </template> <script setup 阅读全文
摘要：
父组件 <template> <div class="page-box"> <!-- <child> <template v-slot:default="scope"> <div>slot</div> <div>{{ scope.data1 }}</div> </template> </child> 阅读全文
摘要：
文档 中文文档 https://github.com/exceljs/exceljs/blob/master/README_zh.md git 地址 https://github.com/exceljs/exceljs/tree/master 表格属性 批量设置表格列宽度 worksheet.col 阅读全文
摘要：
代码 onst worksheet = "Sheet1"; const tableHTML = "<tr><td>数据1</td><td>数据2</td></tr>"; const excelHTML = ` <html xmlns:o="urn:schemas-microsoft-com:offi 阅读全文
摘要：
在 Vue 3 项目中将包含图片的 HTML 表格转换为 Excel 文件，你可以使用 exceljs 库，并结合前端技术来处理图片和表格数据。下面是一个在 Vue 3 项目中实现的示例： 安装依赖 首先，确保你已经安装了 exceljs 库。你可以通过 npm 安装它： npm install e 阅读全文
摘要：
表格选定范围设置边框 当需要设置特定范围（如 A6 到 E19）的边框时，可以使用 XLSX.utils.decode_range 和 XLSX.utils.encode_cell 方法来处理。以下是如何使用 decode_range 解析范围并设置边框样式的示例： import XLSX from 阅读全文
摘要：
xlsx-js-style 是一个用于处理 Excel 文件的 JavaScript 库，基于 xlsx 库并添加了对样式的支持。通过 xlsx-js-style，你可以设置单元格的字体、背景、边框等样式。下面是如何使用 xlsx-js-style 库配置表格样式的步骤。 1. 安装库 首先，确保你 阅读全文
摘要：
.npmrc 文件用于配置 npm 的行为和设置。可以在项目根目录、用户目录（~/.npmrc），甚至全局配置目录下（/etc/npmrc）创建或编辑此文件来设置各种 npm 配置选项。 下面是一些常见的 .npmrc 配置选项及其用途： 设置注册表（registry）： registry=http 阅读全文
摘要：
关闭服务 我的电脑-管理-计划任务关闭window更新任务 阅读全文
摘要：
解决方式 设置哪些依赖需要预构建，避免运行中才构建依赖。 优化插件 https://www.npmjs.com/package/vite-plugin-optimize-persist 参考文章 https://blog.csdn.net/qq_51368103/article/details/13 阅读全文
摘要：
内核区别 最明显区别是及时编译和打包编译，开发编译速度上的区别。 配置区别 主要区别就是webpack有loader和plugins配置，vite直接是plugins为主体。 vite plugins 中配置编译器和插件： 其他json配置大同小异。 参考文章 https://zxuqian.cn/ 阅读全文
摘要：
概述 ref是通过一个中间对象RefImpl持有数据，并通过重写它的set和get方法实现数据劫持的，本质上依旧是通过Object.defineProperty 对RefImpl的value属性进行劫持。 reactive则是通过Proxy进行劫持的。Proxy无法对基本数据类型进行操作，进而导致r 阅读全文
摘要：
splice 是 JavaScript 数组对象的一个方法，用于增删数组中的元素。它的基本语法如下： array.splice(start, deleteCount, item1, item2, ...) start：指定开始修改的位置索引。 deleteCount：可选，指定要删除的元素个数。如果 阅读全文
摘要：
slice() 是 JavaScript 中用于提取数组的一部分或字符串的一部分的方法。slice() 不会修改原始数组或字符串，而是返回一个新数组或字符串。 对于数组 语法： array.slice(begin, end) begin：要提取的起始索引（包含）。如果省略，默认从索引 0 开始。 e 阅读全文
摘要：
如何使用 JavaScript 中的 reduce 函数来生成 SKU 属性的 SKU。SKU（Stock Keeping Unit）通常用于唯一标识商品或库存。 假设你有一个包含商品属性的数组，例如： const properties = [ { name: '颜色', value: '红色' } 阅读全文
摘要：
lodash get lodash 的 get 方法，它主要用于安全地访问对象的属性，避免因为中间属性不存在而导致的异常。这个方法可以按照指定的路径获取对象的属性值。比如，假设有一个对象 user，包含了 name 和 address 属性，你可以这样使用 get 方法： const _ = req 阅读全文