一些开发中的 ”填坑“ TIPS(不断更新)~

2,091 阅读6分钟

翻到之前记笔记的小本本,发现一些之前记录的“坑”,开发不就是个填坑的日常嘛,从这里开始记录一些我遇到的坑及其解决方案和一些开发技巧,权当作为笔记记下啦~

Google 搜索高级技巧

对于一些英语不太好,但是又想搜到高质量结果的同学,Google 没有提供比较便捷、智能化的搜索结果筛选工具,所以只能我们自己在URL上加一些搜索参数了。

hl & lr 搜索中文结果

  1. 方法1:只是某次搜索结果显示中文结果:在地址栏后面加一个: &lr=lang_zh-CN

想指定多种语言,可以用|分割,比如:&lr=lang_zh-CN|lang_en,搜索中英文结果。也可以加上一个hl(界面语言)

  • 快捷指令:
    • 中文结果:&hl=zh-CN&lr=lang_zh-CN
    • 英文结果:&hl=en&lr=lang_en
    • 中英文结果:&hl=zh-CN|en&lr=lang_zh-CN|lang_en

image.png

附一些常用国家的代号:

# lr 常用
lr=lang_zh-CN Chinese (Simplified)
lr=lang_zh-TW Chinese (Traditional)
lr=lang_en    English

# hl 常用
hl=zh-CN       Chinese (Simplified)
hl=zh-TW       Chinese (Traditional)
hl=en          English

还可以页面指定的国家: cr=country,例如:www.google.com/search?q=vilnius&cr=countryLT

  1. 方法2:总是希望搜索出中文结果,那就需要再搜索结果中指定了:传送门

image.png

site: - 搜索特定网站的内容

比如我只想搜索 "掘金中nestjs相关" 的内容,那就加上 site:juejin.cn

需要注意 site: 后面紧贴搜索关键词,不要有空格,否则无效。

image.png

filetype: - 搜索特定文件格式的内容

在使用文件类型:搜索操作符和关键字时,返回结果将仅限于包含关键字的特定文件类型。这个在搜索一些书的时候特别有用。

注意:使用 ext: 也可以,返回相同的结果。

image.png

文件类型包括:

  • SWF
  • PDF
  • PS
  • DWF
  • KML, KMZ
  • GPX
  • HWP
  • HTML
  • XLS, XLSX
  • PPT, PPTX
  • DOC, DOCX
  • ODP
  • ODS
  • ODT
  • RTF
  • SVG
  • TEXT
  • TXT, 
  • BAS
  • C, CC, CPP, CXX, H, HPP
  • CS
  • JAVA
  • PL
  • PY
  • WML, WAP
  • XML

React 相关

styled-components

1、props 类型

typescript 项目中肯定会遇到传递 props 的情况,这时候就需要在定义组件样式的时候也定义传入的 props 类型。

const ContentWrapper = styled(Content)<{ collapsed: boolean }>`
  padding: 68px 30px 30px 30px;
  margin-left: ${({ collapsed }) => (collapsed ? '48px' : '200px')};
  overflow-y: scroll;
`;

2、boolean props 引发的控制台警告

这个警告虽然并不真正影响页面,但是每次打开控制台看到这个还是很烦的。

image.png

控制台警告:

If you want to write it to the DOM, pass a string instead: collapsed="false" or collapsed={value.toString()}.

解决办法:

const ContentWrapper = styled(Content)<{ $collapsed: boolean }>`
  padding: 68px 30px 30px 30px;
  margin-left: ${({ $collapsed }) => ($collapsed ? '48px' : '200px')};
  overflow-y: scroll;
  
  ${({ $collapsed }) => $collapsed && `
    background: blue;
  `}
`;

 return (
    <ContentWrapper $collapsed={collapsed}>
      <Outlet />
    </ContentWrapper>
  );

这在官方网站有说明:传送门,不过需要注意的是,这是在 v5.1 版本才加入的。

目的:如果你想防止旨在被样式化组件消耗的 props 被传递给底层的 React 节点或渲染到DOM元素,你可以在道具名称前加上美元符号($),把它变成一个瞬时的 props

Vue 相关

找不到模块“@/views/elements.vue”或其相应的类型声明

image.png

报错原因:typescript 只能理解 .ts 文件,无法理解 .vue文件

解决方法:

1、在项目根目录或 src 文件夹下创建一个后缀为 .d.ts 的文件,并写入以下内容:

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

2、也可执行下面的命令

npm i –save-dev @types/node

vite 打包报错/告警

element-plus 的 index.css 文件包含 @chartset:UTF-8

“@charset” must be the first rule in the file }@charset “UTF-8”;

vite.config.js 里面,加一个 sass/less 的配置,把 charset 关掉就行了

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        charset: false
      }
    }
  }
})

