本小节，飞飞将带领大家将前端的开发环境搭建起来，以便用来跑前端程序。
特别说明：由于我使用的是mac电脑，因此教程基本是基于mac电脑来的，但是大家不用担心windows电脑的操作基本一致，对于环境的安装，我会尽量兼顾windows电脑。
一、安装node.js环境
打开nodejs官网的下载页面：https://nodejs.org/zh-cn/download , 选择对应系统的版本进行下载
官网给提供了两种方式
1、命令行的安装方式，截图的上方。
2、安装包的方式，下载安装包，一步步安装即可，这个比较简单不叙述了。
下面主要说另外一种安装方式。
二、mac系统安装nvm实现多版本node控制
在mac下安装nvm是为了管理多个版本的node
前提条件 在macOS上使用安装homebrew
第一步：删除现有的node
若是系统上已经安装了node，请先卸载
brew uninstall --ignore-dependencies node
brew uninstall --force node
第二步:在Mac上安装NVM
现在，你的系统已经准备好了，可以进行安装。更新Homebrew软件包列表并安装NVM。
brew update
brew install nvm`
接下来，在home目录中为NVM创建一个文件夹。
mkdir ~/.nvm
配置所需的环境变量。
vim ~/.bash_profile
然后，在 ~/.bash_profile（或~/.zshrc）中添加以下几行
export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh
按ESC + :wq 保存并关闭你的文件。
接下来，将该变量加载到当前的shell环境中。在下一次登录，它将自动加载。
source ~/.bash_profile
NVM已经安装在你的macOS系统上。 下一步，在nvm的帮助下安装你需要的Node.js版本即可。
第三步 : 用NVM安装Node.js
首先，看看有哪些Node版本可以安装。要查看可用的版本，请输入。
nvm ls -remote
现在，你可以安装上述输出中列出的任何版本。你也可以使用别名，如node代表最新版本，lts代表最新的LTS版本，等等。
nvm install node ## 安装最后一个长期支持版本 nvm install 10
安装后，你可以用以下方法来验证所安装的node.js是否安装成功。
nvm ls
如果你在系统上安装了多个版本，可以使用下面的命令切换版本。
nvm use 18.19.1
使用以下命令查看是否安装成功
node -v
npm -v
若是输出版本号，那代表的就是安装成功啦
顺带将执行以下命令，将pnpm安装上
npm install -g pnpm
三、Windows下安装nvm
下载地址：https://github.com/coreybutler/nvm-windows/releases
选择 nvm-setup.exe 下载，然后一路下一步安装就可以了，这里不在叙述，相信大家都会。
之后的用法命令和mac系统一样。
四、安装开发工具VSCode
为了高效的开发前端页面，我们一般需要选一个好用的开发工具，目前比较常用的是VSCode，因此我们也选择此工具来开发vue3。
下载地址
前往官网：https://code.visualstudio.com/ 选择所需要的版本进行下载，我这里选择的是macOS的版本，你若是windows默认就是下载windows版本。
下载后一步步安装即可，mac和windows是一样的安装方式。
设置中文
刚安装后界面打开后是英文，但是对我们来说还是比较习惯中文，因此我们可以汉化一下，你若是想要学习英文，也可以选择用英文。
在VSCode的左侧栏中，点击插件市场按钮选项，然后在弹出的搜索中输入中文，选择第一个插件，进行安装，安装后重启插件，再次打开编辑器，就可以看到编辑器已经汉化成功。
插件安装
开发工具有了，我们给 VSCode 中安装一些开发必备的插件，这样可以提升我们的开发效率。
Vue (Official)
这一款专门用于构建Vue扩展的插件，是在VSCode上开发Vue3应用，必不可少的，建议你一定要安装上。
Vue 3 Snippets 代码补全插件
此插件可以自动补全代码，提升编码效率。
别名路径跳转
这个插件非常的有用，当你想看这个名称对应的位置时，可以直接跳转过去。
别名路径跳转插件，支持任何项目，可以自由配置映射规则，自由配置可缺省后缀名列表
使用方法：鼠标移动到路径上，按住ctrl并单击就会跳转
Auto Close Tag
自动闭合结束标签，当输入<p>标签时，则自动添加</p>结尾标签。
CSS Navigation
可以通过点击代码中的类名，直接跳转到对应的样式代码。
Tailwind CSS IntelliSense
的项目中使用到 Tailwind CSS 样式库，会自动提示、高亮等，方便开发。
还有一些好的插件，需要在开发中，不断的发现，我们可以先将常用的安装上，之后在安装别的。
结束
本小节，主要给大家说一下前端开发环境的安装，以及工具和插件的安装，这些是进行前端项目的前提，学习过程中慢慢适应。
