logo
publist
写文章

简介

该用户还未填写简介

擅长的技术栈

可提供的服务

暂无可提供的服务

聊聊前端框架中的process.env,env的来源及优先级(next.js、vue-cli、vite)

在env文件中通过键=值的方式定义环境变量,需要注意的是,不同的框架在定义环境变量时可能需要键以规定的前缀开头,才能在客户端使用,具体前缀可以查看所使用框架对应官网。如:在nextjs中以EXT_PUBLIC_开头的环境变量才能在在浏览器中使用(在服务端没有这个限制)

文章图片
#前端框架
vscode调试nextjs前端后端程序、nextjs api接口

最近有一个项目使用了nextjs框架,并且使用nextjs同时实现了前后端,由于之前前后端都是分离的,前端的调试可以通过在代码种添加debugger或者直接在浏览器中打断点实现,现在想调试后端接口,前面的方式就不适用了。故研究了如何适用vscode在本地调试。

文章图片
#vscode#前端#ide
git push后一直卡在在Writing objects:问题

一般设置后就可以成功了,后面不用看。在执行git push。

文章图片
#git
react 使用stateHook如何在state字段更新后执行副作用(Effect Hook)

场景:在更新了state中的字段A后需要调用一个更新数据的方法getData,此方法需要使用字段A的值,如何保证getData方法拿到的A是最新的。如果不使用Hook,则可以1.使用this.setState()传递两个参数,一是更新state的对象或者函数,二是state设置生效后需要执行的副作用。2.在生命周期componentDidUpdate中监听A字段的变化this.setState({

react + antd, ant-table中数据为异步加载时默认展开所有行的实现

实现效果:异步加载数据完成后展开所有的行:1.defaultExpandAllRows属性默认展开所有行,但是该属性只在第一次render的时候生效,所以异步加载的数据无法实现默认展开2.使用expandedRowKeys属性及onExpandedRowsChange方法:完整代码:import React, { Component } from "react";import { Table }

vscode配置eslint,实现文件保存使用eslint格式化,问题1.扩展名‘eslint‘被配置为格式化程序,但它无法格式化’JavaScript‘文件。2.eslint命令无法执行

当项目中使用了eslint时,如果保存时不使用eslint格式化,运行时可能会由于个人编码习惯出现很多问题,所以期望在保存时能够自动根据eslint配置格式化文档。eslint 配置完成后始终不生效问题首先说一下eslint配置完后,始终不生效的问题,我之前使用的多模块项目,每个模块独立,但是始终有一个模块的eslint不生效,把模块内容复制到其他模块或新建模块都ok。最终解决:重启eslint。

文章图片
#vscode
react报错Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185

报错内容如下:看看是不是在componentDidUpdate钩子函数中调用了this.setState()方法,导致componentDidUpdate陷入死循环最初的代码如下:componentDidUpdate(preProps) {this.setState({start: this.props.startend:this.props.end})}解决:在se

html设置阻止网页在google浏览器中打开时弹出自动翻译框

想要阻止网页打开时弹出上面的翻译窗口,有两种设置方式:1.(建议)在html文件的head标签中添加meta标签:<meta name="google" content="notranslate" />2.设置html标签lang属性为zh-CN(简体中文)<html lang="zh-CN">...

#html
使用antv x6注册vue组件报错,TypeError: Object(...) is not a function (teleport.js:3:23)

即模块会使用全局引入的vue,问题就出在全局引入的vue是2.6.14版本,但是模块中使用的是2.7.10的版本。vu-demi安装时是和模块的vue版本对应的,固出现了vue-demi版本和项目实际使用版本不一致的情况。由于项目在index.html中通过本地引入的方式引入了vue.min.js(2.6.14),然后在模块下使用了配置。解决:将全局版本和模块package.json中定义的版本保

文章图片
#vue.js
echarts热力图,视觉映射组件visualMap的type为连续性continuous时,映射数据精确度的控制

echarts案例的效果为:手柄移入色阶组件,显示值约等于5,上方图表值为5的数据为高亮状态复制案例,使用温度作为数据值,得到的结果:可以看到手柄上方显示约等于-3.8但是从-2.2到-6.7的数据都为高亮状态,匹配精确度在正负3左右了想要提高匹配的精确度有两种方法:1.色阶对应的最大值和最小值不要设置太大,但是这个最大最小值一般不是固定的。2.增加色阶组件的长度:设置visualMap中的ite

#echarts
    共 25 条
  • 1
  • 2
  • 3
  • 请选择