MacBook Pro M1配置前端开发环境

xcode的安装

我直接在应用商店安装的

安装Homebrew

ARM版Homebrew需要安装在/opt/homebrew路径下,第一个是中科大的镜像源

中科大镜像源

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
复制代码
官方镜像源
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
复制代码

nvm安装

github上的会报443, github 的一些域名的 DNS 解析被污染,导致DNS 解析过程无法通过域名取得正确的IP地址。通过配置hosts也可以使用git的地址。
  1. 首先上ip查询网站,输入raw.githubusercontent.com,查询对应的ip

image.png 2. 修改hosts 在终端输入命令,vi /etc/hosts 增加185.199.110.133 raw.githubusercontent.com。点击esc按键,并输入:wq即可完成保存退出 图为修改过后的文件 image.png

gitee的安装地址
git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
复制代码
git的安装地址
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
复制代码
解决commond not found:nvm
  1. 进入.nvm文件夹 cd ~/.nvm
  2. 查看有没有.bash\_profile文件,直接输入ls就可以查看当前文件夹下文件如果有的话直接打开 open .bash\_profile 进入.nvm文件夹。如果没有的话先新建 touch .bash\_profile,新建完成之后,打开.bash\_profile,粘贴进去下边这两行代码,是两行,有换行,粘贴进去直接退出就可
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

#修改为taobao镜像源
export NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node
export  NVM_IOJS_ORG_MIRROR=http://npm.taobao.org/mirrors/iojs
复制代码
  1. 编译.bash\_profile source .bash\_profile
  2. 检查是否可以使用 nvm -v

解决每次关闭终端后,都需要重新执行source .bash\_profile才能重新使用nvm命令。原因:没有将配置添加到.zshrc文件中

  1. 到这里的时候需要看看我们是否有.zshrc,如果有直接打开 open ~/.zshrc。然后粘贴下边这两行代码
export NVM_DIR=~/.nvm
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
复制代码
  1. 如果没有.zshrc

第一步创建zshrc touch .zshrc 第二步打开zshrc open -e .zshrc 第三部在zshrc文件里输入source ~/.bash\_profile然后保存: source ~/.bash\_profile 第四步刷新环境 source .zshrc

如果使用的是zsh终端,只需要添加source .zshrc即可。 查看使用的终端命令 echo $SHELL 系统安装的终端 cat /etc/shells 切换终端 chsh -s /bin/bash //切换终端为bash chsh -s /bin/zsh // 切换终端为zsh

image.png

bash读取的配置文件:/.bash\_profile文件,zsh读取的配置文件:/.zshrc文件。在.zshrc文件中加上source ~/.bash\_profile,可以直接从.bash\_profile文件读取配置。

解决每次重新打开终端需要使用nvm use命令,用npm安装的vue cli才会生效。设置一个默认版本,nvm alias default xxx,xxx为版本号,nvm ls可以查询所有的node版本。以我的版本为例,如果要设置16.0.0为默认版本,则使用,nvm alias default 16.0.0命令设置。

image.png

借我亡命天涯的勇敢

13 声望
0 粉丝
0 条评论
推荐阅读
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木141阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

借我亡命天涯的勇敢

13 声望
0 粉丝
宣传栏