mac前端装机操作与流程

mac前端装机操作与流程

• 整理了一份mac前端极简装机流程，及一点mac常用操作，部分详细安装教程引用了几位强者的博客链接，在此感谢大佬的分享。
• 希望能帮到刚接触mac的朋友们，最少程度地安装程序与修改系统配置，防止安的多错的多，或因安装顺序不合理导致出错。
• 刚用mac的朋友可以先看看列出的mac常用操作，再从安装谷歌浏览器开始，按顺序安装，有的有依赖关系。必装和非必装、必看和非必看都已标明。

常用mac操作

首先列几个常用mac操作，不需要完全搞懂，有个印象后开始装机流程。
如果后面操作很懵可以先看看linux系统命令行，和windows还是有差别的。

设置和查看文件、软件

• 文档文件查看：mac没有分盘区，访达（那个蓝白色笑脸）可以看到所有文件夹，常用的就是桌面、文档、下载，还有个应用程序。
• 软件查看：启动台（那个灰色小火箭），能看到所有软件
• 设置：设置（灰色齿轮），所有设置都在里面

安装和卸载软件

两种安装形式：

1. 打开下载包后跳出弹窗，左边是软件图标，右边是个app开头的文件夹，左边的图标拖动到右边图标上，就是安装了。
2. 打开下载包后跳出弹窗，各种下一步下一步，跟着点。

注：安装时若跳出“打开来自身份不明开发者的 Mac 应用”的警告。
改 Mac 上设置-安全性与隐私-通用-偏好设置，把拦截解决掉。
mac安装东西或者很多其他操作都会要求输入电脑密码，输入就行。

卸载软件：
访达-应用程序-拖动图标到废纸篓，就是卸载软件。

命令行进入文件夹

windows可以在当前文件夹内右击，或者在链接输入cmd即可调出命令行，且会定位到当前路径。
mac没有这个功能，mac是打开终端，只能从最外层，cd空格，输入文件夹前几个字母，按tab键，会自动补全路径，再输入文件夹前几个字母，按tab键，再自动补全路径。
后面讲的autojump能简化操作，可以了解一下。
cd Documents/gitcode/ddd

全局装包 命令格式

mac有个sudo状态，大概是管理员权限。
sudo npm install xxxxxx -g

命令行操作文件

例子：
进入.zshrc界面后，
输入i进入编辑模式，类似于在命令行改txt文档；
按esc退出编辑模式；
之后输入:x，点回车，关闭.zshrc。（切记：输入:x的时候，输入法设为英文）

要郑重的对待这个操作，相当于直接在改系统文件，搞炸了怕是得重装。

更多基本操作文章最后也列出了一些，前面只写最常用的。

---

【mac基本操作了解一下后，从谷歌浏览器开始装机】

装机流程

谷歌浏览器 （必装）

常用插件 （非必装，挑挑）

• 翻译：Google 翻译
• 代理：Proxy SwitchyOmega
• 猫头鹰 代理：Owl Redirector
• 当前页链接二维码生成器：Quick QR
• 网页版看Axure交互（安装后设置-允许访问文件地址）：Axure RP Extension for Chrome
• 吸色工具：ColorZilla
• WEB前端助手：FeHelper
• 接口调试：Postman Interceptor
• vue开发工具：Vue.js devtools

搜狗输入法 （非必装）

可以把默认的一些输入法删掉。
mac的切换输入法是control+空格，切换中英文是shift。

词库 （非必装）

前端常用词库.scel
前端工程师必备词库.scel

iterm2 （必装）

大部分开发人员使用的命令行软件。
官网：https://www.iterm2.com/

注：GitHub部分源无法连接导致无法安装Homebrew

安装其他软件前，2020年开始存在GitHub的raw.githubusercontent.com无法链接导致部分软件安装出错的问题，避免出错先不要继续安装，先加个host：
199.232.68.133 raw.githubusercontent.com
GitHub的raw.githubusercontent.com无法链接【作者：zer0_1s】

可自己改host文件，或者下载下方的SwitchHosts管理host

SwitchHosts （建议安装，非必装）

