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 , 因为英文才可以输入下划线。

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 ）创建完成

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

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

Mac 超好用的软件

首先推荐给大家一个 Mac 下载 站

MacWk – 精品mac软件下载

https://macwk.com

（ 1 ）截图软件  ：  Snipaste

（ 2 ）翻译软件  ：  Bob

（ 3 ）视频下载软件  ：  Downie4

（ 4 ）音乐免费软件  ：  Listen1

Mac 如何进入 应用程序 或 项目 的 内部文件夹 /strong>

在终端 ，进入地址 ， 输入  cd 

然后 把你的项目文件夹 拖入到终端里面就好啦

这样你就可以 npm install 正常下载 插件包了