随笔分类 - 前端
摘要：安装 yarn add -D babel-plugin-styled-components; 配置：在vite.config.ts中配置plugin： plugins: [ react({ babel: { plugins: [ [ 'babel-plugin-styled-components',
阅读全文
摘要：安装 yarn add @tailwindcss/line-clamp 使用 在tailwind.config.js引入插件： module.exports = { /** 省略其他 */ plugins: [ require('@tailwindcss/line-clamp'), // 引入插件
阅读全文
摘要：环境 node、npm vite VS Code扩展： Headwind：脚本排序 Tailwind CSS IntelliSense： 代码提示 安装 1、通过vite创建react项目 yarn create vite react-project --template react-ts 2、初始
阅读全文
摘要：场景 向grid传入一个count字段，确定grid有多少行。 实现 难点一：由于我使用Typescript进行开发,按照官网示例编写代码,JSX中会提示没有与此调用匹配的重载，即TS不知道Button可以传参primary 难点二：我需要通过props的字段进行一次计算，并使用计算后的值作为rep
阅读全文
摘要：**注意：**以下方法只有在通过vite作为构建工具时，可以使用 场景 开发React Web项目时，在本地放了很多张图片，并且在组件中使用。 笨方法 import imgA from './images/a.png' <img src={imgA} alt=""> 当存在很多张图片时，一张张导入会
阅读全文
摘要：在vite.config.ts 中添加 **import { defineConfig } from 'vite' import reactRefresh from '@vitejs/plugin-react-refresh' // https://vitejs.dev/config/ export
阅读全文
摘要：const [searchDate, setSearchDate] = useState<any>({}) const searchFormList = useMemo<SearchFormItem[]>( () => { return [ { placeholder: '请选择日期', label
阅读全文
摘要：在JavaScript中，对一般类型判空，我会使用双叹号 "!!"一般用来将后面的表达式强制转换为布尔类型的数据（boolean），也就是只能是true或者false; const demo = null; if (!!demo) { console.log(true) }else { consol
阅读全文
摘要：场景 在开发前端过程中，在编写一些工具类的时候，不需要页面，所以想要通过node执行即可。 解决方案 解决方案有两个，一个是通过ts-node，一个是通过TS-ESNode库。 ts-node 网络上教程比较多。但不符合我的需要。因为我想尽可能少改动到待执行的文件。但通过ts-node的方法有一些问
阅读全文
摘要：React怎么配置使用less React暴露配置 yarn eject 安装less模块（注意less-loader的版本） yarn add less less-loader@6.2.0 -D 配置webpack.config.js 添加lessRegex变量 const cssRegex =
阅读全文
摘要：在根目录创建proxy.config.json文件，写入： { "/api": { "target": "http://yourIP:8888", "secure": false, "logLevel": "debug", "pathRewrite": { "^/api": "" } } } /ap
阅读全文
摘要：表现 先进入首页，再切换至二级路由是可以的，但在二级路由刷新浏览器，则会报错404 原因 通过 nginx 部署时，访问二路路由（如/check），会自动访问 /check/index.html 文件。 由于 React 是单页应用，所以在二级目录 /check 下没有对应的 index.html
阅读全文
摘要：使用 初学者开始可能会不清楚 Form.Item（需要设置 name 属性） 怎么获取子节点的值，这里说明一下： Form.Item 从子节点的 value 属性值获取，例子：input Form.Item 设置了 getValueProps 或 valuePropName 属性，比如设置了 val
阅读全文
摘要：> 原文链接：https://www.robinwieruch.de/react-testing-library 第一次翻译文章，可能会难以阅读，建议英文过关的都阅读原文 Kent C. Dodds的 React Testing Library (RTL) 是Airbnb的 Enzyme 的替代品
阅读全文
摘要：安装http-proxy-middleware yarn add -D http-proxy-middleware; 配置 在src文件夹下创建『setupProxy.js』文件，写入以下内容 const proxy = require('http-proxy-middleware'); // 注意
阅读全文
摘要：修改app.component.ts： @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], encapsulation:ViewEnc
阅读全文
摘要：安装npm 略 创建项目 npm init -y 安装typescript # ts-loader为webpack loader，clean-webpack-plugin copy-webpack-plugin为webpack插件 npm install --save-dev typescript
阅读全文