- 博客(90)
- 收藏
- 关注
RSS订阅原创 Macbook 终端 git 命令补全和提示
自带的终端，用起来虽然有些不太方便，界面也不够友好，关键是在windows上用习惯了自动补全功能，在Mac上一个个的拼写单词是真的难受，逼着我记英文单词。经过一天的磨合，我实在忍不了，在网上查到了这个款终端工具，这是一款相对比较好用的终端工具。常用操作包括主题选择、声明高亮、自动填充建议、隐藏用户名和主机名、分屏效果等。这里主要介绍我使用的自动补全建议、声明高亮，另外几个功能，如果有需求，可以在中找到。
2023-08-12 21:35:42
1757
1
原创 macbook 安装 Git 和 安装 Homebrew
使用MacBook 时，需要拉取代码，我们需要使用到 Git，但 MacBook 中并没安装，这里我们分享一下安装过程。其他方式可查看中的方法。
2023-08-07 00:06:39
1685
原创 .env 环境变量使用，React项目中使用 .env.*等文件使用
一、公共环境变量二、环境变量(例如： 环境变量)在项目开发中，我们不可避免的会需要使用 环境变量，例如在定义接口 api 的 baseURL 时，会根据不同的环境，配置不同的根地址 baseURL。使用 命令创建的 react 项目，在使用 yarn run eject 命令将所有内建的配置暴露出来后，在 package.json 文件中，提供了一个 start 命令，和一个 build 命令，这两个命令在根据命令，可以在根目录的 scripts 文件夹下，找到 start.js、build.js
2023-06-20 11:23:50
2974
原创 Nginx 中部署 React 项目刷新或输入url后404
部署完 React 项目后，通过ip访问服务器，页面正常打开。在没修改url的情况下刷新，报 404。在url中拼接路由也同样报 404。
2023-06-15 15:22:20
1787
原创 linux服务器上，docker安装nginx
在浏览器访问主机（例如：192.168.124.182:9002），会看到nginx欢迎页，如果你是云服务器（云服务器公有 IPv4 地址，例如http://51.65.205.216:9000/），请记得开放对应的外网端口。-p 指定主机与容器内部的端口号映射关系，格式 -p [宿主机端口号]：[容器内部端口]，此处我使用了主机80端口，映射容器80端口。-p 指定主机与容器内部的端口号映射关系，格式 -p [宿主机端口号]：[容器内部端口]，此处我使用了主机80端口，映射容器80端口。
2023-06-14 17:02:08
2095
原创 docker 命令权限问题
这是因为你当前的用户没有这个权限。默认情况下，docker 命令会使用 Unix socket 与 Docker 引擎通讯。而只有 root 用户和 docker 组的用户才可以访问 Docker 引擎的 Unix socket。出于安全考虑，一般 Linux 系统上不会直接使用 root 用户。我们当前的用户不是root用户。使用 docker 命令时，出现了。在 docker 组中加入当前用户。在 docker 命令前加上。
2023-06-13 11:45:17
2582
2
原创 前端打包后生成的dist 或 build目录，如何在本地启动服务运行
运行，会打包后会产生dist或build目录一般情况下，直接打开dist 或 build 目录下的index.html会在浏览器看到内容。然而发现网页一片空白，打开了控制台，看到一片404的各种找不到资源，或者出现跨域的提示。
2023-02-02 10:46:56
8349
1
原创 react 项目模板搭建（1）—— 加入 less 、 sass
一、使用脚手架搭建项目基础npx create-react-app my-app创建后会得到一个基础的 react 项目文件，如果不需要加其他配置，可以直接使用二、Create-React-App的Webpack配置npm run eject如果需要增加特殊配置，可以在根目录下使用这个命令，工具会给出提示，提示eject为不可恢复操作，输入y或者y开头的单词，即可进行eject。eject后，会在目录下发现几个新增的目录 config，script。script的内容为脚手架自己生成的，不用
2021-09-10 11:12:24
1689
原创 HTML5 拖放 （Drag 和 Drop）笔记
HTML5 拖放 （Drag 和 Drop）W3Cschool----HTML5 拖放首先：为了把一个元素设置为可拖放，请把 draggable 属性设置为true然后，规定当元素被拖动时发生的事情。ondragstart 属性调用了一个 drag(event)函数，规定拖动什么数据。dataTransfer.setData() 方法设置被拖动数据的数据类型和值ondragover 事件规定被拖动的数据能够被放置到何处。默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种
2021-07-21 17:49:06
242
原创 JavaScript 千分位 货币格式化
Number.prototype.toLocaleString()toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串。新的 locales 和 options 参数让应用程序可以指定要进行格式转换的语言，并且定制函数的行为。在旧的实现中，会忽略 locales 和 options 参数，使用的语言环境和返回的字符串的形式完全取决于实现方式。语法格式：numObj.toLocaleString(locales, options:{})locales 可选。缩写语言代码，
2021-05-12 11:54:48
834
转载 Git 忽略规则 .gitignore
Git 忽略规则Git 忽略规则优先级在 .gitingore 文件中，每一行指定一个忽略规则，Git 检查忽略规则的时候有多个来源，它的优先级如下（由高到低）：从命令行中读取可用的忽略规则当前目录定义的规则父级目录定义的规则，依次递推$GIT_DIR/info/exclude 文件中定义的规则core.excludesfile中定义的全局规则Git 忽略规则匹配语法在 .gitignore 文件中，每一行的忽略规则的语法如下：空格不匹配任意文件，可作为分隔符，可用反斜杠转义#
2021-03-28 02:52:08
355
原创 学习笔记——Reflect 内置的对象
ReflectReflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。Reflect不是一个函数对象，因此它是不可构造的。描述与大多数全局对象不同Reflect并非一个构造函数，所以不能通过new运算符对其进行调用，或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的（就像Math对象）。Reflect 对象提供了以下静态方法，这些方法与proxy handler methods的命名相同.其
2021-03-22 10:44:50
300
原创 学习笔记——es2015 Proxy 对象
Proxy 对象响应代理器，可以监视到对象的读写过程const personProxy = new Proxy(person, {}第一个参数(person)是需要代理监听的对象，第二个参数为代理的处理对象，通过 get(){} 方法监听属性的读取访问， 通过 set(){} 方法监听对象中设置属性的过程get (target, property) {}第一个参数(target)是代理目标对象，第二个参数(property)是外部访问目标对象的属性名，返回值会成为外部访问该属性的返回
2021-03-20 23:38:06
307
2
原创 ECMAScript 2015（ES6）函数相关新特性（部分）
参数默认值// 默认参数一定是在形参列表的最后function foo (enable = true) { console.log('foo invoked - enable: ') console.log(enable)}foo(false)注意：默认参数一定是在形参列表的最后剩余参数// 原始方式使用 'arguments'// function foo () {// console.log(arguments)// }function foo (first,
2021-03-20 22:26:14
145
原创 模板字符串 以及部分字符串扩展方法（ECMAScript 2015（ES6））
模板字符串反引号包裹允许换行可以通过 ${} 插入表达式，表达式的执行结果将会输出到对应位置const msg = `hey, ${name} --- ${1 + 2} ---- ${Math.random()}`console.log(msg)带标签的模板字符串模板字符串的标签就是一个特殊的函数， 使用这个标签就是调用这个函数const name = 'tom'const gender = falsefunction myTagFunc (strings, name, gen
2021-03-20 21:42:43
151
原创 数组的解构、对象解构 （ECMAScript 2015（ES6））
es6 数组结构原始取值方式const arr = [100, 200, 300] const foo = arr[0] const bar = arr[1] const baz = arr[2] console.log(foo, bar, baz)结构方式const arr = [100, 200, 300]// 依次对应 const [foo, bar, baz] = arr console.log(foo, bar, baz)单独获取第三个，前两个位置用逗号’,'空出来
2021-03-20 20:56:42
408
原创 js 异步编程简介 笔记
采用单线程模式工作的原因JavaScript 采用单线程工作模式，因为JavaScript 最开始是用来在浏览器运行的脚本语言，是用来实现页面的动态交互，实现动态交互的核心是 DOM 操作，所以只能使用单线程模型，否侧会出现复杂的线程同步问题。单线程是指，js 执行环境中负责执行代码的线程只有一个这种模式最大的优势就是更安全，更简单。缺点也很明确，就是如果中间有一个特别耗时的任务，其他的任务就要等待很长的时间，出现假死的情况。JavaScript 将任务执行模式分成两种，同步模式（Synchron
2021-03-20 02:32:07
117
原创 模拟还原Promise部分功能 Promise核心逻辑实现
promise就是一个类在执行类的时候需要传递一个执行器进去，执行器会立即执行Promise中有三种状态，分别为成功-fulfilled 失败-rejected 等待-pendingpending -> fulfilledpending -> rejected一旦状态确定就不可更改resolve 和 reject函数是用来更改状态的resolve：fulfilledreject：rejectedthen方法内部做的事情就是判断状态如果状态是成功，调用成功回调函数如果状态..
2021-03-20 02:31:26
134
原创 函数式编程 笔记
什么是函数式编程函数式编程(Functional Programming, FP)，FP 是编程范式之一，我们常听说的编程范式还有面向过程编程、面向对象编程。面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象，通过封装、继承和多态来演示事物事件的联系函数式编程的思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）程序的本质：根据输入通过某种运算获得相应的输出，程序开发过程中会涉及很多有输入和输出的函数x -> f(联系、映射) ->
2021-03-15 12:03:57
150
原创 学习笔记——函数组合
纯函数和柯里化很容易写出洋葱代码 h(g(f(x)))函数组合可以让我们把细粒度的函数重新组合生成一个新的函数函数组合函数组合 (compose)：如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间过程的函数合并成一个函数函数就像是数据的管道，函数组合就是把这些管道连接起来，让数据穿过多个管道形成最终结果函数组合默认是从右到左执行fn = compose(f1, f2, f3)b = fn(a)// 组合函数function compose (f, g) {
2021-03-15 10:51:20
223
原创 学习笔记——函数柯里化 (Haskell Brooks Curry)
柯里化 (Haskell Brooks Curry)使用柯里化解决硬编码的问题案例：function checkAge (age) { let min = 18 return age >= min}// 普通纯函数function checkAge (min, age) { return age >= min}checkAge(18, 24)checkAge(18, 20)checkAge(20, 30)// 柯里化function checkAge (mi
2021-03-14 22:38:49
304
原创 学习笔记——纯函数
纯函数纯函数概念纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用纯函数就类似数学中的函数(用来描述输入和输出之间的关系)，y = f(x)lodash 是一个纯函数的功能库，提供了对数组、数字、对象、字符串、函数等操作的一些方法数组的 slice 和 splice 分别是：纯函数和不纯的函数slice 返回数组中的指定部分，不会改变原数组splice 对数组进行操作返回该数组，会改变原数组数式编程不会保留计算中间的结果，所以变量是不可变的（无状态的
2021-03-13 01:20:06
166
原创 学习笔记——高阶函数
高阶函数什么是高阶函数高阶函数 (Higher-order function)可以把函数作为参数传递给另一个函数可以把函数作为另一个函数的返回结果函数作为参数模拟 forEach// forEach function forEach (array, fn) { for (let i = 0; i < array.length; i++) { fn(array[i]) } }let arr = [1, 3, 4, 7, 8]forEach(arr, fun
2021-03-12 23:06:47
715
原创 快速捕获JS中常用的方法 博客链接
博客链接：一盏茶的时间，快速捕获JS中常用的方法（细心整理，持续更新ing）javascript篇–1.6万字带你回忆那些遗忘的JS知识点
2021-03-12 14:37:05
107
原创 git 切换远程地址 ssh登录错误ECDSA host key
开发时我们可能会遇到要切换项目远程地址的情况，使用 git 工具进行切换的方式如下：查看远程仓库：$ git remote -v添加远程仓库：$ git remote add [name] [url]删除远程仓库：$ git remote rm [name]修改远程仓库名称: $ git rename [old name] [new name]修改远程仓库：$ git remote set-url --push [name] [newUrl]$ git remote set-url --fet
2021-03-10 17:34:33
1614
原创 本地静态服务全局插件 serve插件 实现共享文件、文件夹
在工作中有局域网本地链接时，可以开启一个本地静态服务来实现共享文件、文件夹1. 将 serve 插件下载到全局$npm install -g serve2. 启动 serve 服务在需要共享的文件夹启动 serve 服务$serve
2021-03-10 11:52:38
627
原创 webpack dev server 开发模式自动编译
webpack-dev-server 是 Webpack 官方推出的一款开发工具，根据它的名字我们就应该知道，它提供了一个开发服务器，并且将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起。webpack-dev-server 的NPM地址：https://www.npmjs.com/package/webpack-dev-server1. 安装运行安装 webpack-dev-servernpm install webpack-dev-server --save-dev或y
2021-03-05 17:18:24
428
原创 win10 Shift + 右键 打开 CMD
新建一个文本文件，将一下文本复制到文件里Windows Registry Editor Version 5.00 [-HKEY_CLASSES_ROOT\Directory\Background\shell\runas] [HKEY_CLASSES_ROOT\Directory\Background\shell\runas]@="在此处打开命令行窗口(管理员)""Extended"="""HasLUAShield"="" [HKEY_CLASSES_ROOT\Directory\Ba
2021-03-02 18:00:53
137
原创 webpack 插件[plugins] 简单介绍
webpack 插件[plugins]loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。清理dist文件夹使用 np
2021-03-01 17:50:29
431
原创 webpack 编写自定义插件方式简单介绍
使用 webpack API 中的 compiler 钩子，可以在特定的时期进行操作compiler 钩子Compiler 模块是 webpack 的支柱引擎，它通过 CLI 或 Node API 传递的所有选项，创建出一个 compilation 实例。它扩展(extend)自 Tapable 类，以便注册和调用插件。大多数面向用户的插件首，会先在 Compiler 上注册。此模块会暴露在 webpack.Compiler，可以直接通过这种方式使用。关于更多信息，请查看这个示例。监听(watch
2021-03-01 17:40:31
440
原创 在 VScode 中设置 webpack 文件的智能提示
*在 VScode 中设置 webpack.config.js 文件的智能提示可以有效的帮助我们进行对应的属性配置在文件 webpack.config.js 中导入 Configuration 模块，通过类型注释的方式，将配置对象标注为该导入类型，这个类型就是webpack内部对配置对象的类型声明，之后再进行属性配置的时候就会有类型提示== 注意：==在运行webpack前要先注释掉 import { Configuration } from 'webpack' ，在 nodejs 中还不支持
2021-03-01 17:06:28
1515
原创 前端面试题100篇 链接
前端面试题100篇：https://www.html5iq.com/600fe22e9ab55c133a956711.html
2021-02-23 12:17:43
189
原创 在 umi 中使用 .sass .scss
根据umi官方文档介绍CSS 预处理器Umi 内置支持less，不支持sass 和 stylus，但如果有需求，可以通过 chainWebpack 配置或者 umi 插件的形式支持。在没配置之前，使用 .sass 、 .scss 会编译报错这里就提供umi插件的形式，使代码中可以使用.sass 、 .scss 文件步骤如下：首先安装 umi插件 @umijs/plugin-sassyarn add @umijs/plugin-sass注意：安装的必须是 @umijs/plugi
2021-02-04 18:08:26
1601
转载 前端mock解决方案实战
写在前面，本文阅读需要一定 Nodejs 的相关知识，因为会扩展 webpack 的相关功能，并且实现需要遵守一定约定和 Ajax封装。沉淀的脚手架也放到Github上供给同学参考React-Starter， 使用手册还没写完善， 整体思路和React还是Vue无关，如果对大家有收获记得Star下。它有这些功能：开发打包有不同配置eslint 验证代码风格统一commit 规范验证接口mock热更新异步组件Mock功能介绍市面上讲前端 mock 怎么做的文章很多，整体上阅读下来的没
2021-02-04 15:16:57
202
原创 umi 配置路由 独立路由文件
umi 配置路由根据 umi ，官方文档的介绍，项目的路由写在 .umirc.ts 文件里的 routes 数组中import { defineConfig } from 'umi';export default defineConfig({ nodeModulesTransform: { type: 'none', }, routes: [ { path: '/', component: '@/pages/index', name:'首页'}, ], fastR
2021-02-02 18:12:49
2157
1
原创 tsconfig.json 配置 update `jsx: “react“` into `jsx: “react-jsx“`终端警告
使用 umiJS 时出现的终端警告：WARN [WARN] update jsx: "react" into jsx: "react-jsx" to suport the new JSX transform in React 17 in tsconfig.json解决方法：确保 typescript 的依赖安装完成，随便打开一个提示错误的 .tsx 文件。macOS 使用 command + shift + p，Windows 貌似是 ctrl + shift + p。然后输入 TypeScri
2021-02-01 15:42:53
3661
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人