一些开发中的 ”填坑“ 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 port、redis-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
avatar
文章
阅读
粉丝