- 博客(286)
- 收藏
- 关注
RSS订阅原创 finalshell发布前端项目到阿里云
有个缺点就是lite-server命令行窗口一关闭服务就停止，所以建议用nginx服务。cd /usr/local/nginx/sbin，启动nginx服务器。用lite-server启动的项目端口是3000，要添加安全组，如下。cd /nginx执行./configure生成nginx文件。这个密码，finalshell连接服务器的时候要用到。也可以下载node，不用nginx。也可以解压到/usr/local。重启nginx web服务器。安装nginx前需要依赖。解压nginx压缩包。
2024-07-11 17:37:13
206
原创 umijs脚手架
这个问题其实是node与中端连接出错，无法初始化TTY（终端设备），可以用cmd命令行来创建umi项目。注意node版本的问题。
2024-06-17 14:28:13
170
原创 vue关于:deep穿透样式的理解
样式编译成.child .test_class[data-v-04d490df]了，这个样式为什么不能命中，因为data-v-04d490df属性只在类名为child的div上有。总结：父组件的只会给子组件的顶层元素加hash值，而子组件会给子组件的所有元素加自己的hash。css中也是只在child后面加hash，所以命中样式生效。父组件只给子组件的顶层元素加hash。去掉:deep看看什么情况。
2024-06-16 18:05:41
365
原创 flex:1给了我工作机会
今天就跟大家讲讲flex：1是什么的缩写，怎么去理解这个样式。首先要知道flex:1就是的缩写，首页要理解它们的作用，先看dom解构做项目时先看flex-basic。
2024-04-25 18:17:44
126
原创 mysql server 和mysql workBench的安装
选择性安装，只需安装server 和workBench,其中server是数据库，workBench是数据库的可视化。
2024-03-11 14:32:07
246
原创 forwardRef和useImperativeHandle的配合使用
useImperativeHandle往外暴露子组件的方法，注意useImperativeHandle第三个参数中括号依赖，有这个依赖，childFun才能获取到最新的值。通过ref调用子组件里的方法。
2024-03-07 17:52:59
212
原创 script的defer和async的理解
加了defer，结果跟场景一一样，所以defer对script标签内的代码不期待延迟执行的作用。script标签没有defer属性，不敢是不是通过src引入代码，结果一样。加了defer，获取到了div元素。js阻碍了dom元素的渲染。
2024-03-07 13:51:15
197
原创 typescript,eslint,prettier的引入
最后在tsconfig.json添加includes配置项，在该配置项中的目录下，所有的d.ts中的类型可以在这些目录下的其他文件引用。然后再tsc --init生成tsconfig.json配置文件，这个文件在package.json同级目录下。首先用npm安装typescript，cnpm i typescript。ts文件和d.ts文件都包含在src中。
2024-01-01 16:26:03
554
原创 umi预渲染
umi官网有预渲染，但是，是基于服务端渲染的，如果服务端渲染实现不了，那预渲染别谈，即使可以，但也不能指定路由渲染指定页面。在执行yarn build之后就可以渲染出about/indext.html页面。下面采用插件的形式实现。
2022-09-29 10:59:37
612
原创 umi2.x安装包有问题ERROR in ./node_modules/@ant-design/icons/es/icons/LoadingOutlined.js Module not found:
通过yarn create @umijs/umi-app创建的umi项目，在yarn安装完依赖包之后报了上图错误。
2022-09-10 16:25:43
1033
原创 umi配置实战
注意.umirc.local.ts是运行时配置，也就是在开发的时候使用的配置，在yarn build打包的时候，.umirc.local.ts里的配置是不生效的。1.yarn add eslint安装以来；1.在package.json中配置"webpack": “umi webpack”这是链式配置，想要查看配置是否正确，依旧执行yarn webpack查看配置结果。2.在命令行中输入yarn webpack，ctrl+f查看你配置的内容。子路由也是在routes中配置，子组件通过props获取。....
2022-08-23 14:03:21
356
原创 更新为win11后没有git bash
在shell中新建项git bash,在git bash中新建项command，双击右边窗口中的“默认”，填上git-bash.exe的路径，这时，打开任意文件夹，右键=》显示更多选项，就可以看到git bash,如果想要在任意文件夹中点击右键就可以直接看到git bash，如下。输入reg.exe add “HKCU\Software\Classes\CLSID{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32” /f /ve;...
2022-08-16 16:30:07
1064
原创 create react app怎么配置webpack
其中，style-resources-loader是支持less全局变量或者全局函数的，为了混入公共样式用的，mixins文件如下，自己可以封装一些公共less函数，供整个项目使用。执行命令npmruneject，把项目的webpack配置弹出来，执行完命令生成了以下文件。这样就可以自行配置webpack了。......
2022-07-27 16:19:25
1516
原创 svg弧线文本弧形文字
先看效果上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> *{ padding:0; margin:0; } text { font-size: 30px;
2022-05-22 13:43:00
872
原创 info There appears to be trouble with your network connection. Retrying...
用yarn下载依赖包的时候报错info There appears to be trouble with your network connection. Retrying...这个问题折腾了我一整天，网上有人说是镜像问题（用yarn config set registry https://registry.npm.taobao.org配置淘宝镜像），也有人说是权限问题（在win+x中用window powershell用管理员身份下载yarn），经过各种尝试,好多博主的方法都解决不了。自己用npm也
2022-03-15 12:52:56
2559
原创 js双等号==和三等号===
基本数据类型const a = 'malinshu'const b = 'malinshu'a === b // truea==b //trueconst num1 = 111const num2 = 111num1 == num2 // truenum1 === num2 // trueconst b1 = trueconst b2 = trueb1 == b2 // trueb1 === b2 // truenull === undefined //falsenull
2022-02-18 11:14:34
436
原创 chromedriver谷歌驱动与谷歌浏览器版本不匹配的问题自动化webdriver驱动
驱动下载地址：http://chromedriver.storage.googleapis.com/index.html下载完后放到系统盘（一般是C盘）下：
2022-01-16 16:27:14
883
原创 useRef和createRef的区别
function App() { const [num, setNum] = useState(0) const uRef = useRef() const cRef = createRef() const btnClk = () => { setNum((num) => num + 1) } useEffect(() => { uRef.current.value = num cRef.current.value = num con
2021-08-18 22:28:18
1748
原创 requestAnimationFrame无限循环pk定时器
requestAnimationFrame到底比起定时器来说有什么样的优势，大家不妨网上查阅一番，在次之前做个实践，定将大有收益，请看以下内容：let num = 0const run = () => { console.log('run') if (num % 60 === 0) { console.log(new Date()) } num += 1 requestAnimationFrame(run)}requestAnimationFrame(run)
2021-08-17 22:27:59
242
原创 react ref获取子组件中的input元素
function App(){ const myref = React.createRef() const Comp = React.forwardRef((props, ref) => (<div> <input ref={ref}/> </div>)) useEffect(() => { console.log(myref.current.value = 'malinshu') }, []) return(
2021-07-28 15:00:52
327
原创 input输入框默认背景
在chrome浏览器自动输入时，input就会有背景，字体大小和颜色都会变化，怎么解决？input:-webkit-autofill { transition: background-color 2000s;}input { -webkit-text-fill-color: #fff; caret-color:#fff;}
2021-07-22 19:28:11
578
原创 react-router-dom的基本使用
one和two是子路由import { BrowserRouter as Router, Switch, Route, Link, Redirect} from "react-router-dom";<Router> <ul> <li> <Link to="/">Home</Link> </li> <li> .
2021-07-06 17:53:59
141
原创 selenium webdriver怎么自动化操作已经打开的浏览器
为了满足这个需求我可是拜访了度娘好几个小时，也找不到满意的答案，刚才问了测试的朋友怎么实现，一下子有了答案，在此总结一下步骤1、首先在命令行中输入以下命令：chrome.exe --remote-debugging-port=9948 --user-data-dir=“D:\TestPy”其中端口9948已有的任意一个端口，可以在任务管理器里面找（ctrl+shift+esc）这时会在D:\TestPy中生成一系列文件（在这之前别忘了在环境变量中PATH里将chrome的路径添加进去，我的环
2021-07-04 16:48:03
1630
原创 CreateProcess error=2, 系统找不到指定的文件 pycharm运行错误
选择正确的选项，让python interpreter的路径为python x.x，然后点击ok保存就可以了
2021-07-03 23:15:57
1764
原创 react hook useCallback的使用
首先探索下useCallback是什么const callback = useCallback(() => { console.log('依赖只有count') }, [count]); <button onClick={() => console.log(callback)}> what is callback</button>当点击按钮的时候，控制台打印了一下内容由此看出，常量callback的值就是一个函数，函数里面的代码就是我们写在u.
2021-07-03 21:22:09
693
1
原创 react useContext跨层级组件传值
父组件import ContextComp,{TestContext} from './components/ContextComp'function App(){ const showName = (name) => { console.log(name) } const ItemComp = () => { const {name} = React.useContext(TestContext) return <div onClick={().
2021-06-21 17:49:43
415
3
原创 async await等待的是不是promise的区别
场景一const waitForYou = () => { return new Promise((resolve,reject)=>{ resolve(1) }) } const trigger = async () => { let res = await waitForYou() console.log('执行了吗', res) } return ( <div className="App">
2021-06-20 11:00:23
781
原创 mobx computed
场景一@observable person = { name:'malinshu', high:180}@action setName = (value) => { this.person.name = value}@computed get getHigh(){ let {high} = this.person console.log(high) return high}<input onChange={(e) => { m
2021-06-20 10:45:56
667
原创 最全的react-json-view用法
let my_important_json = { name:'malinshu', tall:171, other:{ pant:true, arr:[1,2,3,4] } }<ReactJson collapsed={false}//是否收起,true为收起 indentWidth={10}//缩进 iconStyle='circle' src={my_important_json}.
2021-05-24 13:52:18
3771
1
原创 react函数组件的生命周期
import { useEffect } from 'react'function FunComponent() { useEffect(()=>{ return ()=>{ console.log("WillUnmount") } }) useEffect(()=>{ console.log("DidMount") },[]) return ( <d
2021-05-09 18:13:43
5055
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人