草庐IT

新入手Mac配置前端环境教程

雨季mo浅忆 2023-04-28 原文

目录

1、安装 Xcode

2、安装 Homebrew

3、安装 Git

4、安装 nvm

利用 nvm 安装 node

Mac系统安装nvm后,nvm命令找不到


跳槽新进入一家公司 ,给新配置的 Mac 电脑

那么我们接下来该如何步入正常的前端开发流程呢 ?

在此稍微记录一下 , 节省时间 ,以防后期再用到 。

1、安装 Xcode ;

2、安装 Homebrew ;

3、安装 Git ;

4、安装 nvm ;

    利用 nvm 安装 node 指定版本 ;

参考文献 :

1、

【git】在mac上用brew安装并配置git教程

2、Mac 系统使用 Homebrew 安装 nvm

https://www.jianshu.com/p/bdbc51fa8ce6

3、 

MacOS中brew安装完毕后找不到nvm,zsh: command not found:nvm


1、安装 Xcode

在 App Store 里下载 , 此工具会节省你大量时间

( 耐心等待 , 十多个 G 呢 , 估计得下载几个小时 , 实在不行、可尝试 不下载 )


2、安装 Homebrew

学 Git 需要安装 ,留一个自认为最简单的流程 。

参考 :

1、
Homebrew国内如何自动安装(国内地址)(Mac & Linux)
2、Git 官方下载
Git - Downloading Package

3、

Git实用教程2:安装Git

参考1、知乎专栏 ,出现问题也可去原网站找原因 。

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

打开 Mac 终端 ,复制 粘贴 回车

之后跟着流程走就行 => 下载感觉也挺慢的 , 不要急哦 ~

安装成功后自行检查一下 : brew -v

这里需要按照提示运行一下 :

git config --global --add safe.directory /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core

git config --global --add safe.directory /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask

至此 , brew 就算完全安装成功啦 ~


3、安装 Git

brew install git

安装成功如下

ps:如果安装过 Xcode 可以试试

sudo apt-get install git

4、安装 nvm

1、nvm 介绍

当我们使用 node 开发网站时 ,可能会同时需要运行多个项目 ,

每个项目所使用的 node 版本又不相同 ,

或者当我们需要学习新的 node 时 ,多个版本之间的切换和维护会变得非常麻烦和棘手 。

nvm 的出现就是为了解决这个问题 。

详细介绍请看  nvm官网

2、安装 nvm

此处选择 Mac 系统自带的 Homebrew 安装 nvm
Homebrew 是一款 Mac OS 平台下的软件包管理工具 ,

拥有 安装、卸载、更新、查看、搜索 等很多实用的功能 。

简单的一条指令 ,就可以实现包管理 ,而不用你关心各种依赖和文件路径的情况 ,十分方便快捷 。简单来说 ,Homebrew 提供 Apple 没有预装但你需要的东西 。

详情请见   Homebrew官网

2.1、安装 Homebrew( 如已经安装 Homebrew ,直接进行跳到 2.2 )

检查电脑是否有安装 Homebrew ,打开终端输入 :

brew -v

如果出现版本号 ,则表示已安装 Homebrew ,如果提示 :

-bash: brew: command not found

则表示未安装 Homebrew ,需要先安装 Homebrew 。将以下命令复制到终端执行 :

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

等待完成之后,再次输入: brew -v , 得到版本号 ,表示 Homebrew 安装完成

2.2、使用 Homebrew 安装 nvm

如果已经安装 Homebrew ,那么直接在终端输入命令 :

brew install nvm

回车之后即可进行安装,安装成功提示:

==> Summary
🍺 /usr/local/Cellar/nvm/0.33.11: 7 files, 138.6KB, built in 13 seconds

安装成功之后 ,还不能直接使用 nvm 命令 ,需要进行以下配置 ,

将以下命令复制到终端执行 : 

echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile

修改之后,需要重新定向来源,复制以下命令并执行:

. ~/.bash_profile

此时在终端输入:

nvm list

即可查看当前电脑中安装的 node 版本 ,如果未曾安装 node ,则显示为空 。
接下来就可以使用 nvm 来安装和管理 node 版本了 。


nvm 常用命令介绍

1. nvm list 是查找本电脑上所有的node版本
    - nvm list 查看已经安装的版本
    - nvm list installed 查看已经安装的版本
    - nvm list available 查看网络可以安装的版本
2. nvm install <version> 安装指定版本node
3. nvm use <version> 切换使用指定的版本node
4. nvm ls 列出所有版本
5. nvm current显示当前版本
6. nvm alias <name> <version> ## 给不同的版本号添加别名
7. nvm unalias <name> ## 删除已定义的别名
8. nvm reinstall-packages <version> ## 在当前版本node环境下,重新全局安装指定版本号的npm包
9. nvm on 打开nodejs控制
10. nvm off 关闭nodejs控制
11. nvm proxy 查看设置与代理
12. nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror,如果不设置的默认是 https://nodejs.org/dist/
nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是: https://github.com/npm/npm/archive/.
13. nvm uninstall <version> 卸载制定的版本
14. nvm use [version] [arch] 切换制定的node版本和位数
15. nvm root [path] 设置和查看root路径
16. nvm -v / nvm --version 查看当前的版本

利用 nvm 安装 node

