qq_39460057的博客

原创 使用命令快速删除项目中的node_modules

2、rf: rf指令由-r和-f两个指令合写而成，-r表示递归地处理文件，即处理该目录及其所有子目录下符合条件的文件；直接调用了系统自带的命令行工具，无需额外安装任何第三方库或工具。同时，这些命令经过优化，能够快速处理大量文件，从而实现快速删除。4、rd=Remove Directory 移除目录。6、/q 安静模式。删除全局通配符时，不要求确认。3、rm -rf：删除当前目录下的所有文件。5、/s 从所有子目录删除指定文件。如果是Windows环境下，执行。1、rm=Remove 移除。

原创 创建React应用的2种方式

原创 CSS常用类名汇总（参考elemen/iview等UI组件）

【代码】CSS常用类名汇总（参考elemen/iview等UI组件）

原创 JS: 使用new worker 创建线程来处理倒时计

需求： 3分钟内收不到消息就默认超时，收到数据就重新计时。

原创 google chrome浏览器调试技巧（未完待续）

1、元素中，展开所有子节点，“Alt + 单击”一次展开所有子节点。copy(内容)，就复制到剪贴板了，可以粘贴到想要的任何地方。2、复制任何对象到剪切板。

原创 Javascript语法 ES6-ES12新特性（TODO）

【代码】Javascript语法 ES6-ES12新特性（TODO）

原创 typescript基础知识：接口

如果多个类有一些共有的属性，那么就能把共有属性提取成为接口interface, 用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。用于描述对象的结构和行为的抽象类型。但不提供具体的实现，可以被继承（接口和类一样，也可以被继承），可以检查对象的类型、也可以被多个类实现。一个接口可以继承多个接口，创建出多个接口的合成接口。一个类只能继承自另一个类，但可以实际多个接口,多个接口用逗号隔开。接口中的属性不是必需的，非必需属性名后面加个"?// 2、被另外的接口继承。

原创 js项目生产环境中移除 console

在babel.config.js文件中加入配置。在webpack.config.js文件中。webpack 构建的项目中安装使用。

原创 JS常用插件整理

2、chart.js: 和echarts一样，是基于js的数据可视化图表库，体积比echarts小很多，图表类型和样式没有echarts丰富，可用于简单的图表展示。7、countUp.js：创建有趣的数字动画效果插件（比如在规定时间内让某个数字变化到另一个数字）。1、axios:基于 promise 的 http库, 用于和后端进行数据交互。5、dayjs: 和momentjs功能相同，体积比momentjs小。4、moment: 时间处理库，用于处理日期和时间相关的任务。

原创 macOS笔记

保存command+s, 复制：command+c, 粘贴 command+v，command + R: 恢复。强制退出应用：Command+Option+Esc（第三方键盘是Windows+Alt+Esc）使用Homebrew来安装，Homebrew是macOS平台下的软件包管理工具，就像npm。2、MAC中拔出U盘：在桌面找到U盘，点击右键显示“推出***”，点击退出。Command + 逗号：打开当前应用程序的偏好设置。再用Homebrew安装git。5、macOS中安装git。

原创 MacOS镜像文件资源、MacOS系统抹掉重装步骤

1、准备一台电脑，下载macOS的镜像文件， 如果windows系统，下载IOS文件，如果是 macOS系统，下载dmg文件（.iso镜像是针对Windows操作系统的安装文件格式，Mac用户需要下载.dmg格式的文件，这是Mac操作系统的安装文件格式）。4、打开balenaEtcher，点击“从文件中烧录”，选择文件镜像文件macOS-Catalina.iso，点击“选择目标磁盘”(选择已经格式化好的U盘)，点击“现在烧录”，烧录结束后会自动验证，验证完成后拔出U盘。（记得先备份好U盘中重要的数据）。

原创 vue3:内置组件

【代码】vue3:内置组件。

原创 移动端判断横竖屏状态及监听变化

