FengZi_00的博客

git commit 提交规范

FengZi_00 — Sat, 14 Oct 2023 16:25:27 +0800

如果影响的是某个目录或某个功能，可以加上该目录的路径，或者对应的功能名称。chore 的中文翻译为日常事务、例行工作，顾名思义，即不在其他 commit 类型中的修改，都可以用 chore 表示。commit 影响的范围, 比如: route, component, utils, build...如果修复的这个BUG只影响当前修改的文件，可不加范围。如果影响的范围比较大，要加上范围描述。一些备注, 通常是 BREAKING CHANGE 或修复的 bug 的链接.commit 的概述。

pc网页等比缩放至手机端

FengZi_00 — Sat, 14 Oct 2023 14:37:07 +0800

【代码】pc网页等比缩放至手机端。

react-router-dom“: “v6“新版本react路由使用方法

FengZi_00 — Fri, 24 Dec 2021 15:06:04 +0800

react 导入 react-router-dom引入Switch报 ‘Switch‘ is not exported from ‘react-router-dom‘ react-router-dom从V5升级到V6后，有些使用做了一些改变：重命名为。的新特性变更。嵌套路由变得更简单。用useNavigate代替useHistory。新钩子useRoutes代替react-router-conf.

vue项目：输入电话号码，自动按3-4-4分割

FengZi_00 — Mon, 01 Nov 2021 14:24:57 +0800

主要思路：监听事件，每次号码发生改变时触发大体的逻辑是：先比较号码变化前后的长度，判断是输入还是删除，如果是输入的话，利用正则表达式改变号码格式。废话不多，上代码： html: vue侦听器代码： watch: { phone(newValue

React中使用Typescript时引入第三方依赖包报错：无法找到模块

FengZi_00 — Wed, 15 Sep 2021 18:47:26 +0800

下面我拿react-router-dom库做例子解决办法有两种：方法一：安装库的TypeScript声明文件方法二：添加自己写库的TypeScript类型声明在方法一可行的情况下，推荐使用方法一，但是不是所有库都有 TypeScript 的声明文件，所以方法一无效才用方法二。方法一：根据报错提示哪个库缺TypeScript声明文件安装对应的就是了(建议用淘宝镜像快点) npm install -D @types/库的名字举个例子：npm inst..

React中实现按品牌首字母实现右侧导航

FengZi_00 — Tue, 14 Sep 2021 19:21:31 +0800

先看一下最终效果直接上代码 html

{/* 显示字母 */}

{this.state.showLetter_text} <.

React项目，从详情页返回列表页时，保存数据并返回到原来的位置

FengZi_00 — Tue, 07 Sep 2021 20:23:15 +0800

移动端开发时会遇到在列表页点击进入详情，返回后列表页刷新的情况，对用户体验很不友好。解决方案：使用 react-keeper 完成路由的分配，以及页面组件的缓存 react-keeper 详情参考：https://blog.youkuaiyun.com/qq_37942845/article/details/104694966 1、下载相关依赖项 npm install react-keeper -s 2、app.js中相关配置原来我们app.js中设置路由 import { .

React 配置路由

FengZi_00 — Thu, 02 Sep 2021 16:12:00 +0800

1、下载相关依赖 npm ireact-router-config -s npm i react-router-dom -s 2、index.js中引入 importReactDOMfrom'react-dom'; import{HashRouterasRouter}from'react-router-dom' 3、app.js中引入 import{Link}from'react-router-dom' import{renderRo...

React中配置反向代理

FengZi_00 — Wed, 01 Sep 2021 17:13:20 +0800

1、下载相关依赖 cnpm i http-proxy-middleware --save -dev 2、在src目录下新建setupProxy.js 的文件 3、然后在setupProxy.js写如下代码（2020-6-23日下载的版本） const { createProxyMiddleware } = require('http-proxy-middleware') module.exports = function (app) { app.use(createProxyM...

Vue脚手架和React脚手架，二次封装axios

FengZi_00 — Wed, 01 Sep 2021 17:01:44 +0800

1、src文件夹下新建api文件夹 2、api文件文件夹中新建index.js文件和request.js文件 3、request文件相关配置 importaxiosfrom"axios"; exportconstService=axios.create({ timeout:3000,//延迟时间 method:'POST', headers:{ "content-Type":"application/x-www-...

React 脚手架配置Ant Design Mobile后导致px转rem失效问题及配置文件别名失效问题的解决办法

FengZi_00 — Wed, 01 Sep 2021 16:28:42 +0800

1、Ant Design Mobile中文文档 2、安装 npm install react-app-rewired customize-cra --save-dev 3、：打开 package.json ，找见scripts 直接全部替换 /* package.json */ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test":...

React 配置px转rem

FengZi_00 — Wed, 01 Sep 2021 16:13:30 +0800

1、npm run eject 暴露配置文件由于react默认隐藏webpack配置需要手动显示。首先执行命令显示webpack配置执行命令：npm run eject 将config文件夹显示出来！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下 git add . git commit -m '自定义名' npm run eject 2、安装 npm install lib-flexible postcss-pxtorem -S ...

React脚手架中配置less

FengZi_00 — Wed, 01 Sep 2021 13:22:14 +0800

1、npm run eject 暴露webpack配置文件！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下 git add . git commit -m '自定义名' npm run eject 2、npm i less less-loader-s 安装相关依赖 3、修改 webpack 配置第一步：在webpack.config.js文件中找到如下代码，在sassModuleRegex后面加上lessRegex和lessModul...

vue cli3.x 项目中引入 less 全局变量

FengZi_00 — Mon, 09 Aug 2021 10:43:11 +0800

1、安装 style-resources-loader，并选择想要使用的语言（本项目中使用less） vue add style-resources-loader 安装完成后，style-resources-loader 和 vue-cli-plugin-style-resources-loader 会被自动添加到 package.json 的开发环境依赖；并且会在 vue.config.js 中生成如下配置。 2、配置 vue.config.js // vue.config...

vue-cli使用px转rem

FengZi_00 — Mon, 09 Aug 2021 10:22:11 +0800

1.安装插件（1）安装px2rem-loader(devDependencies) npm install px2rem-loader --save-dev （2）移动端适配解决npm包 "lib-flexible" (dependencies) npm install lib-flexible --save （3）main.js中引入 "lib-flexible" import 'lib-flexible' // 移动端适配 (目录: hello-world/src/main.js)