- 博客(111)
- 收藏
- 关注
RSS订阅
原创 【静态站点（三）】之 Gridsome + Strapi + Vercel + Pm2 部署案例
文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读Gridsome 案例案例介绍使用第三方案例模板，嵌入到本次项目中模板地址：https://github.com/zimeng303/startbootstrap-clean-blog为防止项目作者的一些删除操作，建议将其 Fork 到自己的仓库中使用 git 将其下载到本地，--depth=1 表示下载最后一次更新的代码git clone [email protected]:zimen
2021-01-27 16:31:51
1491
1
原创 JavaScript异步编程【中】 -- Promise 详细解析
前言在ES6中，新增加了一种异步编程的解决方案Promise，它是一种规范，是一套处理JavaScript异步的机制。Promise的含义简单来说，它是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，通过它可以获取异步操作的消息。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 对象有两个特点：1、对象的状态不受外界影响。只有异步操作
2020-10-29 16:33:39
572
1
原创 【Error】Failed to load plugin ‘react-internal‘ ...：Cannot find module ‘eslint-plugin-react-internal‘
【Error】Failed to load plugin ‘react-internal‘ ...：Cannot find module ‘eslint-plugin-react-internal‘
2022-03-05 21:24:06
1651
原创 【Linux】Grub-UEFI error... “file `/grub/x86_64-efi/normal.mod` not found“
× Error: Grub-UEFI error... "file `/grub/x86_64-efi/normal.mod` not found"原因分析解决方案原因分析出现上面的问题，是因为 /grub/x86_64-efi/normal.mod 文件被存储在了其他的硬盘分区中，导致启动Linux 系统的时候找不到设置的启动文件。（我的电脑是由于对C盘应用进行迁移时，不小心把Linux系统的挂载文件迁移了，因此导致了此问题）解决方案1、Grub 命令rescue模式下可使用的命令有：set
2022-02-14 12:30:09
5362
1
原创 【Fiddler 问题】解决关于Fiddler 抓包中，手机网络配置代理后，无法上网
【Fiddler 问题】解决关于Fiddler 抓包中，手机网络配置代理后，无法上网一、在注册表添加文件二、配置 FiddlerScript rule一、在注册表添加文件1、使用 windows + R 快捷键 打开运行程序并输入 regedit，如图所示：2、打开注册表，在 计算机\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Fiddler2 下创建一个DWORD，值设置为 80（十进制），如图所示：二、配置 FiddlerScript rule1、编写
2022-02-13 21:54:00
8303
原创 [webpack-cli] Unable to load ‘@webpack-cli/serve‘ command
webpack -- Unable to load '@webpack-cli/serve' command原因分析解决方案方案验证原因分析出现上面的问题，是因为webpack 4.X 以后，都是通过 webpack-cli 脚手架进行打包的，webpack-cli 没有安装成功，就会报出上面的错误解决方案重新安装 webpack-cli 依赖模块 npm install webpack-cli --save-dev方案验证重新运行项目启动命令 npm run start注：上
2021-11-19 14:19:04
1435
原创 【Error】Less-loader 版本过高，TypeError: this.getOptions is not a function
TypeError: this.getOptions is not a function原因分析解决方案原因分析由于 less-loader 的版本过高，会报出 TypeError: this.getOptions is not a function 的错误解决方案1，清除已下载的 less-loadernpm uninstall less-loader# 或者yarn remove less-loader 2，指定 less-loader 的安装版本npm install less-l
2021-04-01 14:44:29
687
原创 【git clone 报错】fatal: unable to access ‘https://github.com/zimeng303/React.git/‘: Failed to connect
【git clone 报错】fatal: unable to access 'https://github.com/zimeng303/React.git/': Failed to connect to github.com port 443: Timed out报错信息解决方案报错信息报错示例，如图所示：解决方案将 git clone [远程仓库的url] 中 [远程仓库的url] 中的 https 更改为 git，即可正常克隆代码。执行命令，如下所示：...
2021-03-31 10:16:36
334
原创 【Recat 应用】之 React 脚手架
Visual Studio Code 安装 React 插件ES7 React/Redux/GraphQL/React-Native snippets 插件使用 create-react-app 创建 react 应用react 脚手架1，xxx 脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目1）包含了所有需要的配置（语法检查、jsx编译、devServer…）2）下载好了所有相关的依赖3）可以直接运行一个简单效果2，react 提供了一个用于创建 react 项目的脚
2021-03-09 15:39:21
210
原创 【React 基础】之 React 面向组件编程
React 面向组件编程React 面向组件编程准备工作基本使用函数式组件类式组件组件实例的三大核心属性statepropsrefs与事件处理收集表单数据组件的生命周期生命周期流程图(旧)生命周期流程图(新)重要的勾子即将废弃的勾子虚拟DOM 与 DOM Diffing算法React 面向组件编程准备工作使用 React 开发者工具调试复习 类 相关知识定义 class(类)，代码如下：// 创建一个 Person 类class Person { // 构造器方法 con
2021-03-09 15:31:20
265
原创 【属性对比】defer 与 async
defer defer 要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async async 一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。总结 一句话，defer 是 “渲染完再执行”，async 是 “下载完就执行”。另外，如果有多个 defer 脚本，会按照它们在页面出现的顺序加载，而多个 async 脚本是不能保证加载顺序的。...
2021-03-04 12:05:32
126
1
原创 【前端自动化构建】之 自动化部署
项目说明笔记来源：拉勾教育 大前端高薪训练营阅读建议：建议通过左侧导航栏进行阅读自动化部署基本介绍传统的部署方式更新本地构建发布更新本地构建发布…现代化的部署方式（CI / CD）CI / CD 服务JenkinsGitlab CIGitHub ActionsTravis CICircle CI…GitGub Actions环境准备Linux 服务器把代码提交到 GitHub 远程仓库配置 GitHub Access Token
2021-02-28 13:21:23
372
原创 【概念集锦】之 shim和polyfill
shim 是一个小的类库（lib），提供独立的API，以弥补人们在不同的环境下使用原生语言需要考虑兼容性的问题。比如：使用js原生Ajax操作时，你用 XMLHttpRequest 创建xhr对象，但是在IE8上，你就得用 ActiveXObject，为了解决这些兼容问题，同时简化操作，jQuery出现了。jQuery的核心理念就是： write less,do more！所以，jQuery 就可以看成一个 shim。polyfill 是一个小的类库（lib），用于实现浏览器..
2021-02-28 11:34:17
201
原创 【Day13】说一下 Vue 组件的通信方式都有哪些？（父子组件，兄弟组件，多级嵌套组件等等）
说一下 Vue 组件的通信方式都有哪些？（父子组件，兄弟组件，多级嵌套组件等等）一、父组件向子组件传值二、子组件向父组件传值三、兄弟组件传值四、跨组件一、父组件向子组件传值1.1 props 方式：可以是数组或对象，用于接收父组件的数据<div id="app"> <child-component :msg="message" :count="count"></child-component> <button @click="count++"&
2021-02-18 22:18:55
218
原创 【Day11】平时在项目开发中都做过哪些前端性能优化
平时在项目开发中都做过哪些前端性能优化一、体验优化二、提升页面性能三、首页加载优化（减少白屏时间）一、体验优化从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。1，首屏渲染优化，请求少、加载体积小、善用缓存2，动画优化，避免某些动画造成页面的卡顿3，优化用户的操作感官，提升视觉反馈，比如 hover 小手，让用户一眼就知道是否可操作4，长列表复用 dom，优化滚动效果及页面卡顿现象，减少页面一次性渲染的数量5，骨架屏的使用6，组件的预加载，懒
2021-02-18 21:47:44
1319
原创 【Day15】介绍下 promise 的特性、优缺点，内部是如何实现的，动手实现 Promise
介绍下 promise 的特性、优缺点，内部是如何实现的，动手实现 PromisePromise 基本特性Promise 的优点Promise 的缺点简单代码实现面试够用版大厂专供版Promise 基本特性Promise 有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)Promise 对象接受一个回调函数作为参数，该回调函数接受两个参数，分别是成功时的回调 resolve 和失败时的回调 reject；另外，resolve 的参数除了正常值以外，还可能是
2021-02-18 21:46:33
679
1
原创 【Day14】ajax 的原理
什么是AJAX?AJAX 全称为 “Asynchronous JavaScript and XML”（异步 JavaScript 和 XML ），是一种创建交互式网页应用的网页开发技术。它使用：使用 XHTML + CSS 来标准化呈现；使用 XML 和 XSLT 进行数据交换及相关操作；使用 XMLHttpRequest 对象与 Web 服务器进行异步数据通信；使用 JavaScript 操作 Document Object Model 进行动态显示及交互；使用 JavaScript 绑定和
2021-02-18 21:45:41
240
原创 【VSCode - Vetur 插件报错】Cannot find module ‘XXX‘ or its corresponding type declarations.Vetur(2307)
Cannot find module '@/utils/request' or its corresponding type declarations.Vetur(2307原因分析解决方案)原因分析报错示例，如图所示：上述问题的产生，一般是由于 Visual Studio Code 中安装了 Vetur 插件，它在检测 js/ts 模板时，只会检测 <script> 中的内容，而在使用 ts 语法时，<script> 标签中，会含有 lang="ts" 属性设置，如下所示：
2021-02-18 08:57:06
19587
11
原创 【Vue 3.0 新特性（四）】Vue 3.0 响应式系统原理
文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读Vue 3.0 响应式系统原理基础回顾Vue.js 响应式回顾Proxy 对象实现属性监听多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和 length 属性可以作为单独的模块使用Proxy 对象回顾'use strict'// 问题1： set 和 deleteProperty 中需要返回布尔类型的值// 在
2021-02-15 19:17:14
212
1
原创 【Vue 3.0 新特性（三）】Vite 工具
文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读Vite 工具基本概念Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具它基于 ECMAScript 标准原生模块系统（ES Modules）实现ES Module现代浏览器都支持 ES Module（IE不支持）通过下面的方式加载模块 <script type="module" src="..."></script>支持模块的
2021-02-15 19:06:58
558
原创 【Vue 3.0 新特性（二）】Composition API
文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读基本介绍学习网址RFC(Request For Comments)https://github.com/vuejs/rfcsComposttion API RFChttps://composition-api.vuejs.org设计动机Options API包含一个描述组件选项(data、methods、props等)的对象Options API 开发复杂组件，同一个
2021-02-15 18:54:08
400
原创 【Vue 3.0 新特性（一）】源码的组织方式
项目说明Vue 3.0 源码的组织方式一、源码采用 TypeScript 重写为了提升代码的可维护性，源码都使用 TypeScript 编写，大型项目项目的开发都推荐使用类型化的语言。二、使用 Monorepo 管理项目结构使用一个项目管理多个包，把不同的功能放到不同的 package 中进行管理，这样每个功能模块都划分的比较明确，模块之间的依赖关系也很明确，并且每个模块都能单独发布、测试及使用。packages 目录结构compiler-core：和平台无关的编译器co
2021-02-15 15:09:41
218
原创 【Vue 3.0 新特性（一）】源码的组织方式
笔记来源：拉勾教育 大前端高薪训练营源码采用 TypeScript 重写为了提升代码的可维护性，源码都使用 TypeScript 编写，大型项目项目的开发都推荐使用类型化的语言。使用 Monorepo 管理项目结构使用一个项目管理多个包，把不同的功能放到不同的 package 中进行管理，这样每个功能模块都划分的比较明确，模块之间的依赖关系也很明确，并且每个模块都能单独发布、测试及使用。packages 目录结构compiler-core：和平台无关的编译器compiler-do.
2021-02-09 16:31:58
580
原创 【Day12】整个前端性能提升大致分几类
整个前端性能提升大致分几类网站性能提升1、静态资源的优化2、接口访问的优化3、页面渲染速度的优化网站性能提升1、静态资源的优化主要是减少静态资源的加载时间，主要包括 html、js、css 和 图片。a. 减少 http 请求数：合并 js、css、制作雪碧图以及使用 http 缓存；b. 减少资源的大小：压缩文件、压缩图片，小图使用 base64 编码等；c. 异步组件和图片懒加载；d. CDN 加速 和 缓存（bootCDN）：客户端可通过最佳的网络链路加载静态资源，提高访问的速度和成功
2021-02-08 17:28:23
279
1
原创 【Day10】项目中如何处理安全问题
项目中如何处理安全问题Web 前端安全1. CSRF 跨站请求伪造2. XSS 跨站脚本攻击3. webshell 网站提权渗透4. 网页挂马与流量劫持5. 其他安全问题6. 总结Web 前端安全Web 前端安全主要包括如下几种：跨站脚本 XSS跨站请求伪造 CSRF界面操作劫持webshell…1. CSRF 跨站请求伪造它也成为 One Click Attack，或者 Session Riding，缩写为 CSRF，是一种对网站的恶意利用，相对来说更加难以防范。原理当用户正常登
2021-02-08 17:27:27
285
原创 【Day09】JavaScript 为什么要区分微任务和宏任务
JavaScript 为什么要区分微任务和宏任务区分微任务和宏任务是为了将异步队列任务划分优先级，通俗的理解就是为了插队。一个 Event Loop，Microtask 是在 Macrotask 之后调用，Microtask 会在下一个 Event Loop 之前执行调用完，并且其中会将 Microtask 执行当中新注册的 Microtask 一并调用执行完，然后才开始下一次 Event Loop，所以如果有新的 Macrotask 就需要一直等待，等到上一个 Event Loop 当中 Microt
2021-02-08 17:26:47
2189
4
原创 【Day08】请简述虚拟 DOM 中 Key 的作用和好处
请简述虚拟 DOM 中 Key 的作用和好处官网地址：https://cn.vuejs.org/v2/api/#keykey 的作用key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改 / 复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有 独特的
2021-02-08 17:26:17
308
原创 【Day07】v-model 是如何实现的，语法糖实际是什么？
v-model 是如何实现的，语法糖实际是什么？一、语法糖二、实现原理1. 作用在普通表单元素上2. 作用在组件上一、语法糖指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。糖在不改变其所在位置的语法结构的前提下，实现了运行时的等价。可以简单理解为，加糖后的代码编译后跟加糖前一样，代码更简洁流畅，代码更语义自然。二、实现原理1. 作用在普通表单元素上动态绑定了 input 的 value 指向
2021-02-08 17:25:39
1779
4
原创 vscode常用快捷键大全
vscode常用快捷键大全编辑器管理快捷键文件管理快捷键调试快捷键集成终端快捷键导航快捷键多行光标快捷键显示快捷键编辑器管理快捷键Ctrl + F4, Ctrl + W 关闭编辑器Ctrl + |切割编辑窗口Ctrl + 1/2/3 切换焦点在不同的切割窗口Ctrl + Shift + PgUp/PgDown 切换标签页的位置文件管理快捷键Ctrl + N 新建文件Ctrl + O 打开文件Ctrl + S 保存文件Ctrl + Shift + S 另存为Ctrl + F4 关闭当前编
2021-02-08 11:27:15
452
1
原创 【Day06】请画出 Css 盒模型，基于盒模型的原理，说明相对定位、绝对定位、浮动实现样式是如何实现的？
一、Css 盒模型页面上任何一个元素，我们都可以看成是一个盒子，盒子会占用一定的空间和位置，他们之间相互制约，就形成了网页的布局。w3c 的盒模型的构成：content border padding marginIE盒模型和标准盒模型IE盒模型和标准盒模型唯一的区别是内容计算方式的不同IE 盒模型，宽度：width = content + padding标准盒模型，宽度：width = content不同定位一、相对定位relative(相对定位) 对象不可层叠、不脱离文档
2021-02-07 11:33:58
207
原创 【Day05】Html5 有哪些新特性？如何处理 Html5 新标签的浏览器兼容问题？如何区分 Html 和 Html5？
Html5 有哪些新特性？如何处理 Html5 新标签的浏览器兼容问题？如何区分 Html 和 Html5？一、Html5 新特性1. 拖拽释放（Drag and drop）API2. 语义化更好的内容标签3. 表单控件4. 音频、视频 API（audio，video）5. 画布（Canvas）API6. SVG绘图7. 地理（Geolocation）API8. Web Worker9. Web Storage10. WebSocket二、Html5 兼容问题处理1. 使用 DOM 操作来添加这些标签2.
2021-02-07 11:12:24
291
原创 【Vue.js 3.0】不使用根标签，Error：[vue/no-multiple-template-root] The template root requires exactly one ...
[vue/no-multiple-template-root]The template root requires exactly one element.eslint-plugin-vue原因分析解决方案原因分析报错示例，如图所示：上述问题的产生，一般是由于 Visual Studio Code 中安装了 Vetur 插件，它在检测 vue-html 模板时，使用了 eslint-plugin-vue 插件。解决方案查看是否安装了 Vetur 插件点击 文件 -- 首选项 --
2021-02-05 11:28:58
793
2
原创 【Day04】介绍防抖节流原理、区别以及应用，并用 JavaScript 进行实现
介绍防抖节流原理、区别以及应用，并用 JavaScript 进行实现防抖函数一、实现原理二、适用场景三、代码实现简易版 (非立即执行版) 实现立即执行版实现返回值版实现节流函数一、实现原理二、适用场景三、代码实现使用时间戳实现使用定时器实现加强版节流函数 throttle防抖函数一、实现原理在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。二、适用场景按钮提交场景：防止多次提交按钮，只执行最后提交的一次搜索框联想场景：防止联想发送请求，只发送最后一次输入
2021-02-05 10:37:17
247
3
原创 封装 Vue.js 组件库
文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读课程目标开源组件库Element-UIiViewCDD基本介绍CDD(Component-Driven Development) ：组件驱动开发自上而下从组件级别开始，到页面级别结束CDD 的好处组件在最大程度被重用并行开发可视化测试基础回顾处理组件的边界情况$rootparent/parent/parent/children$refs[外链图
2021-02-03 09:41:00
433
2
原创 【静态站点（二）】之 Gridsome 基础
文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读Gridsome 基础基本介绍Gridsome 是什么一个免费、开源、基于 Vue.js 技术栈的静态网站生成器。官方网站：https://gridsome.org/GitHub 仓库：https://github.com/gridsome/gridsomeGridsome 是由Vue.js驱动的Jamstack框架，用于构建默认情况下快速生成的静态生成的网站和应用。Gridsome是Vue
2021-01-27 15:55:59
616
原创 【内容管理系统】之 Strapi
文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读CMS 简介内容管理系统（content management system，CMS）是一种位于WEB 前端（Web 服务器）和 后端办公系统或流程（内容创作、编辑）之间的软件系统。内容的创作人员、编辑人员、发布人员使用内容管理系统来提交、修改、审批、发布内容。这里指的“内容”可能包括文件、表格、图片、数据库中的数据甚至视频等一切你想要发布到Internet、Intranet以及Extranet网站的信息
2021-01-27 15:36:32
991
1
原创 【静态站点（一）】之 静态网站生成器
笔记来源：拉勾教育 大前端高薪训练营一、什么是静态网站生成器静态网站生成器是一系列配置、模板以及数据，生成静态 HTML 文件及相关资源的工具这个功能也叫 预渲染生成的网站不需要类似 PHP 这样的服务器只需要放到支持静态资源的 Web Server 或 CDN 上即可运行二、静态网站的好处省钱不需要专业的服务器，只要能托管静态文件的空间即可快速不经过后端服务器的处理，只传输内容安全没有后端程序的运行，自然会更安全三、常见的静态网站生成器Jekyl.
2021-01-27 15:08:55
766
原创 ERR! sharp EACCES: permission denied, mkdir ‘/root/.npm/_libvips‘......
ERR! sharp EACCES: permission denied, mkdir '/root/.npm/_libvips' info sharp Are you trying to install as a root or sudo user? Try again with the --unsafe-perm flag...问题分析解决方案问题分析npm 出于安全考虑不支持以 root 用户运行，即使你用 root 用户身份运行了，npm 会自动转成一个叫 nobody 的用户来运行，而这个用
2021-01-25 15:04:02
904
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人