# 最新稳定版本 ( 最新尝鲜版 )
nvm install stable

Node.js

# 长期维护版本 ( 推荐下载 )
nvm install 16.18.0


Bug 复现 :

Mac系统安装nvm后,nvm命令找不到

第二天打开终端再次检查昨天安装的东西是否还 “ 健在 ” , 结果有的就没了 。。

 那没办法 , 就 只能再想办法解决了 :

1、启动终端 Terminal

2、进入当前用户的 home 目录

cd ~

3、创建 .bash_profile 文件

touch ~/.bash_profile

4、编辑 .bash_profile 文件

open -e .bash_profile

5、在 ~/.bash_profile 添加两行 :

export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh 

6、保存文件 command + S ,关闭 .bash_profile

7、更新刚配置的 环境变量

source .bash_profile	

8、验证是否成功

echo $NVM_DIR

OK , 解决 ~

但是发现关闭终端后 , 再次打开还是老毛病 , nvm / node 啥的就找不到了 ,

nvm: command not found

很不幸,我跟着网上的 N 篇教程,下载完毕之后试过大家给出的 N 种方法,

包括什么重启终端、在 nvm 文件夹里也复制一份 .bash_profile 文件、

手动修改配置文件啥啥啥的,结果还是提示 nvm: command not found 

后来找到原因就是说 :

运行 source ~/.bash_profile 之后会生效,但是只生效一次

后来总算找到解决方法,大致是因为我的系统是最新更新的 macOS Catalina 系统,默认的 shell 是 zsh,所以找不到配置文件啥的。

解决方法如下:

open ~/.zshrc

 

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

Nice ~ , 真正解决了 !!

有关新入手Mac配置前端环境教程的更多相关文章

  1. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本,可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中?您能否举例说明如何做到这一点?提前谢谢你。 最佳答案 首先,您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后,在您的应用中阅读它:require"yaml"arg

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器,但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型,并且只返回text/plain,如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  4. ruby-on-rails - 如何在 mac os snow leopard 中升级 ruby​​ 和 rails - 2

    我想将我的MacSnowLeopardruby​​从1.8.7升级到1.9.1版本,有人知道轻松且最好的升级方法吗?因为我读了一些论坛/帖子/博客/讨论说覆盖苹果发布的ruby不好将Rails从版本2.2.2升级到2.3.8的最佳方法是什么?因为我找到的所有信息都仅适用于豹/老虎,而且很少有关于雪豹的复杂文章。他们还说覆盖apple提供的rails不好吗。谁能帮帮我?谢谢。 最佳答案 DanBenjamin有一些greatinstructionsforcompilingandinstallingRuby,RubyGemsandRai

  5. ruby - 在不使用 RVM 的情况下在 Mac 上卸载和升级 Ruby - 2

    我最近决定从我的系统中卸载RVM。在thispage提出的一些论点说服我:实际上,我的决定是,我根本不想担心Ruby的多个版本。我只想使用1.9.2-p290版本而不用担心其他任何事情。但是,当我在我的Mac上运行ruby--version时,它告诉我我的版本是1.8.7。我四处寻找如何简单地从我的Mac上卸载这个Ruby,但奇怪的是我没有找到任何东西。似乎唯一想卸载Ruby的人运行linux,而使用Mac的每个人都推荐RVM。如何从我的Mac上卸载Ruby1.8.7?我想升级到1.9.2-p290版本,并且我希望我的系统上只有一个版本。 最佳答案

  6. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候,windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表,但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题),加之暑假之后对cmake实在是爱不释手,且这样配置确实十分简单(其实都不需要配置),故斗胆妄言vscode下配置CV之法。其实极为简单,图比较多所以很长。如果你看此文还配不好,你应该思考一下是不是自己的问题。闲话少说,直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么,我不说是谁。CMake是一个开源免费并且跨平台的构建工具,可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

  7. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  8. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网,点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows,点击立即下载。3.下载完成,文件大小615MB,如下图:4.鼠标右击,以管理员身份运行。5.点击下一步6.勾选条款,点击下一步7.先勾选,再点击下一步8.去掉勾选,点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证,复制填入,然后点击输入即可,亲测有效。13.点击完成14.重启系统,点击是15.双击VMwareWorkstationPro图标,进入虚拟机主

  9. 神州数码无线产品(AC+AP)配置 - 2

    注意:本文主要掌握DCN自研无线产品的基本配置方法和注意事项,能够进行一般的项目实施、调试与运维AP基本配置命令AP登录用户名和密码均为:adminAP默认IP地址为:192.168.1.10AP默认情况下DHCP开启AP静态地址配置:setmanagementstatic-ip192.168.10.1AP开启/关闭DHCP功能:setmanagementdhcp-statusup/downAP设置默认网关:setstatic-ip-routegeteway192.168.10.254查看AP基本信息:getsystemgetmanagementgetmanaged-apgetrouteAP配

  10. hadoop安装之保姆级教程(二)之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的,针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜,提出了全新的资源管理框架YARN. ApacheYARN(YetanotherResourceNegotiator的缩写)是Hadoop集群的资源管理系统,负责为计算程序提供服务器计算资源,相当于⼀个分布式的操作系统平台,⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现,但是因为具有⾜够的通⽤性,同样可以⽀持其他的分布式计算模

随机推荐