mac配置前端环境记录

Voiceu
2,297 阅读2分钟

Homebrew

查了很多帖子，首先是brew，用于安装mac的其他软件，直接用命令行就能安装，重点参考这篇

  • brew 用来安装node ， git 等
  • brewcask 可以用来安装谷歌浏览器等可视化软件

经过查阅，知道了新版的brew不用brewcask了，应该是直接全部用brew命令就能下载上诉所有的软件了

本次的下载用了国内的代理，在mac自带终端中输入

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

其中

  • /bin/zsh -c表示shell用zsh，-c 它可以让 zsh 将一个字串作为完整的命令来执行；暂时个人理解是这样，等学完linux再看看对不对，而且新版本的mac默认就是zsh，不是bash；
  • curl -fsSL代表使用使用curl命令下载；

下载的过程中，因为我没下载Xcode，所以会提醒我下载command line tools，按提示下载就行，下载完后重新下载brew

输入brew -v查看版本信息

终上所述：

  • 为什么用brew，因为brew安装软件更方便，感觉类似npm一样
  • 注意 homebrew 适宜在网络环境良好的情况下使用，网络掉链子的时候，还得换其他方式，比如curl、wget，或者直接脚本安装，走代理，github下载等

vs code

直接去官网下载mac版就行，是个zip格式，打开后添加到启动台

如何在访达里，右键文件/文件夹直接用vscode打开，链接，老实说还是不太方便，没有直接在右键的下拉列表里，而是在里面的子列表选项里

有的帖子推荐了第三方应用，比如 超级右键

Git

终端执行命令

brew install git

然后设置用户名和邮箱

$ git config --global user.name "voiceu"                       // 设置用户名
$ git config --global user.email "voiceu@xx.com"           // 设置邮箱

如果不小心写错了，用以下命令修改

$  git config --global --replace-all user.email "输入你的邮箱" 
 
$  git config --global --replace-all user.name "输入你的用户名"

用以下命令查看

git config --list

SSH连接github

//创建密钥
ssh-keygen -t rsa -C "voiceu@xx.com"
//一路回车

//用cat命令，打开公钥
cat .ssh/id_rsa.pub

//然后复制到github的setting中的SSH里面去就行了

iTerm2 + oh-my-zsh

看到帖子都推荐换这个终端来使用，但是分不清这俩啥区别，有篇帖子讲了一下，这是链接 iTerm2 + oh-my-zsh区别，总的说来，iTerm2 是终端软件，用于配合shell使用，就是咱输入命令行的软件； oh-my-zsh 是 shell的其中一种：zsh 的配置，安装 oh-my-zsh 是对 zsh 终端进行美化和补充完善。

iTerm2下载：在官网，可以看到官网介绍了为什么要用这个软件

image.png

oh-my-zsh 的安装：安装好iTerm2后，打开，后续的指令都用这个软件了，不再使用原生终端

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

发现网络不行，要fq，又报错了，去找找代理地址下载

貌似是因为这个网址需要科学上网，网上的办法是科学上网后复制粘贴到本地一个shell文件里，然后运行

我在此处用vscode新建了一个install.sh文件,然后复制进去，到目标文件夹下用命令行执行

sh ./install.sh

出现彩色的 oh my zsh ，就成功了

输入下方命令查看是否是zsh

echo $0

如果不是zsh，则输入如下命令进行修改

chsh -s /bin/zsh

终上所述：

  • 为什么要用iTerm2，因为原生终端没有iTerm2强大，虽然原生终端已经能满足需求了,比如一些快捷键功能；
  • 为什么要用oh-my-zsh，因为oh-my-zsh可以配置很多插件，主题等，是基于zsh命令行的一个扩展工具集，提供了丰富的扩展功能；
  • 其实给我的感觉就像是，原生终端、iTerm2、oh-my-zsh的关系对应着txt文本编辑器，vscode，vscode的插件，逐渐变得更方便，自行体会吧~

oh-my-zsh的themes 地址

如何修改主题？ 在.zshrc文件里修改对应项就行，github里 README 有写，如下，所以在上面的地址里找一个喜欢的自己改一下试试吧！

