Mac 前端开发之旅

在 Mac 上打开 “终端”

Mac 之 Vue.cli4.X 项目搭建

Mac 超好用的软件

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

在 Mac 上打开 “终端”

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

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

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

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

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

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

那么如何在当前目录下打开终端呢 /p>

方法 / 步骤

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

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

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

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

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

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

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

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

首先打开终端，输入 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 运行启动项目