MAC自带的终端不是很好用，还是iTerm用的舒服

安装iTerm2

• 进入iTerm官方网站：https://iterm2.com 下载zip压缩包，将其解压后挪到application目录下即可完成安装；
• 或者用Homebrew安装：打开电脑终端，命令行输入如下命令回车：

  1	brew install iTerm2

安装插件

安装oh-my-zsh和zsh-autosuggestion

安装oh-my-zsh

设置oh-my-zsh为默认shell，使用curl进行安装

1

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

输入如下命令，可以查看当前默认的shelll

1

echo $SHELL

安装zsh-autosuggestions

这是一个自动补全的插件，会自动根据输字符后出现之前的记录，按向右键确定

1

git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

• 编辑~/.zshrc文件
  找到plugins=(git)这一行，然后再添加autosuggestions，最后为：

  1	plugins=(git zsh-autosuggestions)

  重新打开命令行，当然你也可以source ./zshrc更新下你的zsh，这样你就可以使用oh-my-zsh的同时享受到autosuggestions带来的便利了.

iterm2快捷键

iTerm2 快捷键大全

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

command + enter 进入与返回全屏模式
command + t 新建标签
command + w 关闭标签
command + 数字 command + 左右方向键    切换标签
command + enter 切换全屏
command + f 查找
command + d 水平分屏
command + shift + d 垂直分屏
command + option + 方向键 command + [ 或 command + ]    切换屏幕
command + ; 查看历史命令
command + shift + h 查看剪贴板历史
ctrl + u    清除当前行
ctrl + l    清屏
ctrl + a    到行首
ctrl + e    到行尾
ctrl + f/b  前进后退
ctrl + p    上一条命令
ctrl + r    搜索命令历史

安装出错情况

• 安装oh-my-zsh时报错：

  1	curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused

  是 raw.githubusercontent.com 这个域名ping不通，解决办法就是找到对应IP，改MAC的HOST；
  先去网站查询域名对应的IP地址：https://www.ipaddress.com/ 或者这个网站查 https://dnsdblookup.com/
  打开Finder，点击工具栏：前往-前往文件夹-输入 “/etc”，直接改不了hosts文件，复制hosts出来，记事本打开，在最后一行加上下面代码（这个IP是我查出来的），改好后覆盖掉etc里的hosts，会提示输入开机密码

  1	185.199.109.133 raw.githubusercontent.com

• 安装zsh-autosuggestions时报错，拉不了github代码，明明github官网能打开就是拉不了代码；
  原因：
  需要用https才能读到数据
  解决方法：输入命令

  1	git config --global url."https://github.com".insteadOf git://github.com

  如果再次git clone出现报错：
  fatal: unable to access ‘https://github.com/robbyrussell/oh-my-zsh.git/’: LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

输入命令：

1
2

git config --global --unset http.proxy
git config --global --unset https.proxy

参考：
https://blog.csdn.net/qq_43531694/article/details/106862753
https://blog.csdn.net/kp783491236/article/details/125604734
https://blog.csdn.net/Jolting/article/details/125961694
https://blog.csdn.net/qq_44157558/article/details/126299709

Gogs和GitHub非常相似，但是更适合服务器配置不高的用户，它占资源小；
Gogs的目标是打造一个最简单、最快速和最轻松的方式搭建自助Git服务。使用Go语言开发使得Gogs能够通过独立的二进制分发，并且支持Go语言支持的所有平台，包括Linux、Mac OS X、Windows以及 ARM 平台。

安装Mysql

安装mysql

1

yum install mariadb-server mariadb

启动mysql

1
2
3
4

systemctl start mariadb #启动MariaDB
systemctl stop mariadb #停止MariaDB
systemctl restart mariadb #重启MariaDB
systemctl enable mariadb #设置开机启动

mysql 中创建 gogs 数据库 和gogs用户
连接本地数据库，建立gogs数据库，并把权限赋予gogs用户

1
2
3
4
5
6
7
8

[root@localhost ~]# mysql -uroot -p
Enter password:
mysql> CREATE DATABASE gogs CHARACTER SET utf8 COLLATE utf8_bin;
mysql> GRANT ALL ON gogs.* TO 'gogs'@'localhost' IDENTIFIED BY 'YourPassword';
mysql> FLUSH PRIVILEGES;
mysql> exit;
[root@localhost ~]# useradd git
[root@localhost ~]# passwd git

下载Gogs并解压

1

//代码