2、监听横竖屏切换事件。

原创 css常用定位(全屏、上下左右居中、底部边框)

【代码】css常用定位(全屏、上下左右居中、底部边框)

原创 vue-router基础(安装配置)

配置：创建router.js。

原创 vue-router进阶(路由元信息)

属性，记录路由携带的信息（比如：每给个路由增加个title， 或者部分路由的访问权限等）。一般是在router.js 或者 main.js中，

原创 vue3深入组件: 插槽slot

元素是一个插槽出口，标示了父元素提供的插槽内容将在哪里被渲染。插槽内容可以是文本、元素甚至组件。（一句话总结就是：子组件提供位置，父组件提示内容）。匿名插槽指的是父组件中未指定名称的插槽，匿名插槽最多只能有一个。匿名插槽适用于只插入一个内容的时候。元素来定义具名插槽的位置，并在需要时插入具名插槽的内容。插槽就是子组件提供一个占位符，指定父组件传递的内容在子组件具体哪个地方渲染。具名插槽指父组件向子组件传递特定名称的内容，子组件可以选择性地使用这些内容。指令将内容传递给子组件。

原创 vue3+vite+electron开发桌面端应用流程

【代码】vue3+vite+electron开发桌面端应用流程。

原创 vue3深入组件: 依赖注入(provide 和 inject)

原创 vue3基础：模板引用(ref属性的使用)

的组件是默认私有的：一个父组件无法访问到一个使用了。

原创 vue3深入组件：props

2、props遵循单向绑定原则，props因父组件中的更新而变化，在子组件中，数据是只读的，不能更改。1、Props 名字格式应该使用小驼峰，在组件中使用kebab-case（小写短横线）；1、组件需要声明它接收的props,vue才知道外部传入了哪些参数。的单文件组件中，使用defineProps来声明组件接收的参数。4、props声明时可校验类型,设置默认值。的组件中，可以使用props 选项来声明。

原创 vue3:使用vue-i18n实现国际化

在src/i18n/index.js中。在src/i18n/en.js中。在src/i18n/zh.js中。

原创 vue3:全局API(应用实例)

应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例。如果只传递一个名字，则会返回用该名字注册的组件 (如果存在的话)。如果同时传递一个名字和一个指令定义，则注册一个全局指令；如果只传递一个名字，则会返回用该名字注册的指令 (如果存在的话)。每个应用实例都会暴露一个 config 对象，其中包含了对这个应用的配置设定。一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。提供一个值，可以在应用中的所有后代组件中注入使用。卸载一个已挂载的应用实例。

原创 vue3:组合式API工具函数

检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。只读对象的属性可以更改，但他们不能通过传入的对象直接赋值。将值、refs 或 getters 规范化为值。

原创 常见操作系统

4、windows 11：Windows 10是微软公司研发的跨平台操作系统，应用于计算机和平板电脑等设备，于2021年发布。3、windows 10：Windows 10是微软公司研发的跨平台操作系统，应用于计算机和平板电脑等设备，于2015年发布。2、ios: iOS是由苹果公司开发的移动操作系统，iOS只能在苹果公司的设备上运行，如iPhone，iPad和iPod Touch等。5、macOS: macOS是苹果公司开发的电脑操作系统，一般情况下在普通PC上无法安装，只在mac电脑上安装。

原创 vue3:组合式API生命周期

这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的，因为多个状态变更可以在同一个渲染周期中批量执行（考虑到性能因素）。当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。在这个钩子中更改状态也是安全的。注册一个回调函数，若组件实例是 缓存树的一部分，当组件被插入到 DOM 中时调用。注册一个回调函数，若组件实例是 缓存树的一部分，当组件从 DOM 中被移除时调用。注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

原创 Vue3: 全局API（通用）

