Mac 前端开发之旅

Mac 浏览器内常用快捷键

在 Mac 上打开 “终端”

Mac 之 Vue.cli4.X 项目搭建

Mac 超好用的软件

最近新上手了 Mac 本，一些操作啥的都还不习惯，在这里就是记录给自己看的一些使用 Mac 进行前端开发过程中的不会之处

Mac 浏览器内常用快捷键

Chrome 的快捷键操作，详细查询了下 Chrome 在 Mac 中的快捷键，

做下备忘，希望帮到更多的人。

普遍用 Mac 系统开发的朋友们主要用到 debug 调适，

我这里为了方便大家伙，将其先展示在前面：
option＋command＋i （开发者工具）option＋command＋j （javascript控制台）option＋command＋c  也可以打开（默认显示元素）
怎么在浏览器的控制台上换行输入? 使用快捷键 shift + enter

1、标签页和窗口快捷键

command ⌘ + N 打开新窗口。

command ⌘ + T 打开新标签页。

command ⌘ + Shift + N 在隐身模式下打开新窗口。按 ⌘-O，然后选择文件。

在 Chrome 浏览器中打开计算机中的文件。按住 ⌘ 的同时点击链接。或用鼠标中键（或鼠标滚轮）点击链接。从后台在新标签页中打开链接。按住 ⌘-Shift 的同时点击链接。或按住 Shift 键的同时用鼠标中键（或鼠标滚轮）点击链接。在新标签页中打开链接并切换到刚打开的标签页。按住 Shift 键的同时点击链接。在新窗口中打开链接。 ⌘-Shift-T 重新打开上次关闭的标签页。

Chrome 浏览器可记住最近关闭的 10 个标签页。将标签页拖出标签栏。在新窗口中打开标签页。将标签页从标签栏拖到现有窗口中。在现有窗口中打开标签页。同时按 ⌘-Option 和向右箭头键。切换到下一个标签页。同时按 ⌘-Option 和向左箭头键。切换到上一个标签页。 ⌘-W 关闭当前标签页或弹出窗口。 ⌘-Shift-W 关闭当前窗口。点击并按住浏览器工具栏中的后退或前进箭头。在新标签页中显示浏览历史记录。按 Delete 或 ⌘-[ 转到当前标签页的上一页浏览历史记录。按 Shift-Delete 或 ⌘-] 转到当前标签页的下一页浏览历史记录。按住 Shift 键的同时点击窗口左上角的 + 按钮。最大化窗口。 ⌘-M 最小化窗口。 ⌘-H 隐藏 Chrome 浏览器。 ⌘-Option-H 隐藏其他所有窗口。 ⌘-Q 关闭 Chrome 浏览器。 2、Chrome 浏览器功能快捷键

⌘-Shift-B 打开和关闭书签栏。

⌘-Option-B 打开书签管理器。

⌘-, 打开“偏好设置”对话框。

⌘-Y 打开“历史记录”页。

⌘-Shift-J 打开“下载内容”页。

⌘-Shift-Delete 打开“清除浏览数据”对话框。

3、地址栏快捷键

键入搜索字词，然后按 Enter 键。使用默认搜索引擎进行搜索。键入搜索引擎关键字，按空格键，然后键入搜索字词，再按 Enter 键。使用与关键字相关联的搜索引擎进行搜索。首先键入搜索引擎网址，然后在系统提示时按 Tab 键，键入搜索字词，再按 Enter 键。使用与网址相关联的搜索引擎进行搜索。键入网址，然后按 ⌘-Enter。在新后台标签页中打开网址。 ⌘-L 突出显示网址。 ⌘-Option-F 在地址栏中输入“?”。在问号后键入搜索字词可用默认搜索引擎执行搜索。同时按 Option 和向左箭头键。将光标移到地址栏中的前一个关键字词同时按 Option 和向右箭头键。在地址栏中将光标移到下一个关键字词同时按 Shift-Option 和向左箭头键。在地址栏中突出显示上一关键字词同时按 Shift-Option 和向右箭头键。在地址栏中突出显示下一关键字词 ⌘-Delete 在地址栏中删除光标前的字词在地址栏菜单中按 Page Up 或 Page Down。在菜单中选择上一条目或下一条目。

4、网页快捷键

⌘-P 打印当前网页。

⌘-Shift-P 打开“网页设置”对话框。

⌘-S 保存当前网页。

⌘-Shift-I 通过电子邮件发送当前网页。

⌘-R 重新载入当前网页。

⌘-, 停止载入当前网页。

⌘-F 打开查找栏。

⌘-G 在查找栏中查找下一条与输入内容相匹配的内容。

⌘-Shift-G 或 Shift-Enter 在查找栏中查找上一条与输入内容相匹配的内容。

⌘-E 使用所选内容查找。

⌘-J 跳到所选内容。

⌘-Option-I 打开“开发人员工具”。

⌘-Option-J 打开“JavaScript 控制台”。

⌘-Option-U 打开当前网页的源代码。

按住 Option 键，然后点击链接。下载链接目标。

将链接拖到书签栏中。将链接保存为书签。

⌘-D 将当前网页保存为书签。

⌘-Shift-D 将所有打开的标签页以书签的形式保存在新文件夹中。

⌘-Shift-F 在全屏模式下打开网页。再按一次 ⌘-Shift-F 可退出全屏模式。