https://zhuanlan.zhihu.com/p/356569771
https://www.jianshu.com/p/2df4c905c1d2
https://www.linuxprobe.com/centos8-gogs-git.html
http://www.gaodaima.com/414931.html

安装CentOS8默认软件源的MYSQL，设置开机启动，设置允许远程连接mysql

查看更多

最近换了服务器，腾讯云做活动打折，刚好服务器还有2个月到期，赶紧下手买一个，环境：Linux 的Centos 8.2

这是摘要

查看更多

• 渐变

  1 2	background: #000000; background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

• 阴影

  1 2 3 4 5

  //内阴影效 box-shadow:5px 5px 5px #999 inset; //外部阴影 box-shadow:5px 5px 5px #ddd;

• 鼠标指针

  1 2 3 4 5 6 7 8 9 10 11 12 13

  cursor: pointer; // 自定义鼠标样式，使用URL，并提供一个关键字值作为备用 cursor: url("hyper.cur"), auto; // URL和xy的坐标偏移值，最后提供一个关键字值作为备用 cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; // 全局属性 cursor: inherit; cursor: initial; cursor: unset;

  指针明细

  类型	CSS值	描述
  General	auto	浏览器根据当前内容决定指针样式 例如当是内容是文字时使用text样式
  	default	默认指针，通常是箭头。
  	none	无指针被渲染
  链接及状态	context-menu	指针下有可用内容目录。
  	help	指示帮助
  	pointer	悬浮于连接上时，通常为手
  	progress	程序后台繁忙，用户仍可交互 (与wait相反).
  	wait	程序繁忙，用户不可交互 (与progress相反).图标一般为沙漏或者表。
  选择	cell	指示单元格可被选中
  	crosshair	交叉指针，通常指示位图中的框选
  	text	指示文字可被选中
  	vertical-text	指示垂直文字可被选中
  拖拽	alias	复制或快捷方式将要被创建
  	copy	指示可复制
  	move	被悬浮的物体可被移动
  	no-drop	当前位置不能扔下 Windows或Mac OS X中 "no-drop 与not-allowed相同".
  	not-allowed	不能执行
  	grab	可抓取 译者注:grab和grabbing在比较后期才被支持，见浏览器兼容表
  	grabbing	抓取中
  重设大小及滚动	all-scroll	元素可任意方向滚动 （平移）. Windows中, "all-scroll 与 move相同".
  	col-resize	元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
  	row-resize	元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
  	n-resize	某条边将被移动。例如元素盒的东南角被移动时使用se-resize
  	e-resize
  	s-resize
  	w-resize
  	ne-resize
  	nw-resize
  	se-resize
  	sw-resize
  	ew-resize	指示双向重新设置大小
  	ns-resize
  	nesw-resize
  	nwse-resize
  缩放	zoom-in	指示可被放大或缩小
  	zoom-out

  [点击查看浏览器兼容性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7)

• 文字超出点点点

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  // 一行显示，超出显示点点点 p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } // 多行显示超出点点点 .box { width: 400px; display: -webkit-box;-webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

最主要的变化是在2的基础上加了个新的写法setup(){}，新写法里没有熟悉的this，以及以前的一些写法都要改，要用2的写法也可以，用defineComponent()函数，vue3用TypeScript，用了3，相应配套的vuex、vue-router以及相关的组件库Vant3、Element-plus都要升级起来，自然升级了有一堆的新语法要熟悉。

用2.X式写法

用全局API：defineComponent，就可以愉快的像2.0一样玩耍了
示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
    name: 'demo',
    data() {
      return {
        demo: '',
      };
    },
    computed: {},
    watch: {},
    methods: {},
    created() {},
    mounted() {},
  });
</script>

新加的写法

新的组合式API，把原来生命周期式函数都拧到一个大函数里了；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script lang="ts">
  import {ref, reactive, onMounted} from "vue";
  import { useRoute } from "vue-router";

  export default {
    name: 'layout',
    components:{},
    setup() {
      const data = reactive({demo:''});
      const fn = ()=>{
        //  menus
      }
      return {
        ...data,
        fn,
      }
    },
  };
</script>

setup

生命周期

• beforeCreate -> setup()
• created -> setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

ref

this

Mixin

TypeScript项目的配置文件
tsconfig.json放在ts项目的根目录下，tsconfig.json指定了用来编译这个项目的根文件和编译选项；
TSConfig文件可以是tsconfig.json或jsconfig.json，都具有相同的行为和相同的配置变量集。
官方参考链接

JSON文件是不支持注释的，只要跑的平台认，随便你写撒样都行，这几个可注释：

