qq_42852004的博客

原创 vscode 怎么打断点调试

第一步：在vscode中安装Debugger for Chrome 或者debugger for fireFox的插件第二步：快捷键F5 或者点击运行=>启动调试第三步：选择环境需要配置的环境Chrome ，firefox或者node第四步：上一步选chrome 或者firefox的环境随便选其中一个，此时会出现一个launch.json的配置文件第五步：配置launch....

原创 前端深拷贝和浅拷贝的原理及应用

1.1 数据类型对拷贝的作用1.11 数据类型：（1）基础数据类型（primitive data types）：基础数据类型:简单的数据端，基础类型的数据有Number,Null,Boolean,Number and String。这五种基础类型可以按值访问，可以直接操作保存在变量的实际值（来源：JavaScript高级程序设计） let test1 =&n...

原创 在vue中整合使用tinymce富文本编辑器

参考tinymce文档：点击此处跳转步骤一：在vue中引入tinymce（点击跳转查看资料）npm install @tinymce/tinymce-vue -S步骤二：引入tinymce-vue进入到子组件中import Editor from '@tinymce/tinymce-vue'步骤三：注册tinymce-vue进入到组件中 // 注册tinymce组件 compo...

原创 VsCode（Visual Studio Code）格式化代码符合EsLint

利用Visual Studio Code ESlint插件，实现自动格式化代码步骤一安装ESlint插件=>点击Extensions或者Ctrl+Shift+X=>搜索ESlint=>install EsLint步骤二: 重启VsCode， 发现代码提示报错，代码不符合规范步骤三：鼠标hover在报错的地方，会出现Quick Fix…，点击或者选择这条报错代码Ctr...

原创 element ui 图片自定义上传进度条消失问题

element ui 图片自定义上传进度条消失问题http-request自定义上传后出现的问题：（1）element ui自定义进度条会被禁止第一步：通过查找网上的资源后，发现axios请求的参数中使用 onUploadProgress事件下面的progressEvent可以监控到图片上传的进度第二步：需要引入element ui的进度条组件第三步：在data中注册percentag...

vscode对json加注释

vscode对json加注释问题呈现：comments are not permitted in JSON解决方案第一步：点击vscode工具栏底部的json第二步：在模式中下拉选择JSON with Comments第三步：验证原来报错的地方不报错了点击查看settings.json文件，查看发现已经配置了jsonc...

原创 vscode 如何添加头部注释和作者注释