host管理软件
简书
官网
github

Homebrew （必装）

官网：https://brew.sh/
包管理工具，类似于node下的npm。用来安装管理大部分的无界面的工具，如node，git，Python等。
官网最新的安装命令，命令以官网为准，会变。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Homebrew Cask 安装后可安装有界面的软件，我装失败了，暂时感觉不装也ok）

git （必装）

安装

brew install git

git初始设置

git config --global user.name "Your Name"
git config --global user.email [email protected]

更多命令

 您的姓名和邮件地址基于登录名和主机名进行了自动设置。请检查它们正确
与否。您可以对其进行设置以免再出现本提示信息。运行如下命令在编辑器
中编辑您的配置文件：
    git config --global --edit
设置完毕后，您可以用下面的命令来修正本次提交所使用的用户身份：
    git commit --amend --reset-author

您的姓名和邮件地址基于登录名和主机名进行了自动设置。请检查它们正确
与否。您可以对其进行设置以免再出现本提示信息：
    git config --global user.name "Your Name"
    git config --global user.email [email protected]
设置完毕后，您可以用下面的命令来修正本次提交所使用的用户身份：
    git commit --amend --reset-author

Mac更新git用户名和密码

Mac更新git用户名和密码 【作者：蛋蛋_ff71】
执行命令重置git用户名和密码，然后再次输入用户名和密码

git config --global credential.helper osxkeychain
git config --global user.name "Your Name"
git config --global user.email [email protected]

---

zsh (系统自带需更新) 和 oh-my-zsh（必装）

zsh：在bash的基础上改进的终端
oh-my-zsh：综合的管理工具，让zsh复杂的设置变得简单

以下zsh安装操作全都引用自大佬的博客，可以点进链接详细了解。
一个前端开发者的mac装机清单 【作者：Dcatfly】（非必看）

zsh (系统自带需更新)

详细说明地址：（非必看）

mac中自带非最新版本的zsh，用brew install zsh升级。（必升）
iTerm2默认用的是系统自带的bash，输入命令chsh -s /bin/zsh切换成zsh。（必切）

oh-my-zsh （必装）

安装、更新

官方安装命令：（必装）
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

更新命令，可以先不更新：（非必装）
upgrade_oh_my_zsh

更新出错参考下方链接：（非必看）
oh-my-zsh 更新出错 【作者：lvhdbb】

zsh和oh-my-zsh安装好后，编辑配置文件，修改环境变量 （必改）

zsh和oh-my-zsh安完后，配置的环境变量（adb）不起作用了，执行source .bash_profile后，
adb可以用了，但是终端全部关闭后，再输入adb，又不起作用了。

点进下方大佬的文章，修改环境变量。（必改）
Mac使用zsh后多次执行source .bash_profile解决方案 【作者：李美美欧巴】

后期有兴趣具体了解环境变量的朋友可以看看下方链接 （非必看）
source, ~/.bashrc, ~/.bash_profile详解 【作者：xyqzki】

item2主题、插件、别名 （非必装）

（我暂时没改啥，主要怕改出问题）
item2的配置可参考以下链接：
mac下终端iTerm2配置 【作者：程序员在深圳】（非必看）

在zshrc文件中能配置主题、插件和自定义别名，看大佬的文章oh-my-zsh。
一个前端开发者的mac装机清单 【作者：Dcatfly】（非必看）

oh-my-zsh相关文章：
iTerm2 + Oh My Zsh 打造舒适终端体验 【作者：西毒】（非必看）

autojump （非必装）

（我装失败了，但是有了会方便。需要的话参考大佬的教程搞起来）

和zsh结合使用，进入很深的目录，不需要不断的cd进去，而是用快捷键进去。
例如进目标目录a/b/c/d/e，可以直接用j e命令进去。

Linux 懒人工具 - autojump 【作者：zzpwestlife】（非必看）

mac安装autojump 【作者：stardew】（非必看）

---

nvm （建议必装）

（建议必装，因为我不会直接装nodejs）
nvm是nodejs的版本管理工具，装完nvm再用nvm装nodejs。