• VS Code 的 settings.json
• Prettier 的 .prettierrc
• TypeScript 的 tsconfig.json

我在项目里用的tsconfig.json：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

{
  "compilerOptions": {
    "target": "esnext",     // 目标代码类型
    "module": "esnext",     // 指定生成哪个模块系统代码
    "strict": true,         // 启用此功能等效于启用所有严格模式系列选项。
    "jsx": "preserve",      // 控制 JSX 在 JavaScript 文件中的输出方式。 这只影响 .tsx 文件的 JS 文件输出。
    "importHelpers": true,  //导入辅助：对于某些降级行为，TypeScript 使用一些辅助代码来进行操作
    "moduleResolution": "node",//模块解析：指定模块解析策略 node、classic
    "experimentalDecorators": true,// 启用实验性的ES装饰器
    "skipLibCheck": true,   // 跳过声明文件的类型检查
    "esModuleInterop": true,//ES 模块互操作性
    "allowSyntheticDefaultImports": true,// 允许合成默认导入
    "sourceMap": true,      // 用于debug ,生成相应的.map文件
    "baseUrl": ".",         // 解析非相对模块名的基准目录
    "types": [              // 要包含的类型声明文件名列表；如果指定了types，只有被列出来的包才会被包含进来
      "webpack-env"
    ],
    "paths": {              // 模块名到基于baseUrl的路径映射的列表
      "@/*": [
        "src/*"
      ]
    },
    "lib": [                //TypeScript 包括一组默认的内建 JS 接口（例如 Math）的类型定义，以及在浏览器环境中存在的对象的类型定义（例如 document）。 TypeScript 还包括与你指定的 target 选项相匹配的较新的 JS 特性的 API。例如如果target 为 ES6 或更新的环境，那么 Map 的类型定义是可用的。
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [              //指定要包含在程序中的文件名或模式的数组。这些文件名是相对于包含tsconfig.json文件的目录来解析的。
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [              // 指定解析时应跳过的文件名或模式的数组include。
    "node_modules"
  ]
}

网上别人的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

{
  "compilerOptions": {              //compilerOptions:编译选项,可以被忽略，这时编译器会使用默认值
    "allowSyntheticDefaultImports": true,   //允许从没有设置默认导出的模块中默认导入。这并不影响代码的显示，仅为了类型检查。
    "baseUrl": "./src",             //解析非相对模块名的基准目录
    "emitDecoratorMetadata": true,  //给源码里的装饰器声明加上设计类型元数据
    "experimentalDecorators": true, //启用实验性的ES装饰器
    "module": "commonjs",           //指定生成哪个模块系统代码
    "moduleResolution": "node",     //决定如何处理模块。或者是"Node"对于Node.js/io.js，或者是"Classic"（默认）
    "noEmitHelpers": true,          //不再输出文件中生成用户自定义的帮助函数代码，如__extends。
    "noImplicitAny": false,         //在表达式和声明上有隐含的any类型时报错
    "sourceMap": true,              //用于debug ,生成相应的.map文件
    "strictNullChecks": false,      //在严格的null检查模式下，null和undefined值不包含在任何类型里，只允许用它们自己和any来赋值（有个例外，undefined可以赋值到void）。
    "target": "es5",                //目标代码类型
    "paths": {                      //模块名到基于baseUrl的路径映射的列表
    },
    "lib": [                        //编译过程中需要引入的库文件的列表
      "dom",
      "es6"
    ],
    "types": [                      //要包含的类型声明文件名列表；如果指定了types，只有被列出来的包才会被包含进来
      "hammerjs",
      "node",
      "source-map",
      "uglify-js",
      "webpack"
    ]
  },
  "exclude": [  //如果"files"和"include"都没有被指定，编译器默认包含当前目录和子目录下所有的TypeScript文件（.ts, .d.ts 和 .tsx），排除在"exclude"里指定的文件。
    "node_modules",
    "dist"
  ],
  "awesomeTypescriptLoaderOptions": {  //Typescript加载选项
    "forkChecker": true,
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

"compilerOptions": {
  "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度
  "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置
  "diagnostics": true, // 打印诊断信息 
  "target": "ES5", // 目标语言的版本
  "module": "CommonJS", // 生成代码的模板标准
  "outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD",
  "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array",
  "allowJS": true, // 允许编译器编译JS，JSX文件
  "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
  "outDir": "./dist", // 指定输出目录
  "rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构
  "declaration": true, // 生成声明文件，开启后会自动生成声明文件
  "declarationDir": "./file", // 指定生成声明文件存放目录
  "emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件
  "sourceMap": true, // 生成目标文件的sourceMap文件
  "inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中
  "declarationMap": true, // 为声明文件生成sourceMap
  "typeRoots": [], // 声明文件目录，默认时node_modules/@types
  "types": [], // 加载的声明文件包
  "removeComments":true, // 删除注释 
  "noEmit": true, // 不输出文件,即编译后不会生成任何js文件
  "noEmitOnError": true, // 发送错误时不输出任何文件
  "noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用
  "importHelpers": true, // 通过tslib引入helper函数，文件必须是模块
  "downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现
  "strict": true, // 开启所有严格的类型检查
  "alwaysStrict": true, // 在代码中注入'use strict'
  "noImplicitAny": true, // 不允许隐式的any类型
  "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量
  "strictFunctionTypes": true, // 不允许函数参数双向协变
  "strictPropertyInitialization": true, // 类的实例属性必须初始化
  "strictBindCallApply": true, // 严格的bind/call/apply检查
  "noImplicitThis": true, // 不允许this有隐式的any类型
  "noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)
  "noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错)
  "noFallthroughCasesInSwitch": true, // 防止switch语句贯穿(即如果没有break语句后面不会执行)
  "noImplicitReturns": true, //每个分支都会有返回值
  "esModuleInterop": true, // 允许export=导出，由import from 导入
  "allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块
  "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
  "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
  "paths": { // 路径映射，相对于baseUrl
    // 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置
    "jquery": ["node_modules/jquery/dist/jquery.min.js"]
  },
  "rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错
  "listEmittedFiles": true, // 打印输出文件
  "listFiles": true// 打印编译的文件(包括引用的声明文件)
}

相关参考：
TypeScript项目中的tsconfig.json配置指南

总的来说，JavaScript中小括号有五种语义，中括号有四种语义，而大括号也有四种语义。

() 小括号：

• 函数声明时参数表（形参）
• 和一些语句联合使用以达到某些限定作用（if、for等）
• 和new一起使用用来传值(实参)
• 作为函数或对象方法的调用运算符(如果定义了参数也可与语义3一样传实参)
• 强制表达式运算（常用有eval解析JSON和匿名函数自执行）

[] 中括号：

• 声明数组
• 取数组成员
• 定义对象成员(可以不遵循标识符规则，可以以数字开头定义标识符)
• 取对象成员

{}大括号：

• 组织复合语句,这是最常见的
• 对象直接量声明(赋值对象）
• 声明函数或函数直接量赋值
• 结构化异常处理的语法符号（try…catch语句)

资料来源：
JavaScript小括号、中括号、大括号的多义性

前端的兄弟面试多多少少被问到原型的问题，原型是什么？
网上文章太多了，写的很复杂，尤其是有一张像蚯蚓的图看的我头大，看了好多文章结合自己实践总结了下面一张图

JavaScript是一种基于原型的面向对象编程语言
引用mozilla的描述：
JavaScript 只有一种结构：对象。 每个实例对象（object）都有一个私有属性（称之为__proto__）指向它的构造函数的原型对象（prototype ）。该原型对象也有一个自己的原型对象(proto) ，层层向上直到一个对象的原型对象为 null。
根据定义，null 没有原型，是原型链中的最后一个环节。
几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。`

对象分为两种：普通对象object和函数对象function;
概要：

• function有__proto__属性和prototype属性，prototype属性是function独有的；
• 对象都有__proto__属性，通过这个属性找到它的上级；
• 数据类型：null、undefined是没有构造函数的
• Object.prototype是所有对象的爸爸，Object.prototype原型是null。

1
2
3
4
5
6
7
8
9
10

Object.prototype === {}.__proto__  //true，这个前后反过来写会报错，var a = {};a.__proto__ === Object.prototype;这样就不会

(1).__proto__ === Number.prototype //true，1是个值，要用强制运算符()

Function.__proto__ === Function.prototype //true
Function.prototype.__proto__ === Object.prototype //true
Function.__proto__.__proto__ === Object.prototype //true

Object.prototype.__proto__ === null //true
//...根据上面的图，你们可以一一对应找出对象的上级

原型链

上面的结构图可以看出来，对象的上级以及上级的上级一直到末端到null，这一整条链接关系就是原型链

参考资料：
继承与原型链
三张图搞懂JavaScript的原型对象与原型链
js基础篇——原型与原型链的详细理解

服务器常用状态码

本文来源：HTTP状态码详解