当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。在Vue使用组件时，对于组件数据的更改不会立即反应在DOM中，因为Vue是异步更新DOM的。所以需要使用nextTick()或者$nextTick()函数来更新DOM。nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。所以在修改数据之后立即使用这个方法，可以获取更新后的Dom。暴露当前所使用的 Vue 版本，类型string。

原创 vue3深入组件：组件事件

像组件与 prop 一样，事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。的额外参数都会被直接传向监听器。触发后，监听器函数将会收到这三个参数值。会返回一个相同作用的函数供我们使用。方法在组件实例上也同样以。父组件监听事件并接收参数。Tips: 所有传入。

原创 vue3基础: v-if 和 v-show的区别

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

原创 vue3基础：计算属性

计算属性来描述依赖响应式状态的复杂逻辑。模板中最好不好写复杂的逻辑计算，否则会让模板变得臃肿，难以维护。

原创 vue3深入组件： 组件注册

局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。但是，PascalCase 的标签名在 DOM 内模板中是不可用的。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。请注意：局部注册的组件在后代组件中并不可用。为名注册的组件，在模板中可以通过。

原创 vue3基础：单文件组件介绍

Vue 的单文件组件 (即 *.vue 文件，简称 SFC，全称是single file component) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。</style>Vue 的单文件组件是 HTML、CSS 和 JavaScript 三种元素的自然延伸。<template><script>和<style>

原创 vue3+vite 搭建项目及常见问题

原因：使用vite创建vue3.0项目的时候，vite不会自动安装相关的依赖，需要我们手动去安装，连node_modules文件夹都没有。vite不像 node 或 vue cli，会自动帮助我们执行 npm i (install) 命令去下载相关依赖，需要我们手动下载；运行项目时，报错：‘vite’ 不是内部或外部命令，也不是可运行的程序。在vite.config.js中配置。在vite.config.js中配置。在vite.config.js中配置。在vite.config.js中。

原创 css前端主题切换方案(三种)

【代码】css前端主题切换方案(三种)

原创 javascript代码规范

注释单独一行，不要在代码后的同一行内加注释,将单行注释放在需要注释的行的上方新行 ( * )。公共组件维护者需要在文件头部加上注释说明： (*)。大的模块注释方法 ( _ )。*作者姓名、联系方式。

原创 HTML代码规范

注册：register.html。主页面: index.html。用户中心：user.html。首页: home.html。登录：login.html。角色：role.html。

原创 CSS & LESS & SCSS代码规范

主要 master.css, style.css, main.css。布局，版面 layout.css。专栏 columns.css。专栏 columns.css。布局 layout.css。主题 themes.css。附加 attach.css。模块 module.css。基本共用 base.css。主题 themes.css。打印 print.css。表单 forms.css。文字 font.css。补丁 mend.css。

原创 Scss和less预处理器的使用对比

Scss和less 均支持 CSS 多行注释 /* */和单行注释 //，多行注释会 被完整输出到编译后的 CSS 文件中，而单行注释编译后则不显示；编译环境不一样: Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器。将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用（less3.5后）。Scss和Less 中的作用域与 CSS 中的作用域非常类似。Scss扩展名省略(.scss和.sass)

原创 css/less/scss代码注意事项

important具有最高的样式优先级，它会覆盖内联样式和所有的选择器样式。注意：如果非要使用，尽量不要在全局css中使用，并且增加注释来解释。1.类名使用小写字母，以中划线分割;能不用 id选择器 就不要 使用id选择器，避免不是禁止。2.less/scss中的函数、混合采用驼峰命名;尽量使用直接子选择器，否则，有时会造成性能损耗。3. class 的命名不要使用 标签名,如。全部采用小写的方式以中划线命名。（不推荐）（后代选择器）1.全部采用小写的方式。1.全部采用小写的方式。（推荐）（子选择器）

原创 JS中的BOM介绍(未完待续)

BOM, 全称Browser Object Model，指的是浏览器对象模型，是JS的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM。各内置对象之间按照某种层次组织起来的模型统称为Bom浏览器对象模型。