Once you find a theme that you'd like to use, you will need to edit the ~/.zshrc file. You'll see an environment variable (all caps) in there that looks like:

ZSH_THEME="robbyrussell"

To use a different theme, simply change the value to match the name of your desired theme. For example:

ZSH_THEME="agnoster" # (this is one of the fancy ones)
# see https://github.com/ohmyzsh/ohmyzsh/wiki/Themes#agnoster

Note: many themes require installing the Powerline Fonts in order to render properly.

可以参考别人的样式：链接

nvm

nvm 全名node.js version management，是node的版本管理器，用于安装和管理多个版本的node

安装nvm同样会出现 “443: Connection refused” 的问题 这篇文章给出了一个比较合适的答案：链接，但我这里跟着改了，并不适用，值得我记录的是如下，这种文件如何进行修改，因为我暂时还没学完linux

sudo vim /etc/hosts #进入（i编辑 esc退出 :wq保存）

由于我之前使用了brew来install nvm，所以在根目录里有一个.nvm文件，感觉系统不干净，所以用如下命令进行删除，但是 Mac 的访达默认是不显示隐藏文件夹的，.nvm 是个隐藏文件夹在 访达（finder） 中看不到，在 Mac 下显示隐藏文件的快捷键是 Command+Shift+.，关闭也是这个快捷键，参考。

cd ~/   //回到根目录
ls -a   //显示所有包括隐藏文件 比如.nvm
rmdir .nvm   //删除该空文件夹

然后发现新系统网络原因一直解决不了443，就用git的办法来下载nvm

cd ~/    目的是在根目录里克隆nvm
git clone https://github.com/nvm-sh/nvm.git .nvm    //最后一个.nvm 意思是项目名称为.nvm，这样就会有个.nvm的文件夹了

然后进入这个文件夹可以发现如下

{34F901DD-A28A-9BA4-B365-0FB96C6FF134}.png

然后运行nvm.sh，在此之前需要手动新建.bash_profile，因为我的mac是zsh的，没有这个文件，后面还得改

如果使用的是zsh，则需要在当前用户根目录下创建.zshrc的文件进行相应的操作

cd ~/   回到最上层
touch .bash_profile   新建该文件
vi ~/.bash_profile #进入（i编辑 esc退出 :wq保存） 修改末尾

可能用到的操作：删除文件，以防写错了
rm xx

然后通过上面的指令代码将下面的代码复制到.bash_profile里并保存

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

再通过指令代码进入.zshrc里面，找个空位置输入以下命令

source ~/.bash_profile

保存并退出.zshrc 再输入指令

source ~/.zshrc

就成功了，此时输入nvm -v进行查看是否安装成功

nvm -v

node

安装node，看了网上说m1芯片的mac好像是node15才开始适配m1，之前的版本要用其他指令操作一下，所以我就先直接安装node 15

输入以下指令安装，需要编译5分钟左右，耐心等待即可

nvm i v15

以下列举nvm常用的指令

1. 查看下当前可用的node版本
$ nvm ls或者nvm list 

2. 选择合适的版本安装
nvm install 10.15.3          // 安装指定版本的node，会自动切换到该版本
nvm install node             // 安装最新稳定版本的node（即current版本）

3. 查看安装是否成功
$ node -v 

4. 更多nvm命令参考
nvm ls-remote                // 查看服务器上的node的所有可用版本
nvm uninstall 10.15.3        // 卸载某个版本的node
nvm use 10.15.3              // 切换到某个版本的node
nvm alias LTS 10.15.3        // 给某个版本起个别名
nvm unalias LTS              // 取消别名

如何安装旧版本的node

npm

node安装好后，npm也就自动安装好了，毕竟在国内，有时候下载会有网络问题，所以设置一下npm的淘宝代理。

//查看当前的代理地址
npm config get registry
//切换淘宝镜像
npm config set registry http://registry.npm.taobao.org/

yarn

这里我就不安装cnpm了，选择安装yarn，其中npm，cnpm，yarn等的区别，这篇文章有介绍

我选择用刚刚配置过淘宝镜像的npm进行安装，网上有好多是用brew安装的

npm i -g yarn
avatar
文章
阅读
粉丝