Ocean_HL-CSDN博客

原创使用 npm create vue@3 报错 npm ERR! canceled

使用 npm create vue@3 创建 vue3 项目报 npm ERR canceled 错误

2022-10-24 22:10:42 2119 1

原创 vcode1.63调试js代码无法进入node源码

遇到的问题今天是元旦，早上给 vscode 升了一下级，调试 js 代码，进入 node 源码，发现无法进入 node 源码了，并且我已经把 "skipFiles" 配置注释了，如下代码所示。我以为是 vscode 按照的问题，我重新安装 vscode 了很多次，始终无法进入 node 源码，搞了一早上，搜了很多东西，解决方法与之前的类似，并且日期都太早了。{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问:

2022-01-01 11:34:55 901 3

原创 Express错误 ——TypeError: View is not a constructor

TypeError: View is not a constructor使用 art-template 模板时，遇到了一个坑错误原因因为 art-template 官方文档更新不及时，官网中的 api 示例太老。将 view 转换为 view options。解决方法app.set("view options", { debug: process.env.NODE_ENV !== "production",});...

2021-12-13 11:08:47 2023

原创 ts-react——“xx“ was also declared here.【声明错误】

问题描述解决方法沿着目录网上找 node_modules 目录，删除掉该目录即可

2021-12-06 10:40:54 1972

原创 CSS系列——行内块inline-block元素之间出现空白间隙原因及解决办法

行内块inline-block元素之间出现空白间隙原因及解决办法基本布局产生间隙的原因解决方法【7个】方法1：行内元素写在一行方法2：行内元素之间加上空白注释方法3：父元素的 `font-size` 设置为 `0`，子元素单独设置 `font-size`方法7：给父元素设置【负字符间距】或【负单词间距】，行内子元素再设置为 `0`基本布局 <div class="container clearfix"> <div class="item item1"></d

2021-11-29 10:32:28 1000

原创手写Vue系列 —— mini-vuex

手写迷你 Vuex第1步：使用 Store 类管理数据，使用 _state 【存储数据】，使用 _mutations 来存储数据修改的函数_state 和 _mutations 是 Store 的私有属性第2步：把 _state 变量包裹成【响应式数据–》ref / reactive】第4步：定义 install 方法，用于将 store 提供给 Vue 组件使用【通过 provide / inject 做数据共享】第5步：在 Store 类中定义 install 方法，用

2021-11-19 22:55:57 419

原创 tsconfig.json——某库的声明文件没找到——Cannot find type definition file for ‘babel__generator‘

解决方法一：手动指定编译器选项的 typeRoots 属性：{ "compilerOptions": { typeRoots: ["node_modules/@types"] }}解决方法二：开启编译器选项的 skipLibCheck 属性{ "compilerOptions": { "skipLibCheck": true }}

2021-10-20 11:20:22 9027

原创 tsconfig---开启importHelpers配置后报错：找不到tslib

开启importHelpers配置后报错：找不到tslib开启 importHelpers配置后，找不到 tslib原因分析解决方法开启 importHelpers配置后，找不到 tslib原因分析我的 tsconfig.json 配置信息是如下：{ "compilerOptions": { "target": "es5", "module": "amd", # 错误的地方 "outDir": "./lib", "rootDir": "./src",

2021-10-17 23:17:12 4539

原创 Node系列------pm2管理项目1------pm2运行ts文件

PM2运行ts文件原理需要先将 ts 文件编译成 js 文件，再用 pm2 运行编译后的 js 文件。因为 pm2 并不能完美兼容 ts-node ，会遇到各种问题。目录结构第一步：设置 tsconfig.json 配置文件最重要的就是设置 rootDir【编译的根目录】和 outDir【编译后的输出目录】这两个配置项。{ "compilerOptions": { "target": "es5", # 编译后的js版本 "module": "commonjs",

2021-09-30 17:41:09 2045

原创 Node系列------文件操作1------判断文件/目录是否存在

判断【目录/文件】是否存在 --> access/accessSync/existsSync1、异步方法 --> access【推荐】fs.access(path[, mode], (err) => void)2、同步方法 --> accessSync/existsSyncfs.existsSync(path: string): boolean【推荐】accessSync(path[, mode])【不推荐】3. access和existsSync各自最佳适用场景1、异步方法 -

2021-09-27 11:14:51 1764

原创 JS监听页面加载、刷新、关闭时触发的事件

页面加载时执行 unload() 事件。页面刷新时先执行 onbeforeload()，新页面即将替换旧页面时执行 onunload()，最后执行 unload() 。页面关闭时先执行 onbeforeload()，再执行 onunload()。

2021-09-26 15:04:09 5281 1

原创 WebStorem的重构功能使用

第一步：第二步：第三步：第四步：

2021-09-15 14:43:44 186

原创 Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?

问题：原因：因为首次加载时，并没有渲染 Form 组件，所以 antd 不知道 form 绑定到哪里。解决方法将 Drawer 组件上的 forceRender 属性设置为 true，表示预渲染 Drawer 内元素。

2021-09-14 15:55:53 589

原创 useHref() may be used only in the context of a ＜Router＞ component.

报错原因useHref() 只能在 <Router> 组件的上下文中使用。因为在 Router 组件外面使用了 Link 组件，所以导致报错。解决方法将其删除掉，因为该组件已经交给路由组件负责渲染了。

2021-09-09 10:04:25 8959 3

原创如何在typescript-react项目中使用emotion的css行内样式

css 行内样式支持选择符，伪类等高级操作第一步：在组件顶部导入 @emotion/react 下的所有运行时。/** @jsxImportSource @emotion/react */第二步：使用 css 属性/** @jsxImportSource @emotion/react */import React from 'react';const App:React.FC = () => { return <div css={{ backgroundColor:

2021-09-07 11:13:27 711

原创 React 的TS环境下使用 http-proxy-middleware配置代理

1. 安装 http-proxy-middlewareyarn add http-proxy-middleware -D2. 在 src 目录下创建 setupProxy.js 文件必须是 js 文件，不能是 ts 文件，否则不生效。src/setupProxy.jsconst { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { app.use(

2021-08-24 17:24:44 2173 1

原创 vue-router报Missing required param “id“错误

报错原因vue-router 报出错误，缺少必要参数 id，但是并没有报出那个路由缺少的参数。错误原因给 orderConfitmation 页面注册路由时设置了需要传 id 参数。使用 to 属性的【对象形式】进行跳转，并没有传递 params 属性。...

2021-08-14 09:24:03 6335

原创 react-ts中配置 css 模块类名的智能提示

1. 安装插件 typescript-plugin-css-modulesyarn add typescript-plugin-css-modules -D2. 配置tsconfig.json文件{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules", "options": { "customMatcher": "\\.(c|le||lle|sa|sc

2021-08-10 15:41:02 1475

原创关闭表单自动填充和自动填充密码

浏览器默认会开启表单的自动填充。1. 给整个表单设置禁用自动填充在 form 标签中，添加 autocomplete 属性，并且值为 off。<form method="post" action="/form" autocomplete="off">...</form>2. 给单独一个输入元素禁用自动填充在输入元素标签中，添加 autocomplete 属性，并且值为 off。<form method="post" action="/form">

2021-08-07 18:30:18 1438

原创 for...of与for...in在迭代对象属性上的区别

for…of循环for...of 循环需要配合 Object.keys(obj) 、Object.values(obj)、Object.entries(obj) 配合使用才能迭代对象。const objPrototype = { c: 3, d: 4,};const obj = Object.create(objPrototype);obj.a = 1;obj.b = 2; for (const key of Object.kes(obj) { co

2021-07-26 08:49:57 100

原创 CSS之transform的translate平移属性【2D】（一）

transform属性# 属性属性transform: translate/translateX translateY perspective translateZ;translate中文意思为平移，通过 X 轴，Y 轴来移动元素。translate(x, y)x，y 可设置为百分比值，代表着基于自身宽度/高度的百分比，<!DOCTYPE html><html lang="en"> <head> <meta chars

2021-07-14 21:56:19 6589 1

原创 body标签让其与浏览器视口一样高

利用vh单位实现body { display: flex; flex-direction: column; align-items: center; justify-content: center; /* 100vh让body的高度与视口一样高 */ height: 100vh; /* margin + overflow 用于隐藏 */ margin: 0; overflow: hidden;}...

2021-07-11 19:51:15 400

原创 CSS之vw,vh视口单位与%的区别

CSS中的vw,vh单位是什么？vw：浏览器可见视口【宽度】的百分比（1vw代表视窗【宽度】的1%）vh：浏览器可见视口【高度】的百分比（1vw代表视窗【高度】的1%）vmin：当前 vw 和 vh 较小的一个值。vmax：当前 vw 和 vh 中较大的一个值。注：视窗与可见视口是一个意思vw,vh与 % 的区别是什么？% 是基于【父元素】的宽度/高度的百分比，vw，vh是根据视窗的宽度/高度的百分比。视口单位优势在于【vh】能够直接获取高度，而用 % 在没有设置 body

2021-07-11 19:47:05 11290

原创 Node.js中zlib模块的压缩/解压详解

Nodejs 中压缩/解压方法详解brotliCompress/brotliDecompress： br【brotli】压缩算法。gzip/gunzip：标准的 gzip 压缩算法。delate/inflate：基于 Huffman 【哈夫曼】编码的标准 deflate 压缩算法。deflateRaw/inflateRaw：针对【原始缓冲区 Buffer 】的 deflate 压缩算法。unzip：【自动检测】头信息解压 gzip / deflate 压缩的**【流】**，针对的只是【基于Huff

2021-07-09 11:19:07 3269

原创 nodemon的强大，不止可以运行.js文件还可以运行.ts文件

全局安装ts-node 和 nodemonnpm i -g nodemon ts-node# or yarnyarn global add nodemon ts-nodenodemon运行.ts文件直接运行想要执行的命令，nodemon 会直接识别文件的后缀名，不止可以运行.ts 文件，还可以执行 .py 等文件。nodemon index.ts...

2021-07-08 20:02:04 1181

原创 vscode的Document This插件

Document This插件主要针对JavaScript 和 TypeScript 语言生成注释。光标放在函数名上，连续按两下 Ctrl + Alt + D。/** * @description * @param {number} x * @param {number} y * @return {*} {number} */function add(x: number, y: number): number { return x + y;}在 settings.jso

2021-07-07 21:55:49 8896 2

原创 webpack5配置多页面

1. 初始化项目npm init -y2. 安装需要的依赖yarn add -D webpack webpack-cli html-webapck-plugin3. 创建目录结构在 src 目录下创建三个不同的页面目录 page1，page2, page3，再在页面目录中依次创建 index.html，index.js 文件。node_modulessrc-| pages-----| page1---------| index.html---------| index.js---

2021-07-05 20:33:27 1112

原创 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

报错原因运行 npx webpack-dev-server 后报出 Error: Cannot find module 'webpack-cli/bin/config-yargs'原因分析本人的 webpack 版本为 5.41.0 ，webpack-dev-server 版本为 3.11.2，而 npx webpack-dev-server 命令只适用于 webpack 的 4.x 版本。需要使用最新的命令启动服务器。解决方法1. 将 webpack 回退到 4.x 版本此方法大家自行尝

2021-06-30 09:51:50 311

原创浏览器中base64与utf8相互转换

利用 encodeURIComponent/decodeURIComponent 和escape/unescape # 将 utf8 转为 base64 function utf8_to_b64( str ) { return window.btoa(unescape(encodeURIComponent( str ))); } # 将 base64 转为 utf8 function b64_to_utf8( str ) { return

2021-06-26 16:17:30 1041

原创 Next.js报错之 Error: connect ECONNREFUSED 127.0.0.1:80 【接口代理】

Error: connect ECONNREFUSED 127.0.0.1:80报错的完整代码import React from 'react';import PropTypes from 'prop-types';import axios from 'axios';const Index = props => { return <div>Index</div>;};Index.propTypes = {};Index.getInitialPr

2021-06-23 22:02:46 3857 2

原创创建github应用程序过程 + 获取OAuth授权过程

创建github应用过程2. 获取OAuth授权过程

2021-06-19 09:50:34 314

原创在Nextjs中使用Koa自定义服务器遇到的坑一 ------ 显示无限404

在Nextjs中使用Koa自定义服务器遇到的坑一 ------ 显示无限404想实现的功能路由映射失败问题代码问题分析2. 此时加上 `await next()` 让其继续执行后面的中间件3. 接着分析为什么还是失败？4. 知道了路由已经匹配到了，但是依旧没有显示a.js文件，接着分析错误。5. 分析总结解决方法想实现的功能在地址栏中输入/a/1，跳转到 Nextjs 的 a.js 文件。路由映射失败问题代码使用 koa 做 Nextjs 的路由映射遇到的问题，匹配到了 /a/:

2021-06-11 16:54:03 1341 1

原创 undefined ＜= undefined 等于 false，为什么？

undefined <= undefined 等于 false，为什么？undefined在比大小时会被转换 Number 类型，然而Number(undefined) = NaN，undefined进行比大小时参与比较的实际是 NaN1. NaNNaN <= NaN 为 false，所以undefined <= undefined 也为 false。2. < 或者 >比大小时，会将基本类型转换为 Number类型进行比较。3. ====会将基本类型转换

2021-06-08 10:44:46 1011

原创 JS生成26个英文字母

因为在字节码中26个英文字母的值是连续的A 对应的字节码是 65。const alphabet = Array.from(new Array(26), (ele, index) => { return String.fromCharCode(65 + index);})console.log(alphabet);打印结果(26) ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P"

2021-06-04 09:15:30 2833

原创 express解决请求体过大

设置limit属性，将限制的大小自定义# 解析 application/x-www-form-urlencoded【解析查询字符串格式参数】app.use(express.urlencoded({ extended: true, limit: '10000kb' }));# 解析 application/json【解析JSON格式参数】app.use(express.json({ limit: '10000kb' }));...

2021-06-03 11:17:33 1112

原创 nvm设置全局共享的npm版本

设置全局npm版本因为 nvm 管理不同的Node版本，每个Node版本对应一个 npm 版本，不能共享同一个npm，不同Node版本都需要安装一堆一样的包，所以需要有一个 npm 可以让各个版本的 Node 共用。【三步走】# 1. 配置npm下载包时的全局安装路径npm config set prefix "E:\Program Files\nvm_npm_global"# 2. 全局安装npmnpm install npm -g --registry=https://registry.

2021-06-02 10:34:49 2736 3

原创 React配置webpack多页应用打包失败,报错Cannot read property ‘filter’ of undefined解决方案

React多页配置，Cannot read property ‘filter’ of undefined错误分析配置好react多页应用后，yarn build打包运行, 控制台报错错误定位错误分析1. 打印 `entrypoints` 对象2. 为什么会没有 `main` 属性原来的`entry`属性修改后的 `entry` 属性错误原因解决方法配置好react多页应用后，yarn build打包运行, 控制台报错yarn buildnode scripts/build.jsCreating an

2021-06-02 09:45:53 859 1

mongodb-database-tools-windows-x86_64-100.3.1.zip

空空如也