vscode 如何添加头部注释和作者注释第一步：vscode里面安装koroFileHeader插件第二步: 点击vscode右侧侧边栏[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OvQlZYPH-1619346713932)(C:\Users\gyf\AppData\Roaming\Typora\typora-user-images\image-20210425180107537.png)]第三步: 设置Fileheader中的settings.json文件[外

原创 请确保已在Git中配置用户名和邮箱

vscode上传代码出现报错如何解决git config user.name 你的github用户名git config user.email 邮箱地址

原创 vue-cli中webpack从2.x升级到4.x

对vue-cli脚手架的webpack升级背景为什么需要升级webpack2.x因为打包700个静态路由的情况下，出现直接卡主不能在启动，并且没有splitChunk这个功能第一步：安装webpack-cli和webpacknpm install webpack-cli -Dnpm install [email protected] -D第二步： npm run dev启动脚手架在vscode命令行报错::: warning注意是因为webpack和html-webpack-plugin版本没

原创 vue2.x调试-入口文件查找

从npm run dev查找路口文件流程图初始入口package.json "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",第一步：查找配置项的配置文件当npm run dev时候会运行rollup打包vue，基本配置中：(1) -w就是–watch作用就是监听源文件是否有改动，如果有改动，重新打包(2) -c就是–config作用就是设置基本配置文件，此处的基本配

原创 vue命令行在vscode中失效问题

问题呈现解决方案第一步：在PowerShell中输入get-ExecutionPolicy，查询到 现在的状态为Restricted第二步：用管理员模式打开windows的PowerShell第三步： 在windows PowerShell输入set-ExecutionPolicy RemoteSigne并且输入确定的Y第四步：验证是否vscode能够输入vue的命令...

原创 对element ui MessageBox弹框优化兼容移动端

MessageBox弹框兼容移动端的问题问题原因在上图中可以看到.el-message-box这个样式被定死为420px,因此会发生弹框位置不准确在移动端解决方案可以利用媒体查询@media实现在宽度小于750px一下，宽度可以使用百分比布局@media screen and (max-width: 750px) { .el-message-box { width: 60% !important; }}呈现效果...

原创 npm: react运行时报错npm start — babel-eslint 版本兼容性问题

问题发生把node从10.x升级到12.x之后出现— babel-eslint 版本兼容性问题yarn startyarn run v1.22.4$ react-scripts startThere might be a problem with the project dependency tree.It is likely not a bug in Create React App, but something you need to fix locally.The react-scri

原创 element ui 及时搜索防抖debounce研究探索

发现debounce参数在demo中通过ref获取el-cascader这个所有挂载到VueComponent上的参数，并发现debounce![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507130922536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10...

原创 element ui源码调试

资料element ui 源码地址：点击跳转第一步：如何调试element ui 源码npm run dev第二步：打包完成后可以根据localhost:8085 访问到源码的demo第三步：看到源码的界面第四步：调试的时候可以使用console.log() 或者alert打印内容，但不可以在代码里面加入debugger，加入之后会报错...

原创 es6实现时间格式化

dealData.jsexport const formatDate = (date) => { window.console.log(date) const d = new Date(date) const y = d.getFullYear() // 年份 const m = (d.getMonth() + 1).toString().padStart(2, '...

原创 Redux基本原理

什么时候用到redux流程图 redux（1）Redux Store 储存数据（2）View 视图组件可以利用store.getState() 方法读取值，也可以使用store.dispatch()方法改变Redux store里面的值的状态，当数据发生变化时候，视图层通过componentDidMount() 钩子中实现store.subscribe（）方法刷新视图层，进行数据交互（...

原创 Array.prototype.reduce() 原理探索

流程图语法arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])callback的四个参数accumulator 累计器currentValue 当前值currentIndex 当前索引array 数组initialValueinitialValue为初始值，最为cal...

原创 react Portal实现传送门（可以把组件挂载到任意节点上）

react Portal实现传送门（可以把组件挂载到任意节点上）流程图react PortalPortals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法ReactDOM.createPortal(child,container);第一个参数child是可渲染的react子项，container是需要挂载到dom元素使用方法第一步： 引入cre...

原创 react 高阶组件学习流程

react 高阶组件流程图定义高阶组件是一个函数，参数为组件，返回值为新组件的函数作用（1）提高组件复用率（2）可检测性（3）保证组件功能的单一性第一步： 创建一个函数，函数内return值为一个新组件// 接受的function作为参数本身带有props，因此需要双箭头const foo = Cmp=>props =>{ return ( <d...

原创 antd 按需引入并配置config-overrides.js

第一步：安装antdnpm add antd第二步：下载依赖包（定义组件按需打包）npm install react-app-rewired customize-cra babel-plugin-import 第三步：安装 @babel/plugin-proposal-decoratorsnpm add @babel/plugin-proposal-decorators第四步： ...

原创 vscode 使用react高阶组件class@报错问题

错误回显第一步：打开settings.json配置 => ctrl+shift+p=>输入settings.json（不是default settings）第二步： 在settings.json 中加入 “javascript.implicitProjectConfig.experimentalDecorators”: true,{ "terminal.integra...

原创 antd 引入到react里面报错./node_modules/moment/src/lib/locale/locales.js Module not found: Can't resolve './

解决方案：找到下图的webpack.config.js中的 new webpack.IgnorePlugin(/^./locale/,/moment/, /moment/,/moment/),修改 new webpack.IgnorePlugin(/\.\/locale/, /moment/),

原创 Context 跨组件传值方法

Context 跨组件传值方法app.jsimport React from 'react';// import logo from './logo.svg';import './App.css';import ContextPage from './pages/ContextPage'function App() { return ( <div classNa...

原创 vue源码文件结构

原创 vue源码学习-调式环境配置

1.1 调式环境配置–调式源代码学习vue源码第一步：github源码下载https://github.com/vuejs/vue第二步：安装基础配置和安装rollupnpm inpm i rollup -g第三步：在package.json的scripts dev中配置sourceMap(目的是和源码产生映射关系方便打断点) "dev": "rollup -w -c scri...

原创 解决vs Code打开新的文件后旧的文件被顶掉

问题描述：visual studio code 顶部菜单栏最多只能打开两个新的，在没有修改的情况下，打开第三个文件会顶到第一个文件解决方案第一步找到setting.json文件文件=>首选项=>设置=>用户=>工作台=>setting.json第一步找到setting.json文件中设置 workbench.editor.enablePreview为f...

原创 vscode如何提交代码到远程库

第一步：选择查看=>命令面板或者Ctrl+shift+P打开命令面板第二步：在命令面板中输入git remote add=>先输入远程库的名称=>在输入远程库的地址先输入远程库的名称在输入远程库的地址第三步：点击vscode源代码管理模块=>在输入提交模块的信息备注=>点击提交按钮第三步：点击更多按钮=>选择推送到=>选取远程推送的库...

原创 npm ERR! Unexpected end of JSON input while parsing near '...Rg9e9zaVBZ

问题呈现npm install @babel/preset-env --save-devnpm ERR! Unexpected end of JSON input while parsing near '...Rg9e9zaVBZmVC6WEx1k\n'npm ERR! A complete log of this run can be found in:npm ERR! C:\...

原创 webpack安装node-sass遇到的坑

问题呈现：npm i sass-loader node-sass -D安装node-sass的时候报下面的错误：PS C:\Users\Administrator\Desktop\webpack4.x> npm install sass-loader node-sass --save-devnpm WARN deprecated [email protected]: request ha...

原创 git commit 时候出现 出现"modified content, untracked content"错误

1 错误展示：第一步：移除错误文件名为vantuitest2.0在git 进程树git rm -rf --cached vantuitest2.0第二步：确认移除vantuitest 2.0git commit -m "add vantuitest2.0"第三步：重新走一遍提交git add vantuitest2.0git commit -m “add vantuites...

原创 更新vue-cli出现错误 npm ERR! Unexpected end of JSON input while parsing near '..."string.prototype.pad'

更新vue-cli出现错误 npm ERR! Unexpected end of JSON input while parsing near ‘…"string.prototype.pad’$ npm install @vue/cli -gnpm ERR! Unexpected end of JSON input while parsing near '..."string.protot...

原创 js循环遍历时间段获取每一天

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js循环遍历时间段</title> </head> <body> </body> <script type="text/javascrip...

原创 visual code git提交代码出现冲突解决方案

问题一：第一步：利用 git pull --rebase origin master重现拉取一下线上的代码第二步：在代码中解决线上和本地的冲突项，冲突的代码文件会用紫色标识第三步：git status排查冲突文件第四步：merge冲突代码第一种方法：第二种方法：git add xxxx(需要解決冲突的文件名)运行git status 从红色变为绿色运行git com...

原创 如何安装webpack基础环境

流程结构图：第一步： 初始化一个npmnpm init同时在文件夹中会生成一个package.json第二步：填写一些基本项目信息第三步：安装webpack-clinpm install webpack-cli --save-dev同时在package.json的devDependencies中生成webpack-cli的版本信息文件夹中生成一个node_modul...

原创 怎么替换webpack的安装版本

第一步：查询当前webpack的版本信息：npx webpack -v第二步：查询webpack的历史版本：npm info webpack第三步：安装webpack其他版本：npm install [email protected] webpack-cli -D第四步：检查package.json的版本号...

原创 --save-dev 安装的插件用-v查询不到该插件的版本信息

问题概述：–save-dev会把插件安装到项目的根目录，但是用-v查询不到，原因： -v是全局搜索，而–save-dev会把插件安装入node moudle中，-v查询不到，因此我们需要借助node模块的npx方法来查询举例：webpack -v 查询不到npx webpack -v可以查询到webpack的版本信息–save -dev比-g的好处就是可以不影响其他项目的项目...

原创 Promise()同步执行

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 一个函数怎么调用其他函数的私有函数

方案一：将私有函数return到全局 //方案一：return 私有函数到全局可以访问 function a(){ function b(){ window.console.log("启动函数b") } function c(){ window.console.log("启动函数c") ...

原创 webpack4.x配置autofixer无效

解决方案一：在package.json中配置browserlist参数{ "name": "webpacktest", "version": "1.0.0", "description": "", "private": true, "scripts": { "bundle": "webpack", "watch": "webpack --watch", ...