直接看大佬的安装流程，无痛安装。主要包括nvm，node，npm之间的区别、nvm 安装、可能出现的问题、nvm常用命令

Mac OS 下 NVM 的安装与使用 【作者：iTruda】（必装）

装node.js （必装，依赖于nvm）

nvm install stable

全局装包 命令格式

sudo npm install xxxxxx -g

---

vscode （非必装）

(下载自己习惯的IDE即可)

插件 ( 非必装，挑挑 )

• 【中文：】Chinese (Simplified) Language Pack for Visual Studio Code
• 【括号颜色区分：】Bracket Pair Colorizer
• 【终端可跑代码：】Code Runner
• 【git插件：】GitLens — Git supercharged
• 【路径可视化插件：】Path Intellisense
• 【vue插件：】Vetur
• 【软件icon美化，原始icon层级不清晰：】Material Icon Theme
• 【白色背景：】Light+ Tweaked

设置

界面放大：View > Appearance > Zoom In 对应快捷键 Command + =
界面缩小：View > Appearance > Zoom Out 对应快捷键 Command + -

（设置的json内设置，可参考非必须）

{
    "workbench.colorTheme": "Light+ Tweaked",
    "workbench.iconTheme": "material-icon-theme",
    "files.autoSave": "off",
    "powermode.enabled":true,
    "powermode.presets":"flames",
    "editor.tabSize": 4,
    "editor.detectIndentation":false,
    "eslint.autoFixOnSave": false,
    "eslint.enable": true,
    "eslint.options": {
       "extensions": [".js", ".vue", ".jsx"]
    },
    "eslint.validate": [
         {
             "language": "vue",
             "autoFix": true
         },
         {
             "language": "javascript",
             "autoFix": true
         },
         {
             "language": "javascriptreact",
             "autoFix": true
         }
    ],
    "window.zoomLevel": 0,
    "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe",
    "terminal.external.windowsExec": "C:\\Windows\\sysnative\\bash.exe" ,
    "files.associations": {"*.xtpl": "html"}
}

Sublime Text 3 （非必装）

强大的文本编辑器，装上插件能支持markdown。

Sublime Text 3改变背景颜色

Preferences–>color scheme–>任意选择一个子项即可

插件安装方式

具体可参考下方文章：
Sublime Text3 的 Markdown 实时预览全面总结【作者：Zhang_Raymond】
需要重启软件才生效

sublime支持markdown

（我暂时只安了MarkdownEditing，具体安装见上方博客）

Sublime如何快速进行代码折叠

编辑-代码折叠（倒数第四）-前是折叠后是展开

关于Sublime一些常用的快捷键

https://blog.csdn.net/y912423222/article/details/82147200

sublime text 3 无法安装Package Control插件解决办法

https://www.cnblogs.com/yangzhuanzheng/p/8896380.html

charles 代理 抓包工具 （非必装）

抓包工具，不付费的话半小时会自动退出，重开即可。
官网：https://www.charlesproxy.com/

mac免费分屏软件 （非必装）

mac不像windows，没有分屏功能，窗口拖动到边缘不能自动变成二分之一屏幕，用软件解决。具体介绍与下载方式见下方文章。
Mac软件.分屏软件Spectacle【作者：virhuiai】

Xclient ： mac软件推荐网站 （非必看）

链接有点问题，麻烦复制到地址栏查看吧。
https://xclient.info/?_=664be6197182c53b4f2908fb3c974014

---

【补充mac操作技巧】

Mac在终端直接使用root权限

使用sudo
sudo npm install

启用root用户
sudo passwd root 

登录root用户
su root

窗口

最小化窗口 快捷键

Command+M，快速最小化当前窗口
Command+Option+M，快速最小化所有窗口
系统偏好设置——通用 可以设置双击窗口标题栏最小化当前窗口。

浏览器

浏览器强制刷新

Mac下的浏览器类似Windows中Ctrl＋F5的不请求缓存刷新页面的快捷键
正常方式：
【shitf】+【command】+【r】
如果改过快捷键的：
【fn】+【shift】+【command】+【f】

浏览器缩放

command +