hap1994的博客

原创 vue-cli2 与vue-cli3，vue2与vue3 初始化项目，本地vue项目，详细解析区别（2024-04-19）

其实是通过 "@vue/cli-service": "^4.0.0",去管理我们的依赖的，在 “node_modules” => “@vue” => cli-service => package.json，这里面就是隐藏的依赖。很显然是放在package.json文件下的，方便我们去管理自己的依赖。那默认的那些依赖存在哪里呢？vue-cli2与vue-cli3的区别 (vue3,vue2的区别）因为vue-cli3把配置文件都给隐藏了，隐藏到哪里了?在隐藏的文件夹直接修改。

原创 npm最新淘宝镜像站已经更新registry（2024-04-19）

淘宝镜像的淘宝官方提供的方法（最新的源配置）镜像站网址：npmmirror 镜像站。

原创 ES6，js，javascript，编程风格(2024-04-18)

因为 rest 运算符显式表明你想要获取参数，而且 arguments 是一个类似数组的对象，而 rest 运算符可以提供一个真正的数组。所有配置项都应该集中在一个对象，放在最后一个参数，布尔值最好不要直接作为参数，因为代码语义会很差，也不利于将来增加其他配置项。声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。如果模块默认输出一个对象，对象名的首字母应该大写，表示这是一个配置值对象。另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。

原创 webstorm 设置大括号、问号、冒号、if 或for条件 、+-*/ 运算符等两侧的空格（2024-04-18）

import {Component} from 'react' 改为 的 import { Component } from 'react'我这里演示javascript 【Editor-Code Style-JavaScript-Spaces】在setting设置里面。{ }内部两侧都加空格。

原创 es6编程风格

声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。，因为两者语义相同，而且。命令存在变量提升效用，

原创 vue实现文字转语音的组件，class类封装，实现项目介绍文字播放，不需安装任何包和插件（2024-04-17）

【代码】vue实现文字转语音的组件，class类封装，实现项目介绍文字播放（2024-04-17）

原创 vue 常用的日历排班，带农历显示组件（2024-04-16）

vue 日历子组件calendar.vue。显示当前月日历组件，里面带农历或节日显示。后面可以丰富一些国家法定节假期的业务需求。js-calendar.js 文件。

原创 el-select选择框选择无反应，值已经更新，但是页面没有显示变化（2024-04-16）

点了选择框【休假】，但是页面并没有选中，是因为页面响应数据没有更新。解决方案，使用强更新机制强行更新页面视图。改完之后就可以选择了。

原创 js纯前端实现语音播报，朗读功能（2024-04-15）

分别是【window.speechSynthesis】【SpeechSynthesisUtterance】将函数拷贝到项目中，执行函数即可实现。实现语音播报要有两个原生API。

原创 运行vue项目，控制台一直报错freeze ，删除node_modules缓存.cache，再npm 重启项目即可（2024-04-15）

【代码】运行vue项目，控制台一直报错freeze ，删除node_modules缓存.cache，再npm 重启项目即可（2024-04-15）

原创 es6对于变量的解构赋值（数组解构，对象解构，字符串解构，函数解构等）解析（2024-04-12）

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。本质上叫模型匹配，等号两边的模型相同就可以对应上。1.2 数组解构的默认值解构赋值允许指定默认值注意，ES6 内部使用严格相等运算符（），判断一个位置是否有值。所以，只有当一个数组成员严格等于，默认值才会生效。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。对象的解构赋值，可以很方便

原创 es6关于Symbol 独一无二的值（2024-04-12）

比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。，表示独一无二的值。有了参数以后，就等于为它们加上了描述，输出的时候就能够分清，到底是哪一个值。

原创 es6对于Promise 对象的详解（2024-04-11）

1、Promise 含义Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。2、Promise对象的特点（1）对象的状态不受外界影响。Promisepending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

原创 ES6 关于Class类的继承 extends（2024-04-10）

对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。上面示例中，子类 Bar 新建实例时，会输出 "父类构造函数"，"子类构造函数"。时，会执行一次父类构造函数（并在调用super()后才能使用子类的this，否则会报错）注意，这意味着新建子类实例时，父类的构造函数必定会先运行一次。在这里表示父类的构造函数，用来新建一个父类的实例对象。虽然代表了父类的构造函数，但是因为返回的是子类的。代表子类的实例，而不是父类的实例，这里的。

原创 ES6对于Class类的基本语法详解（2024-04-10）

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。JavaScript 语言中，生成实例对象的传统方法是通过构造函数。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

原创 本地开发nginx代理服务器（2024-04-10）

这是 Nginx 服务器作为 WEB 服务器的主要功能之一，客户端向服务器发送请求时，会首先经过 Nginx 服务器，由服务器将请求分发到相应的 WEB 服务器。正向代理是代理客户端，而反向代理则是代理服务器，Nginx 在提供反向代理服务方面，通过使用正则表达式进行相关配置，采取不同的转发策略，配置相当灵活，而且在配置后端转发请求时，完全不用关心网络环境如何，可以指定任意的IP地址和端口号，或其他类型的连接、请求等。在性能上，Nginx占用很少的系统资源，能支持更多的并发连接，达到更高的访问效率；

原创 登陆qq，经常收到qq游戏中心的推送信息，关闭推送信息

手动关闭推送信息的步骤：1.点开左侧游戏中心2、在打开界面，点击左下角自己的头像3、打开设置中心，关闭所有的推送4、完成关闭，不会推送了

原创 超图SuperMap-Cesium，地形图层，可以渲染一个或多个地形（地形可缓存DEM,TIN方式），webGL代码开发（2024-04-08）

2、缓存文件类型DEM，DEM的地形sct可以加多个，按照先渲染的排在前面。备注：不能用生产场景的方式合并数据，要一个个直接导出就可以。1、缓存文件类型TIN格式，TIN的地形sct只能加一个。

原创 vue 组件clipboard拷贝文本复制粘贴，简单好用（2024-04-02）

绑定值就是期望要拷贝的值。

原创 超图SuperMap-Cesium，影像图层，可以渲染多个影像多层并设定图层的顺序，webGL代码开发（2024-04-02）

【代码】超图SuperMap-Cesium，影像图层，可以渲染多个影像多层并设定图层的顺序。

原创 超图SuperMap-Cesium，影像图层白色背景，去掉变成透明色的方法，webGL代码开发（2024-04-01）

影像图层切得格式是webp类型，设置的背景色是白色，前端用代码直接处理容差变成透明色。url:'iserver/services/url',name: `影像`,处理之后，白色背景变成透明色。

原创 win10网络显示地球图标，但是又能上网，搞了2天终于解决了(2024-03-26)

尝试了很多种办法：网络网卡驱动，修改注册表，新加reg文件运行修改注册表，在注册表编辑器中修改dns的配置，改为阿里配置等都不成功。3、打开配置框，点击【高级】页签，找到【IPv4硬件验和】，将右边的值选择【关闭】，点击【确定】生效，大概3秒钟就正常显示电脑图标了。2、点开在使用的以太网，右键打开【属性】，找到【配置】按钮点击打开。在其他地方无意中看到一个法子，几秒钟搞定了，成功如下截图。1、把虚拟网络禁用，不需要打开。5、完成了，网络显示电脑图标。

原创 chrome 控制台network请求过多，过滤一些不需要的接口

控制台network中查看接口调用信息，会显示很多的css和js文件，过滤掉一些不需要的文件只显示我们需要的接口。在filter输入框中输入-.s3mb -.css -.json （中间是空格）即可过滤掉 s3mb，js，css后缀文件。

原创 vue 组件传递参数 v-bind=“$attrs“、v-on=“$listeners“

A组件中的值需要直接传给C，那么就需要在B中设置v-bind="$attrs"，然后在C组件中用prop接收，此时就直接把值传给了C组件。例如有 父组件A，子组件B，孙组件C 三个组件。如有 父组件A，子组件B，孙组件C 三个组件，如果C传递信息给B则可直接使用。此时可以使用v-on="$listeners"来满足当前需求。此时可以使用v-on="$listeners"来满足当前需求。emit,则就需要C先emit给A，这种方式比较麻烦。emit,则就需要C先emit给A，这种方式比较麻烦。

原创 echarts饼图type=pie划过高亮的设置属性emphasis

【代码】echarts饼图type=pie划过高亮的设置属性emphasis。

原创 echarts 环形图formatter自定义环形图中间文字，label

设置两行，使用富文本rich自定义字体大小颜色，效果图如下。

原创 echarts图例legend自定义formatter，多行显示色块文字对其

图例多行显示效果，期望图例色块与文字顶部对齐。

原创 用vue-cli4的脚手架安装vue2版本的项目

注意：有些时候vue create会提示版本npm不匹配，此时需要使用命令行npm 安装vue-cli以上，先把本地的vue-cli卸载。安装命令会引导你选择哪个版本的vue2.x或者是vue3.x。可以根据自己的需求选择，其他都可以默认选择。安装完成以后就可以运行项目了。再进行命令行安装项目。

原创 node与npm 版本对应下载

原创 npm最新淘宝镜像站已经更新（2024-2-22）

原来的已替换为最新的配置淘宝镜像的淘宝官方提供的方法。

原创 vue2 ，vue-cli 创建项目相关指令

原创 vue，vue3中emit解析

具体解释：父组件注册了一个函数，但是它不会自己去执行这个函数，它需要收到一个信号才会自己去执行。什么叫注册了一个函数呢？说白了，就是它在自己本身组件内部定义了一个函数，但是这个函数在没有收到 “信号的时候是不会去执行的”。如果你能明白上一段的意思，那么你基本上就知道究竟是谁发出来的了。让我们回到子组件内部，在子组件内，我们需要去拿到父组件注册的那个函数名字。也就是addCount，来准备通知父组件。

原创 js 数组求和reduce

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。

原创 前端那点事：库与框架的区分

在实际中，像angular、vue、react就属于框架，而jQuery、underscore、zepto就是库，在框架中我们完全可以自由的使用库，同时也可以在没有框架的基础之上使用库，库的使用是很自由的，控制权始终在我们的手中。但是使用框架时候就必须按照它的规范来进行模块化的开发。库更多的是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；

原创 解析npm、cnpm、yarn、pnpm 几种包管理器

随着前端工程化的应用越来越广，插件和包的管理也逐渐衍生出很多的管理器，常见的几种包管理器如：npm、cnpm、yarn、pnpm，那你知道这些管理器之间有哪些区别吗？

原创 element-ui 控件，选择控件el-select选中，并选到label

【代码】element-ui 控件，选择控件el-select选中，并选到label。

原创 当 element-Ui 中el-select选择器选中一个值，其余选项全部高亮，解决方法

change方法中绑定$event传参，可以选中这个对象，并在selSiteLocation方法中取到，注意其中的。:value-key="'kid'" :key="item.kid" 关键配置。value-key="kid"设置，选中当前高亮。

原创 javascript闭包的理解

为什么能够打印num变量，原因在于作用域链的访问机制，内部函数可以访问外部函数，下面会补充作用域和作用域链的知识点。作用域在函数的定义时就产生，而不是函数调用时产生的。2. 另一种说法，当内部函数的生命周期大于外部函数的声明周期，而内部函数以某一种方式被外部作用域访问时，闭包就产生了。一句话概括：根据【内部函数可以访问外部函数变量】，采用就近原则一层一层向上查找变量，这个机制就叫作作用域链。1. 是一个函数，这个函数有权访问另一个作用域中的变量。函数A包含了函数B，那么函数B就是函数A的内部函数，

原创 如何在win10电脑右键菜单，添加命令行窗口cmd

ShowBasedOnVelocityId，数据数值为639bc8，如数据名称不可改，可新增之后右键重命名即可。在shell右键，新增项，名称为runas，下级节点新建项，名称为command,如图所示。电脑快捷键win+R 打开命令行窗口，输入注册表指令regedit，并打开注册表。配置结束，回到桌面，右键菜单打开即可看到“以管理员身份运行(A)”，说明成功。在头输入框输入路径地址，直接到配置路径配置注册表。配置command数据，数值数据为。新增DWORD-32位，名称为。

原创 sessionStorage、localStorage和cookie，session的区别

1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。每个cookie最大为4k，每个域名可以拥有的cookie数量在不同浏览器中是不同的，但都多于20个，早期的20个限制已经不存在了。而sessionStorage只要同源的同窗口中，刷新页面或进入同源的不同页面，数据始终存在，也就是说只要浏览器不关闭，数据仍然存在。共同点：都是保存在浏览器端、且同源的。