前端失踪人口再次回归之MAC环境部署搭建～

前言

新环境新工作方向 导致很久都不写代码了 
但是机缘巧合下 有活找上我了 想到现在的现状 一秒没犹豫就满口答应了
但是吧 我换电脑了 hhh 得从环境安装第一步开始 之前开发的时候一直用的windows电脑做的开发 所以mac的命令和环境安装的步骤都不了解 在这里记录一下 整个步骤和结果

计划：
1: 安装git，保存好公钥。
2: 安装npm，nrm，用nvm管理node
3: 安装ionic 运行起来Demo
4: 安装vs code 跑代码必备 ，还可以装点扩展工具啥的 AI可以试试

开发第一步安装git

git推荐的是使用Homebrew（包管理器，官网地址： https://brew.sh/zh-cn/ ）进行下载，所以先安装Homebrew。
打开终端输入安装指令：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装过程中需要输入mac的密码，运行结束后查看下安装结果，出现版本号则说明安装成功了。

下一步用Homebrew安装git brew install git （忘记截图了 hhh）

查看git版本号 git -v

查看git 公钥 分享出去就可以拉代码了 cat ~/.ssh/id_rsa

安装nvm

安装指令 brew install nvm

这里我遇到了一个报错

网上查说是需要先同意 Xcode 的许可协议，运行相关指令 sudo xcodebuild -license ，然后要我输密码，然后回车显示协议内容，然后输入 agree 就好了

解决完后继续执行安装指令

执行结束时会出现这样一段话，用于配置环境变量，配置好环境变量才可以使用nvm的命令

配置环境变量

先打开文件 vim ～/.bash profile

然后输入刚刚截图里面配置环境变量的那段话

输入完毕后，要摁一下电脑键盘左上角的esc按钮，然后insert才会消失

然后这个文件进入命令符格式，输入：wq ，敲回车退出该文件。

然后我遇到了这个报错：

"～/.bash" E212: Can't open file for writing

然后重新关闭了这个窗口，重新执行环境变量的配置。窗口卡死不动了。查看文件内容也没保存成功。所以重新执行。

AI告诉我可以走另外一种方式

1: 在终端中输入以下命令，使用 Vim 编辑器打开 ~/.zshrc 文件： vim ~/.zshrc

2: 然后输入该配置内容：

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

然后按照以下步骤保存并退出：
按下 Esc 键，确保你处于命令模式。
输入 :wq，然后按下 Enter 键。这表示“保存（write）并退出（quit）”。

如果也有人和我一样遇到了:wq无法输入，可以切换你的大小写。我发现中文模式下没办法输入，也是尝试了很多次才得出这个结论。

执行刷新配置命令 source ~/.zshrc

然后重新安装nvm -----超时N次才下载成功

用nvm去下载node

常用的nvm指令

查nvm有哪些指令 nvm help
查nvm版本 nvm -v
用nvm下载node nvm install <node版本号>

浅浅的下载了两个版本的node 嘻嘻

有了nvm 肯定它的邻居nrm也要安排上 毕竟镜像还是很重要的 会影响拔刀的速度

我的动作有点重复了 大家可以直接安装全局的nrm 我是装完nrm才想起来没装到全局 就又执行了一遍

然后就可以查看镜像源了 我配置taobao镜像源的时候报错了 说已经存在，然后我查询了一下。发现已经有很多镜像源了。不知道mac是不是自带安装nrm的时候就自动安装了镜像源

然后选中我们的taobao 公认的好用镜像～

node也下载好了 就可以下载个前端框架运行试试啦

先创建个空文件夹 然后在当前文件夹下打开终端窗口 我安装的是ionic的框架

先用nvm安装一下ionic cli 输入命令 npm install -g @ionic/cli

（记得nvm切换版本 我用12.16.3安装一直报node版本问题，切到20.16.0安装就好了）

然后开始用命令创建项目壳子 输入命令 ionic start myApp 我选择的是用Angular框架进行开发 所以选择的Angular 然后一路回车就好
（一直回车是在偷懒，hhh 后面只会有一个简略版本的tab组件的项目 大家也可以自由选择其他的更多组件的～ ）

运行后当前文件夹就会出现名为MyApp的项目文件啦 （依赖竟然自动安装了 hhh）

开始运行项目啦～

使用 VS Code 来开发项目，先去官网 https://code.visualstudio.com/ 下载一个mac版的（App Store搜不到 🤷）

然后直接双击打开下载内容，再双击就自动安装并打开啦
（我新增了一些扩展应用～ 顺手顺手～ 所以会多几个图标）

打开文件夹刚刚创建MyApp项目 查看下当前的node版本
（嘻嘻 果然给我改了 刚刚明明安装ionic的时候切到20.16.0了 ，因为用20.16.0安装的ionic cli 现在用12.16.3肯定会报错。所以要切换node版本至20.16.0）

然后就可以运行项目啦 运行命令 ionic serve

出现这个localhost地址的时候就证明运行成功啦 （久违的8100端口～～～）

浏览器自动打开了该地址 http://localhost:8100

至此 项目算安装且运行成功！💐💐💐💐💐💐💐💐💐💐💐

总结

计划：
1: 安装git，保存好公钥。 ✅
2: 安装npm，nrm，用nvm管理node✅
3: 安装ionic 运行起来Demo✅
4: 安装vs code 跑代码必备 ，还可以装点扩展工具啥的 AI可以试试✅

初始计划均圆满已完成～ 😄

一晃好几年没写过代码了 hhh 
这次突如其来的需要准备环境再次进入开发的状态是有些紧急，但是还好算是再次成功入门了

不知道后面用Mac写代码还会遇到哪些问题，但是我还是和之前的我一样，会找办法去解决遇到的问题。所以一切都会没事哒～

遇到问题，多查查，现在AI也很棒，很多问题，很多报错截图丢给它们也能有很不错的答复。确实很便捷，社会环境在进步。

相信你遇到的问题别人都会遇到的，调整好心态，好好加油⛽️

ps：夸夸自己，感觉效率还可以哦 今天早上十点收到的微信消息说有活了。然后我十点半就有会议，下午也是三个会。中间穿插着磕磕绊绊的部署环境，本来想等到周末安心安装的，但是说周末要去过需求，估计也是会很忙，就提前准备啦。今天也是很充实的一天，现在晚上十一点啦。开心收工～Zzzzz～