摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } .header label{ margin-right: 10px; } .header 阅读全文
pnpm+react-create-app 踩坑记录
2022-07-04 14:24 by muamaker, 2570 阅读, 0 推荐, 收藏, 编辑
摘要：一、创建项目 pnpm-workspace.yaml packages: - 'packages/*' package.json { "name": "pnpm-build", "version": "1.0.0", "description": "", "main": "index.js", "s 阅读全文
vue 的 store 响应式原理
2022-04-28 16:26 by muamaker, 455 阅读, 0 推荐, 收藏, 编辑
摘要：一、先看如下代码， 无论你点击多少次按钮，结果始终是 10 。 <template> <div class="about"> <button @click="onAdd">点击</button> <p>结果 {{count}}</p> </div> </template> <script> cons 阅读全文
js 前端使用 prettier格式化scss
2022-03-28 11:07 by muamaker, 848 阅读, 0 推荐, 收藏, 编辑
摘要：一、使用 prettier 插件，在纯前端 格式一些代码 参加 https://prettier.io/docs/en/browser.html 二、这里以 scss 为例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t 阅读全文
谷歌快捷登录本地开发报错
2021-08-16 18:05 by muamaker, 1350 阅读, 0 推荐, 收藏, 编辑
摘要：一、使用谷歌快捷登录，配置了 http://localhost:3000 进行本地开发，结果报错为： [GSI_LOGGER]: The given origin is not allowed for the given client ID. 后来发现，要填两种： 阅读全文
typescript 扩展 window 和 global
2021-07-09 18:30 by muamaker, 3435 阅读, 0 推荐, 收藏, 编辑
摘要：一、都是新建一个 custom.d.ts 二、前端： declare interface Window { FILE_CDN: string; FILE_HOST: string; API_SERVER: string; JAVA_API:string; } declare global { int 阅读全文
lerna 大前端项目代码重用解决方案
2021-05-31 16:49 by muamaker, 1690 阅读, 0 推荐, 收藏, 编辑
摘要：在 react 或者 vue 项目里面，目前来说代码或者组件的复用，一般采用三种方式。 1、自己手动配置 webpack ，使用 HtmlWebpackPlugin 构建多个入口项目，共享一些代码组件。 缺点：需要对 webpack 掌握较好，多个 HtmlWebpackPlugin 导致热更新 打 阅读全文
将create-react-app从javascript迁移到typescript
2021-05-21 17:05 by muamaker, 133 阅读, 0 推荐, 收藏, 编辑
摘要：一、删除全部的 node_modules 注意： 确保之前没有在目录下执行过 tsc --init。 如果执行过，删掉 tsconfig.json , src/ react-app-env.d.ts 这两个文件都删掉。没有更好。 二、安装模块 npm install --save typescrip 阅读全文
使用 React hooks 优雅解决 mp3 的播放 和 暂停
2021-05-13 12:12 by muamaker, 1153 阅读, 0 推荐, 收藏, 编辑
摘要：在class 组件中，我们需要在 componentDidMounted 里面给 mp3 加上监听，然后在 组件销毁的时候 去掉监听。 来控制 mp3 的播放和暂停。相对来说比较麻烦。难以抽离。 这里用 hooks 达到完全抽离的效果: interface IAudioProps extends R 阅读全文
React 代码 Import Svg as ReactComponent 失败
2021-05-09 18:06 by muamaker, 2600 阅读, 0 推荐, 收藏, 编辑
摘要：在 react 里面使用 svg 一、在 create-react-app 创建的项目中 方式 1、 import logo from './logo.svg'; <img src={logo} /> 缺点在于不能在修改颜色，这里其实就是直接用 img 加载了 svg 文件 方式 2、 import 阅读全文