⌘-+ 放大网页上的所有内容。

⌘ 和 - 缩小网页上的所有内容。

⌘-0 将网页上的所有内容恢复到正常大小。

⌘-Shift-H 在当前标签页中打开主页。空格键向下滚动网页。

⌘-Option-F 搜索网页。

5、文本快捷键

⌘-C 将突出显示的内容复制到剪贴板中。

⌘-Option-C 将您正在查看的网页的网址复制到剪贴板中。

⌘-V 从剪贴板中粘贴内容。

⌘-Shift-Option-V 粘贴内容并应用周围文本的格式。

⌘-X 或 Shift-Delete 删除突出显示的内容并将其复制到剪贴板中。

⌘-Z 撤消最后一步操作。

⌘-Shift-Z 重复最后一步操作。

⌘-X 删除突出显示的内容并将其保存到剪贴板中（剪切）。

⌘-A 选择当前网页上的所有文本。

⌘-: 打开“拼写和语法”对话框。

⌘-; 检查当前网页上的拼写和语法。

在 Mac 上打开 “终端”

方法一、使用 “聚焦搜索”

1.点击 “聚焦搜索” 图标。它位于屏幕的右上角，图标是一个放大镜。

你也可以按下键盘上的 Command + 空格键 来打开 “聚焦搜索” 。

2.在搜索栏里输入“终端” 。接着，搜索结果里就会出现“终端”程序。

3.双击终端。接着会启动终端应用程序，打开命令提示符窗口。

你想运行你的项目时，可以将你的项目直接拖进去终端里面就 OK 了

那么如何在当前目录下打开终端呢？

方法 / 步骤

首先用系统自带的方法，打开文件夹，并处于焦点，

点击菜单访达，点击服务 -> 服务偏好设置

在服务里快捷键，勾选上 “新建位于文件位置的终端窗口”，

也可以设置个快捷键，但是防止冲突，冲突了是无法生效的

“新建位于文件位置的终端窗口”选中文件夹，右键“新建位于文件位置的终端窗口”

可以看到终端了，而且路径就是目录的位置，

这种方法就是不能在空白处打开，所以也有点不适用

我的是隐藏到服务选项里面了：

首先打开终端，输入 cd 然后拖动文件，到终端

然后就能读取文件的路径了，回车即切换到了该目录

运行 QQ 截图： control + command + A

系统截图： command + shift + 4

当然截图还是推荐大家下载专业的截图软件，

在这里我用的是 Snipaste

一：通过快捷键显示桌面
1、系统自带快捷键
Command + F3

Fn + F11

傻傻的一直输入不了 ^ 和下划线 _

后来才知道原来必须要切换到英文状态下才可以啊。。

1.这时需要让右上角中文变为 ABC , 因为英文才可以输入下划线。

2.然后按 shift + - , 那么就可以在编辑器内输入下划线。

Mac 之 Vue.cli4.X 项目搭建

新入手Mac配置前端环境教程_雨季mo浅忆的博客-CSDN博客_xcode前端

（ 0 ）检查项目运行环境：安装 node v10.x 以上版本

{ $ node -v 检查版本号 }

（ 1 ）查看 npm 地址：

{ $ npm config get registry }

（ 2 ）连接到 “ 指定 ” 的 “ 镜像源地址 ”

{ $ npm config set registry " 指定的镜像源地址 " }

【由于可能会是内网进行的开发，所以这里不非的是淘宝的镜像源地址】

{ 切换淘宝镜像：$ npm config set registry https://registry.npm.taobao.org }

（ 3 ）下载 vue-cli 脚手架工具： { $ npm i -g @vue/cli }

（ 4 ）检查是否安装成功： { $ vue --version } => @vue/cli 4.5.15

（ 5 ）创建新项目： { $ vue create wbcs }

【注意：你的项目名称不要用大写字母，会报错】

（ 6 ）请选择预设置：手动选择（配置）项目功能

（ 7 ）检查您的项目所需的功能：

（ 8 ）选择 Vue 的一个版本：

（ 9 ）使用路由器的历史模式？（需要为生产环境中的索引回退进行适当的服务器设置）（ Y / n ） Yes

（ 10 ）选择一个 CSS 预处理器（默认支持 PostCSS ，Autoprefixer 和 CSS 模块）：

（使用方向键）

【推荐使用 >Sass/SCSS (with dart-sass) 】

（ 11 ）由于上面选择了 ESLint ，所以这里会稍有不同：

选择一个检测程序 / 格式化程序配置：（使用箭头键）

仅具有错误预防功能的 ESLint

【推荐使用第 4 种，因为我看好多人都是用的这种吧？】

（ 12 ）拾取其他 lint 特征：

> Lint on save （保存就检测）

Lint and fix on commit （ fix 和 commit 时候检查）

（ 13 ）您希望将Babel、ESLint等的配置放在哪里？（使用箭头键）

{ 在专用的配置文件中 } In dedicated config files

（ 14 ）保存为未来项目的预置？（y / N） No

等待 loading 。。。

（ 15 ）创建完成

（ 16 ）cd wbcs 进入到 wbcs 项目文件内

（ 17 ）code . 打开 vscode ( Mac 好像并没有这一命令呃 )

（ 18 ）npm run serve 运行启动项目