<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[qq_42852004的博客]]></title><description><![CDATA[顾昀峰]]></description><link>https://blog.youkuaiyun.com/qq_42852004</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_42852004]]></copyright><item><title><![CDATA[vscode对json加注释]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/116143052</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/116143052</guid><author>qq_42852004</author><pubDate>Mon, 26 Apr 2021 09:21:03 +0800</pubDate><description><![CDATA[vscode对json加注释
问题呈现：comments are not permitted in JSON

解决方案
第一步：点击vscode工具栏底部的json

第二步：在模式中下拉选择JSON with Comments

第三步：验证
原来报错的地方不报错了

点击查看settings.json文件，查看发现已经配置了jsonc

...]]></description><category></category></item><item><title><![CDATA[vscode 如何添加头部注释和作者注释]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/116135536</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/116135536</guid><author>qq_42852004</author><pubDate>Sun, 25 Apr 2021 18:36:51 +0800</pubDate><description><![CDATA[vscode 如何添加头部注释和作者注释
第一步：vscode里面安装koroFileHeader插件
第二步: 点击vscode右侧侧边栏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OvQlZYPH-1619346713932)(C:\Users\gyf\AppData\Roaming\Typora\typora-user-images\image-20210425180107537.png)]
第三步: 设置Fileheader中的settings.json文件
[外]]></description><category></category></item><item><title><![CDATA[请确保已在Git中配置用户名和邮箱]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/115355702</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/115355702</guid><author>qq_42852004</author><pubDate>Wed, 31 Mar 2021 17:24:49 +0800</pubDate><description><![CDATA[vscode上传代码出现报错

如何解决
git config user.name 你的github用户名
git config user.email 邮箱地址


]]></description><category></category></item><item><title><![CDATA[vue-cli中webpack从2.x升级到4.x]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/115131725</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/115131725</guid><author>qq_42852004</author><pubDate>Tue, 23 Mar 2021 17:20:33 +0800</pubDate><description><![CDATA[对vue-cli脚手架的webpack升级
背景为什么需要升级webpack2.x
因为打包700个静态路由的情况下，出现直接卡主不能在启动，并且没有splitChunk这个功能
第一步：安装webpack-cli和webpack
npm install webpack-cli -D
npm install webpack@4.26.1 -D

第二步： npm run dev启动脚手架在vscode命令行报错

::: warning
注意是因为webpack和html-webpack-plugin版本没]]></description><category></category></item><item><title><![CDATA[vue2.x调试-入口文件查找]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/112391293</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/112391293</guid><author>qq_42852004</author><pubDate>Sat, 09 Jan 2021 15:37:32 +0800</pubDate><description><![CDATA[从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作用就是设置基本配置文件，此处的基本配]]></description><category></category></item><item><title><![CDATA[vue命令行在vscode中失效问题]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/109444011</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/109444011</guid><author>qq_42852004</author><pubDate>Mon, 02 Nov 2020 10:40:16 +0800</pubDate><description><![CDATA[问题呈现

解决方案
第一步：在PowerShell中输入get-ExecutionPolicy，查询到 现在的状态为Restricted

第二步：用管理员模式打开windows的PowerShell

第三步： 在windows PowerShell输入set-ExecutionPolicy RemoteSigne并且输入确定的Y

第四步：验证是否vscode能够输入vue的命令



...]]></description><category></category></item><item><title><![CDATA[对element ui  MessageBox弹框优化兼容移动端]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/106071287</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/106071287</guid><author>qq_42852004</author><pubDate>Tue, 12 May 2020 10:50:51 +0800</pubDate><description><![CDATA[MessageBox弹框兼容移动端的问题

问题原因

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

呈现效果


...]]></description><category></category></item><item><title><![CDATA[npm: react运行时报错npm  start — babel-eslint 版本兼容性问题]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/106053974</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/106053974</guid><author>qq_42852004</author><pubDate>Mon, 11 May 2020 14:43:29 +0800</pubDate><description><![CDATA[问题发生把node从10.x升级到12.x之后出现— babel-eslint 版本兼容性问题
yarn start
yarn run v1.22.4
$ react-scripts start

There 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]]></description><category></category></item><item><title><![CDATA[element ui 及时搜索防抖debounce研究探索]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105970575</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105970575</guid><author>qq_42852004</author><pubDate>Thu, 07 May 2020 17:25:24 +0800</pubDate><description><![CDATA[发现debounce参数在demo中
通过ref获取el-cascader这个所有挂载到VueComponent上的参数，并发现debounce
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507130922536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10...]]></description><category></category></item><item><title><![CDATA[element ui源码调试]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105970267</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105970267</guid><author>qq_42852004</author><pubDate>Thu, 07 May 2020 12:50:13 +0800</pubDate><description><![CDATA[资料

element ui 源码地址：点击跳转

第一步：如何调试element ui 源码
npm run dev


第二步：打包完成后可以根据localhost:8085 访问到源码的demo

第三步：看到源码的界面

第四步：调试的时候可以使用console.log() 或者alert打印内容，但不可以在代码里面加入debugger，加入之后会报错


...]]></description><category></category></item><item><title><![CDATA[es6实现时间格式化]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105948116</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105948116</guid><author>qq_42852004</author><pubDate>Wed, 06 May 2020 12:15:03 +0800</pubDate><description><![CDATA[dealData.js
export const formatDate = (date) =&gt; {

  window.console.log(date)

  const d = new Date(date)

  const y = d.getFullYear() // 年份

  const m = (d.getMonth() + 1).toString().padStart(2, '...]]></description><category></category></item><item><title><![CDATA[Redux基本原理]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105940262</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105940262</guid><author>qq_42852004</author><pubDate>Tue, 05 May 2020 22:35:09 +0800</pubDate><description><![CDATA[什么时候用到redux

流程图 redux

（1）Redux Store 储存数据
（2）View 视图组件可以利用store.getState() 方法读取值，也可以使用store.dispatch()方法改变Redux store里面的值的状态，当数据发生变化时候，视图层通过componentDidMount() 钩子中实现store.subscribe（）方法刷新视图层，进行数据交互
（...]]></description><category></category></item><item><title><![CDATA[Array.prototype.reduce() 原理探索]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105935179</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105935179</guid><author>qq_42852004</author><pubDate>Tue, 05 May 2020 18:43:24 +0800</pubDate><description><![CDATA[流程图

语法
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback的四个参数
accumulator 累计器
currentValue 当前值
currentIndex 当前索引
array 数组
initialValue
initialValue为初始值，最为cal...]]></description><category></category></item><item><title><![CDATA[react   Portal实现传送门（可以把组件挂载到任意节点上）]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105921145</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105921145</guid><author>qq_42852004</author><pubDate>Mon, 04 May 2020 18:13:41 +0800</pubDate><description><![CDATA[react   Portal实现传送门（可以把组件挂载到任意节点上）
流程图

react   Portal
Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法
ReactDOM.createPortal(child,container);

第一个参数child是可渲染的react子项，container是需要挂载到dom元素
使用方法
第一步： 引入cre...]]></description><category></category></item><item><title><![CDATA[react 高阶组件学习流程]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105920015</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105920015</guid><author>qq_42852004</author><pubDate>Mon, 04 May 2020 17:05:47 +0800</pubDate><description><![CDATA[react 高阶组件
流程图

定义
高阶组件是一个函数，参数为组件，返回值为新组件的函数
作用
（1）提高组件复用率
（2）可检测性
（3）保证组件功能的单一性
第一步： 创建一个函数，函数内return值为一个新组件
// 接受的function作为参数本身带有props，因此需要双箭头
const foo = Cmp=&gt;props =&gt;{
  return (
    &lt;d...]]></description><category></category></item><item><title><![CDATA[antd 按需引入并配置config-overrides.js]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105919348</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105919348</guid><author>qq_42852004</author><pubDate>Mon, 04 May 2020 16:55:51 +0800</pubDate><description><![CDATA[第一步：安装antd
npm add antd

第二步：下载依赖包（定义组件按需打包）
npm install react-app-rewired customize-cra babel-plugin-import 

第三步：安装 @babel/plugin-proposal-decorators
npm add @babel/plugin-proposal-decorators

第四步： ...]]></description><category></category></item><item><title><![CDATA[vscode 使用react高阶组件class@报错问题]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105918834</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105918834</guid><author>qq_42852004</author><pubDate>Mon, 04 May 2020 16:16:48 +0800</pubDate><description><![CDATA[错误回显

第一步：打开settings.json配置 =&gt; ctrl+shift+p=&gt;输入settings.json（不是default settings）

第二步： 在settings.json 中加入 “javascript.implicitProjectConfig.experimentalDecorators”: true,
{
    "terminal.integra...]]></description><category></category></item><item><title><![CDATA[antd 引入到react里面报错./node_modules/moment/src/lib/locale/locales.js Module not found: Can't resolve './]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105915448</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105915448</guid><author>qq_42852004</author><pubDate>Mon, 04 May 2020 11:48:10 +0800</pubDate><description><![CDATA[解决方案：
找到下图的webpack.config.js中的 new webpack.IgnorePlugin(/^./locale/,/moment/, /moment/,/moment/),

修改
 new webpack.IgnorePlugin(/\.\/locale/, /moment/),



]]></description><category></category></item><item><title><![CDATA[Context 跨组件传值方法]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105910518</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105910518</guid><author>qq_42852004</author><pubDate>Sun, 03 May 2020 23:10:09 +0800</pubDate><description><![CDATA[Context 跨组件传值方法

app.js
import React from 'react';
// import logo from './logo.svg';
import './App.css';
import ContextPage from './pages/ContextPage'


function App() {
  return (
    &lt;div classNa...]]></description><category></category></item><item><title><![CDATA[vue源码文件结构]]></title><link>https://blog.youkuaiyun.com/qq_42852004/article/details/105174722</link><guid>https://blog.youkuaiyun.com/qq_42852004/article/details/105174722</guid><author>qq_42852004</author><pubDate>Sun, 29 Mar 2020 10:51:20 +0800</pubDate><description><![CDATA[]]></description><category></category></item></channel></rss>