- 博客(97)
- 收藏
- 关注
RSS订阅原创 用 vite 构建 vue3 + TS 项目实战
1、项目初始化npm install create-vite@2.9.0 -g // 全局安装 create-vite npm init @vitejs/app shop-admin // 初始化项目(shop-admin 项目名) cd shop-admin npm install npm run dev 2、eslint 基础配置npm install eslint --save-dev npm install@eslint/create-confi...
2022-04-26 14:47:38
14874
8
原创 npx mrm@2 lint-staged执行报错
1、原因：node路径带有空格，Program Files之间有空格查看路径：npm config get cache得到 D:\Program Files\nodejs\node_modules\npm\node_cache2、解决办法（二选一）：（1）npm config edit会弹出一个文本框，找到这个路径，将Program Files修改为Program~1，保存即可（2）npm config set cache "D:\Program~1\nodejs\node_mo..
2022-04-07 13:56:05
1673
原创 npm init vite@latest 构建项目报错解决办法
根据提示安装 create-vite：npm install create-vite@2.9.0 -g 初始化项目：npm init @vitejs/app shop-admin // (shop-admin 项目名) cd shop npm install npm run dev
2022-04-06 15:24:11
7422
1
原创 npx eslint --init 报错解决办法
根据提示安装@eslint/create-config@latest（npm install@eslint/create-config@latest -D） 执行 npm init @eslint/config
2022-04-06 15:20:56
2060
原创 关于 webpack 的问题
目录1、webpack 是什么？2、入口文件 entry 为什么是 index.js?而不是 index.html或者index.css文件3、webpack有什么？1、webpack 是什么？是一款打包工具，可以压缩 CSS，兼容性处理，开发服务器调试2、入口文件 entry 为什么是 index.js?而不是 index.html或者index.css文件因为当下前端只对 js 实现了模块化开发，可以通过 import 和 require 引入文件，而对 html
2022-04-06 09:16:33
763
原创 关于流操作的知识点【Node.js】
目录1、流是什么？2、Node.js 为什么要用流？（传电影的例子）3、node.js 是如何来使用流的呢？4、可读流的实现5、双工流的实现6、结论官网：Node.js Buffer(缓冲区) | 菜鸟教程1、流是什么？抽象的集合2、Node.js 为什么要用流？（传电影的例子）使用流操作数据可以简化代码 使用流操作可以分段数据，配合管道设计的思想，可以自由加工和转换数据3、node.js 是如何来使用流的呢？在它的内部实现了一个 Stream
2022-04-02 10:45:56
992
原创 webpack5【知识大汇总】
一、CSS 兼容（处理.css文件、.less文件）1、需要下载的的依赖postcss、postcss-cli、postcss-loader：是一个用 JavaScript 工具和插件转换 CSS 代码的工具，postcss-loader 使用PostCSS处理 CSS 的 loader 配置postcss.config.js module.exports = { plugins: [ [ 'postcss-preset-env', {...
2022-03-30 15:23:16
1098
原创 防抖和节流函数的实现
目录1、为什么需要防抖和节流？2、防抖函数实现3、节流函数实现1、为什么需要防抖和节流？（1）原因：有一些高频事件触发的场景下，我们不希望对应的事件处理函数执行多次（2）应用场景：滚动事件 输入的模糊匹配 轮播图切断 点击操作 ......浏览器默认情况下都会有自己的监听事件间隔（4~6ms），如果检测到多次事件的监听执行，或造成不必要的的资源的浪费（3）举例场景：界面上有一个按钮，我们可以连续多次点击执行防抖：对于高频率操作，我们只希望识别..
2022-03-10 09:51:34
863
原创 Flow[JavaScript 类型检查器]
1、快速上手yarn init --yes yarn add flow-bin --dev 新建文件夹src，在src新建文件01-getting-started.js，添加 //@flow 注释标记//@flowfunction sum (a: number, b: number) { return a + b}sum(100, 100)sum(100, '100')yarn flow init //初始化 flow yarn flow // 运行 flow...
2022-03-03 17:22:33
7897
原创 Redis
1、Redis 简介（1）Redis 的由来2008 年，意大利的一家创业公司 Merzia 推出了一款基于 MySQL 的网站实时统计系统 LLOOGG ，然而没过多久该公司的创始人 Salvatore Sanfilippo 便开始对 MySQL 的性能感到失望，于是他决定亲自为 LLOOGG 量身定做一个数据库，并于 2009 年开发完成，这个数据库就是 Redis。不过 Salvatore Sanfilippo 并不满足只将 Redis 用于 LLOO...
2021-12-24 20:09:36
1036
原创 MongoDB
目录一、基础1、NoSQL 简介键值数据库文档型数据库列存储型数据库图数据库2、MongoDB 简介3、安装 MongoDB4、mongo Shell5、MongoDB 基础概念6、基础操作（CRUD）一、基础1、NoSQL 简介（1）关系型数据库遇到的问题2008 年左右，网站 、 论坛、社交网络开始高速发展，传统的关系型数据库在存储及处理数据的时候受到了很大的挑战 ，其中主要体现在以下几点：难以应付每秒上万次的高并...
2021-12-23 09:10:36
432
原创 Node.js高级编程【三】通信
目录1、网络通信基本原理2、网络通讯方式3、网络层次模型4、数据封装与解封装5、TCP三次握手与四次挥手6、创建TCP通信7、TCP粘包及解决8、封包拆包实现9、封包解决粘包10、http 协议11、获取 http 请求信息12、设置 http 响应13、代理客户端14、代理客户端解决跨域15、Http 静态服务16、lgserve 命令行配置17、lgserve 处理文件资源18、lgserve 处理目录资源19、l...
2021-12-19 11:38:57
1111
原创 Node.js高级编程【二】核心模块
二、核心模块21、Nodejs事件环理解setTimeout(() => { console.log('s1'); Promise.resolve().then(() => { console.log('p1'); }) Promise.resolve().then(() => { console.log('t1'); })});Promise.resolve().then(() =>...
2021-12-16 10:21:03
2148
原创 Node.js高级编程【一】node 基础
Node 基础1、课程概述Node.js可以做什么 ？2、Node.js 架构Native modulesBuiltin modules "胶水层"底层3、为什么是Node.js ？Node 慢慢演化为一门服务端“语言”IO 是计算过程操作过程中最缓慢的环节Reactor 模式，单线程完成多线程工作Reactor 模式下实现异步IO、事件驱动Node.js 更适用于 IO 密集型高并发请求4、Node.js 的 异步...
2021-12-10 13:36:02
2047
原创 Gatsby【静态站点生成器】
1、Gatsby 介绍Gatsby 是一个静态站点生成器.官网：https://www.gatsbyjs.org/2、静态应用的优势访问速度快 更利于 SEO 搜索引擎的内容抓取 部署简单3、Gatsby 总览基于 React 和 GraphQL. 结合了 webpack, babel, react-router 等前端领域中最先进工具. 开发人员开发体验好 采用数据层和UI层分离而不失 SEO 的现代前端开发模式. 对SEO非常友好 数据...
2021-09-10 15:42:06
473
原创 Next.js【React 服务端渲染框架】
1、Next.js 介绍Next.js 是 React 服务端渲染应用框架. 用于构建 SEO 友好的 SPA 应用.支持两种预渲染方式, 静态生成和服务器端渲染. 基于页面的路由系统, 路由零配置 自动代码拆分. 优化页面加载速度. 支持静态导出, 可将应用导出为静态网站. 内置 CSS-in-JS 库 styled-jsx 方案成熟, 可用于生产环境, 世界许多公司都在使用 应用部署简单, 拥有专属部署环境 Vercel, 也可以部署在其他环境2、创建...
2021-09-02 14:41:00
1862
2
原创 React SSR【React服务器端渲染】
目录1、React SSR 介绍2、服务器端渲染快速开始3、客户端 React 附加事件4、优化5、路由支持6、Redux 支持1、React SSR 介绍什么是客户端渲染CSR：Client Side Rendering 服务器端仅返回 JSON 数据, DATA 和 HTML 在客户端进行渲染.什么是服务端渲染SSR：Server Side Rendering 服务器端返...
2021-08-25 10:58:16
600
原创 React性能优化
目录1. 组件卸载前进行清理操作2. PureComponent3. shouldComponentUpdate4. React.memo5. 使用组件懒加载6. 使用 Fragment 避免额外标记7. 不要使用内联函数定义8. 在构造函数中进行函数this绑定9. 类组件中的箭头函数10. 避免使用内联样式属性11. 优化条件渲染12. 避免重复无限渲染13. 为组件创建错误边界14. 避免数据结构突变15. 依赖优化Rea...
2021-08-18 16:54:33
449
原创 Chakra-UI【现代化 React UI 框架 Chakra-UI】
目录1. Chakra-UI 介绍2. Chakra-UI 快速开始3. Style Props 样式属性4. 主题1. Chakra-UI 介绍Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React 应用所需的UI组件. 文档: https://next.chakra-ui.com/docs/getting-startedChakra UI 内置 Emotion，是 CSS-IN-JS 解决方案的集大成者 基于...
2021-08-18 15:32:24
1159
原创 CSS-IN-JS【集成 CSS 代码在 JavaScript 文件】
目录1. 为什么会有 CSS-IN-JS2、CSS-IN-JS 介绍3、Emotion 库1. 为什么会有 CSS-IN-JSCSS-IN-JS 是 WEB 项目中将 CSS 代码捆绑在 JavaScript 代码中的解决方案. 这种方案旨在解决 CSS 的局限性, 例如缺乏动态功能, 作用域和可移植性2、CSS-IN-JS 介绍CSS-IN-JS ⽅案的优点：让 CSS 代码拥有独立的作⽤域, 阻止CSS 代码泄露到组件外部, 防止样式冲突...
2021-07-27 11:18:30
336
原创 Comopnent【受控组件与非受控组件的选用标准】
1、非受控组件表单数据交由DOM节点管理. 特点是表单数据在需要时进⾏获取. 代码实现相对简单2、受控组件表单数据交由state对象管理. 特点是可以实时得到表单数据. 代码相对复杂.3、选用标准总结: 受控组件和非受控组件都有其特点, 应该根据需求场进行选择. 在大多数情况下, 推荐使用受控组件处理表单数据。如果表单在数据交互方便比较简单, 使用非受控表单, 否则使用受控表单. ...
2021-07-23 13:56:23
104
原创 Formilk
1、Formilk 简介（1）介绍增强表单处理能力. 简化表单处理流程。[官⽹](https://jaredpalmer.com/formik/)[官⽹](https://jaredpalmer.com/formik/)[ 官网 (https://jaredpalmer.com/formik/)（2）下载 npm install formik npm install yum //表单验证2、Formilk 示例...
2021-07-22 14:00:53
411
原创 前端如何参与开源项目的开发？
项目资源：tornahttp://torna.cn/dev/#%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83准备环境下载和安装jdk ：https://blog.csdn.net/vimanas/article/details/89922539（参考博客） jdk 官网：https://www.oracle.com/cn/java/technologies/javase-downloads.html mysql安装：https://blog.cs...
2021-07-21 17:14:17
592
原创 React Hooks
React Hooks 介绍React Hooks 使用自定义React HooksReact 路由 HooksReact Hooks 原理分析React Hooks 介绍React Hooks 介绍1. React Hooks 介绍 2. React Hooks 使⽤ 3. ⾃定义Hook 4. React 路由Hooks 5. React Hooks 原理分析1. React Hooks 介绍 2. ...
2021-07-21 14:29:43
85
原创 将打包好的vue项目部署到nginx上
目录1、安装 nginx （我的虚拟机系统是 centos7）2、配置 nginx3、nginx 其他命令准备环境：购买一个虚拟服务器：https://www.ucloud.cn/site/active/lagou.html；准备好一个vue项目：我的项目资源（https://gitee.com/daisy_yangyang/fed-e-task-04-02）在虚拟机上安装 nginx1、安装 nginx （我的虚拟机系统是 centos7）（1）下载本地下...
2021-07-20 14:56:30
1936
3
原创 github 提交代码【针对开源项目如何提交自己的代码】
1、先 fork 相应的项目，相当于拷贝一份到自己的github账户下2、然后再clone 到本地分支，对bug做相应的修改git clone https://github.com/boot/boot.gitcd boot //进入到项目中git checkout -b test-pr //创建分支git add . //将所有修改的文件添加到本地库中git commit -m "...
2021-07-08 19:57:54
1202
原创 Fiber 问题集【react】
目录1.Fiber出现的目的是什么2.在Fiber出现之前React存在什么问题3.虚拟DOM是如何被转换为真实DOM的4.Fiber如何解决性能问题5.什么是Fiber6.Fiber的工作方式7.实现Fiber8.构建Fiber链表1.Fiber出现的目的是什么为了提高React渲染页面的效率，减少页面卡顿，提升用户体验。2.在Fiber出现之前React存在什么问题在Re...
2021-06-28 17:10:41
232
原创 Git报错：git@gitee.com: Permission denied (publickey).
原因：在本地(或服务器上)没有生成SSH公钥解决办法：（1）ssh-keygen -t rsa -C "xxxx3@163.com" 按回车键，会出现下面图示中的内容，不须要管出现的一些要输入的问题，一路回车便可，最终会生成SSH公钥。（若是从新生成的话会覆盖以前的SSH公钥）（2）ssh -v git@github.com出现这句英文就是成功啦（3）ssh-agent -s（4）ssh-add ~/.ssh/id_rsa...
2021-06-28 16:47:15
1217
1
原创 git push报错：error: failed to push some refs to ‘git@gitee.com:daisy_yangyang/fed-e-task-04-01.git‘
原因：git线上仓库中，线上线下的文件不同步解决办法 ：（1）git pull --rebase origin master 拉取线上仓库（2）git add .（3）git commit-m 'first-commit'（4）git push -u origin master（我这是第一次提交）...
2021-06-28 16:35:00
231
原创 前端性能测试工具之【WebPageTest】
介绍WebPageTest是一款非常专业的 Web 页面性能分析工具，它可以对检测分析的环境配置进行高度自定义化，内容包括测试节点的物理位置、设备型号、浏览器版本、网络条件和检测次数等，除此之外，它还提供了目标网站应用于竞品之间的性能比较，以及查看网络路由情况等多种维度下的测试工具。...
2021-06-04 16:51:19
799
原创 前端性能测试工具之【Lighthouse】
Lighthouse 直译过来是“灯塔”的意思，它是由 Google 开发并开源的一个 Web 性能测试工具。该性能检测工具以此命名也蕴涵了相同的含义，即通过监控和检测网站应用的各方面性能表现，来为开发者提供优化用户体验和网站性能的指导建议。准备参考：https://developer.chrome.com/docs/devtools/speed/get-started/git clone https://github.com/lipengzhou/salt-resolute-icecr.
2021-06-04 16:40:56
1680
1
原创 【js 代码面试题】
1、找出数组里元素最多的第二项题目：var array = ['aa','bb','bb','cc','cc',"cc"];思路1、遍历数组，将重复的冤死进行计数，村委对象；2、将每个元素的值放到新的数组中，通过 sort 将数组的元素进行排序；3、获取数组的第二个值，然后遍历循环对象，根据值与对象的匹配度，就可以找出出现元素最多的第二个值var array = ['aa','bb','bb','cc','cc',"cc"];//aa 1//bb 2//cc 3//思路/..
2021-05-17 17:45:48
163
原创 yarn 的安装理念及如何破解依赖管理困境
Yarn 安装机制检测（checking）→ 解析包（Resolving Packages） → 获取包（Fetching Packages）→ 链接包（Linking Packages）→ 构建包（Building Packages）检测包（checking）：检测项目中是否存在npm 相关文件，比如 package-lock.json 等。如果有，会提示用户注意：这些文件的存在可能会导致冲突。在这一步骤中，也会检查系统 OS、CPU 等信息。 解析包（Resolving Pac...
2021-05-07 17:04:09
465
原创 npm 内部机制的理解
目录npm 的安装机制和背后思想npm 缓存机制npm link ：在本地调试验证包的可用性npx 的作用搭建 npm 企业级部署私服npm 镜像问题配置参考文档：npm官方文档：https://docs.npmjs.com/cli/v7/commands/npm-init聊聊 NPM 镜像那些险象环生的坑：https://mp.weixin.qq.com/s/2ntKGIkR3Uiy9cQfITg2NQnpm link的使用：https://www.jiansh..
2021-05-07 15:38:34
545
原创 前端架构的发展
目录前端技术发展轨迹 现代化的前端技术架构前端技术发展轨迹现代化的前端技术架构从 CSR → SSR → NSR → ESR 渲染方案演进看前端架构演进方向CSR：Client Side Rendering 浏览端渲染 特点：实现了前后端架构分离，实现了前后端职责分离 TTFB（首字节时间 = TCP连接时间 + 发送 HTTP请求时间 + 获得响应消息第一个字节的时间）时间最小，但由于客户端和服务端会有多次交互（获取静态资源、获取数据）才能进行渲染，实际首屏效果以..
2021-05-07 11:29:35
250
3
原创 【2021 年前端复习之一】
前端性能优化经历的四个阶段第一阶段：库、框架的选型 第二阶段：简单的构建化（js/css 的压缩和合并） 第三阶段：js / css 模块化开发 js模块化方案：AMD、CMD、CommonJs、ES6Module； CSS模块化开发基本都是在less、sass、stylus等预处理器的import/mixin特性支持下实现的 第四阶段：组件化开发和资源管理参考文章：https://link.zhihu.com/?target=https%3A//github.com/foub...
2021-04-23 09:01:13
192
原创 Hash 和 History 模式
Hash和History模式的区别首先需要强调的是不管哪种模式都是客户端路由的实现方式，也就是当路径放生变化之后不会向服务器发送请求，是用js监视路径的变化的变化，然后根据不同的地址渲染不同的内容如果需要服务端内容的话，需要使用Ajax发送请求。表现形式的区别-Hash模式https://music.136.com/#/user?id=10029这种模式的地址中带有#号，#号后面就是路由地址可以使用？携带路由参数，官方文档中说这种模式很丑，路径中带...
2021-04-08 11:05:20
1544
原创 【Vue.js + Vuex + TypeScript 实战项目开发与项目优化】
创建项目：使用 Vue CLI 创建项目安装 Vue CLI：npm i -g @vue/cli vue create edu-boss-fedcd edu-boss-fed npm run serve加入Git版本管理创建远程仓库 将本地仓库推到线上 如果没有本地仓库： git init# 创建本地仓库 git add .# 将问件添加到暂存区 git commit -m "提交日志" #提交历史记录 git remote add or...
2021-03-31 13:38:27
503
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人