前端问题场景与解决方案

如何运行项目中的build文件夹(打包后的项目)

首先提醒我们要在package.json里面加上主页,接着就是全局安装serve:npm install -g serve

serve安装成功了以后,运行serve -s build 项目就启动起来了,它的固定端口是5000;那么我们想改动端口怎么办呢?运行下面的命令就可以用指定的端口启动项目了:

serve -l 2000 -s build //从2000端口启动项目

注意:Mac中如果提示写入权限问题,npm install -g serve写为 sudo npm install -g serve

store中的数据改变不能刷新页面问题

可能是mobx版本较高导致,试一下降低版本,比如:

"mobx": "^5.15.6",

"mobx-react": "^6.2.5",

 覆盖antd-mobile默认组件样式(以List去掉下划线为例)

在顶级css或者less文件中,index.less 中加入

.am-list-body::before{

    background-color: transparent!important;

}

.am-list-body::after{

    background-color: transparent!important;

}

.am-list-body {

    border-top: none;

    border-bottom: none;

}

.am-list-line::after{

    background-color: transparent!important;

}

.am-list-line {

    border-top: none;

    border-bottom: none

}

总结来说,就是提高覆盖样式的优先级,要么写在最顶层,要么用id来提高,最好加入!important

 

解决Ios14系统history.goBack()失效问题

 window.setTimeout(()=>{
    this.props.history.push('/list')
 },0);

 

取消Ios系统图片长按问题解决

img {

    -webkit-touch-callout: none;

}

 

 适配iPhonex等特殊机型样式

/* iphone X */

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

    .buttonWrapper {

        padding: 0.24rem 0 34px 0;

    }

}

/* iphone Xs Max */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {

    .buttonWrapper {

        padding: 0.24rem 0 34px 0;

    }

}

/* iphone XR */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {

    .buttonWrapper {

        padding: 0.24rem 0 34px 0;

    }

}

 

img标签,图像等比例展示样式代码

Object-fit: 'cover'

 

tab标签底下下划线样式改变 

.am-tabs-default-bar-underline {

    border: 0 !important;

    display: flex !important;

    justify-content: center !important;

}

 

.am-tabs-default-bar-underline::after {

    content: '' !important;

    width: 20% !important;

    height: 3px !important;

    display: block !important;

    background:#FFE7A9 !important;

    border-radius: 1.5px !important;

    margin-bottom:8px !important;

}

 

是否APP环境

export const isUplus =/apicloud|uphybrid|uplus/i.test(window.navigator.userAgent.toLowerCase());

gerrit合并代码冲突时解决

Git stash clear

//清除缓存区

Git stash

// 将未提交代码存到缓存区

Git pull

// 拉取最新代码

Git stash pop

// 释放缓存区,接下来接着处理

 

解决npm 莫名其妙报错的问题

删除node_modules文件夹

使用清除命令:npm cache clean --force

重新安装:npm install

 

flex布局中的justify-content:space-evenly可能出现不兼容的问题,导致都挤到左边,解决方案如下:

.light{

    width:90%;

    padding-top:70px;

    display:flex;

    -webkit-display:flex;

    align-items:center;

    justify-content: space-between;

}

.light:before, .light:after{

    content:'';

    display:block;

}

 

Mac系统如何显示隐藏文件夹

Command+Shift+. 可以显示隐藏文件、文件夹,再按一次,恢复隐藏;

 

Node和node-sass的版本存在绑定关系

前端问题场景与解决方案_第1张图片

 

前端问题场景与解决方案_第2张图片

 

node版本切换两种方式:

Node快速切换版本、版本回退(降级)、版本更新(升级)_node.js_脚本之家

  1. n

(1)安装node版本管理模块n

sudo npm install n -g

下边步骤请根据自己需要选择

(2)安装稳定版

sudo n stable

(3)安装最新版

sudo n latest

(4) 版本降级/升级

sudo n 版本号

(5)检测目前安装了哪些版本的node

 n 

(6)切换版本(不会删除已经安装的其他版本)

 n 版本号

(7)删除版本

sudo n rm 版本号

  1. nvm

1)启动终端,cd ~,随后输入

1

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash

2)创建.bash_profile:输入“touch .bash_profile”

3)编辑.bash_profile文件:输入“open .bash_profile”

4)在弹出的.bash_profile文件内增加

1

2

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

5)终端键入"command -v nvm",回车,如果输出了 “nvm”。代表已经安装成功。

6)命令

1

2

3

4

5

6

7

8

9

nvm install stable  //安装最新版 node

nvm install [node版本号]  //安装指定版本的node

nvm ls // 查看已安装版本

nvm use [node版本号]  //切换到指定版本的node

nvm alias default [node版本号] //设置默认版本

nvm使用详情可参考: GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

阴影

box-shadow:水平阴影位置(正值表示左侧,负值表示右侧) ,竖直阴影位置(正值表示上面,负值表示下面), 模糊距离, 阴影的大小, 内/外部阴影(inset从外边框向里面渲染,不写则表示从边框向外侧渲染), 阴影颜色

卡片效果:

boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'

 

uniapp中uni.showToast一闪而过问题

问题:在同时执行其他方法时,执行uni.showToast,即使代码中设置2000ms的显示时间,也会一闪而过。

解决:用setTimeout延后其他操作

前端问题场景与解决方案_第3张图片

小程序中区分当前平台并作为条件语句区分逻辑

// ifdef MP-WEIXIN

uni.navigateTo({url: detailsUrl})

// endif

 

// #ifdef MP-TOUTIAO

this.$util.goToWebview(detailsUrl)

// #endif

  

console.log的一些高大上用法

 

// WARNING
 console.warn("console.warn()");
// ERROR
console.error("console.error()");
// INFO
console.info("console.info()");

输出:

前端问题场景与解决方案_第4张图片

 

 

const dogs = [
  { name: "小海", age: 5 },
  { name: "小C", age: 2 },
  { name: "小S", age: 8 }];
 dogs.forEach((dog) => {
  console.group(`${dog.name}`);
  console.log(`这是${dog.name}`);
  console.log(`${dog.name}有${dog.age}岁了`);
  console.log(`${dog.name}年龄相当于人的${dog.age * 7}岁`);
  console.groupEnd(`${dog.name}`);
 });

 输出:

前端问题场景与解决方案_第5张图片

 

要获得相同的结果,作为折叠列表,只需要将console.group更改为console.groupCollapsed即可.

需要一个干净的控制台。你只需运行:

console.clear();

 

表格打印

Console.table()

 

使用 %c 占位符应用css效果

console.log(

    "This is %cMy stylish message",

    "color: yellow; font-style: italic; background-color: blue;padding: 2px"

);

 

 

console.log(`%c123%c456`,'color: blue;','color: green;')

 

v-if和v-show不生效问题

不生效原因:

因为有css属性diaplay:flex,flex权重比v-if与v-show,所以生效

解决方案:

 

 

​​​

持续补充ing……

你可能感兴趣的:(前端)