Mac 相关

Mac刷新DNS,修改/etc/hosts立即生效

电脑是Mac,然后需要刷新DNS。也就是修改 hosts 文件使其立刻生效。

网上查了几个教程,都是下面这个命令:

sudo killall -HUP mDNSResponder

当然,不同的MacOS版本可能命令不同,但是试了之后还是不行。比如,执行命令前 ping 一个域名是 192.168.152.1,执行命令后还是192.168.152.1,这种应该就是没有刷新成功。

试了几个命令,也不行。看网上还有有替换hosts文件的、有重启机器、清除缓存的,我都没成功。

我也不是太懂这里面的东西,最后是直接修改 /etc/hosts 文件,随便加了点东西,最后保存。然后再ping一下,发现成功了。

sudo vi /etc/hosts
# 随便加点内容,然后保存
:wq
# 再去 ping 域名

就觉得挺诡异的,很折腾。随便记录一下,有遇到类似问题的可以试试,虽然这种办法简单的令人发指,甚至有些沙雕,哈哈哈。

解决 mac 下每次 git pull/push 都需要输入密码的问题

每次 git pull/push 都要求输入用户名和密码。这个有些麻烦了。

解决方法是:保存一下用户本地凭证,这样每次git操作时,使用保存的凭证就好了。

全局

git config --global credential.helper store

git config --global user.email "email"
git confgi --global user.name "name"

在多个项目,不同的git服务器,不同用户名时,对每个项目设置各自的local 配置。

项目

git config --local credential.helper store

git config --local user.email "email"
git confgi --local user.name "name"

然后,再次 pull,push 时,输入了用户名和密码后,就保存下来了,以后就不会再要求输入了。


但是对我的mac并不管用,这是为什么呢?

首先本身项目是走ssh克隆下来的,之前也配置过密钥。按理来说不应该出现这样的问题,在日常开发过程中突然需要我输入密码?(小朋友你是否有很多问号)。

在经过多方面资料查找与解决方案尝试后终于找到了原因,背后的黑手是系统升级了… 在升级为macOS catlina后 ssh的代理就被自动清除了,所以重新添加一下就好了。

  1. 首先执行 ssh-add -L,若跟我一样的话控制台应该会显示如下;
$ ssh-add -L
The agent has no identities.
  1. 再执行一次ssh-add 输入密码就好了,成功后会展示你本机的ssh密钥地址;
  2. 再次执行git命令则无需输入密码了。

image.png

查看端口占用情况

命令 lsof -i tcp:port (port替换成端口号,比如6379)可以查看该端口被什么程序占用,并显示PID,方便 KILL(kill pid)

  1. 查看端口被哪个程序占用

    • sudo lsof -i tcp:port:如:sudo lsof -i tcp:8082
  2. 看到进程的PID,可以将进程杀死。

    • sudo kill -9 PID:如:sudo kill -9 3210

Go 相关

Go 包代理问题

新手在玩go的时候 编译或者安装插件的时候会提示:

image.png

解决方法:改成我们国内可用的代理地址

在命令提示符输入: go env -w GOPROXY=https://goproxy.cn

然后再做各种操作就可以成功了。

Redis 常规操作

查看安装及配置文件位置

  • Homebrew 安装的软件会默认在/usr/local/Cellar/路径下

  • redis 的配置文件redis.conf存放在/usr/local/etc路径下

  • 启动redis服务

    1. 方式一:brew services start redis (重启用restart)
    2. 方式二:redis-server /usr/local/etc/redis.conf
  • 查看redis服务进程:ps aux | grep redis

  • 启动redis客户端:redis-cli

  • 连接redis客户端:redis-cli -h host -p portredis-cli -h 127.0.0.1 -p 6379

  • 关闭redis客户端:redis-cli shutdown

  • 强行终止:sudo pkill redis-server

Docker

在 build 镜像的时候出现:

failed to solve with frontend dockerfile.v0: failed to create LLB definition: unexpected status code [manifests latest]: 403 Forbidden

解决方案:

image.png

Mysql

登录

  • 打开 Terminal
  • 输入:mysql -uroot -p
  • 输入密码(输入时不显示)
  • 登录成功
Welcome to the MySQL monitor.  Commands end with ; or \g.

Your MySQL connection id is 55

Server version: 8.0.15 MySQL Community Server - GPL

重置密码

  • 使用mysql数据库:use mysql;
  • 将密码清空:update user set authentication_string='' where user='root';
  • 刷新:flush privileges;

设置密码

  • 将密码设置为“123456”:ALTER user 'root'@'localhost' IDENTIFIED BY '123456';
  • 刷新:flush privileges;
  • 退出mysql:quit;
  • 退出Terminal:exit