所谓工欲善其事必先利其器，在开发vue3框架的前端工程之前，我们需要把环境搭建好。这几年前端的技术发展的实在是太快了，其速度堪比高铁啊，就像我们熟悉的前端基础引擎：node，我记得两个月之前最新的lts版本还只是v18.xxx呀，今天一看居然已经到了v20.10.0。同时我们看到vue的打包工具vite近期也发布了vite5版本，前端的迭代速度可见一斑。但是不幸的事我们许多前端的工程向下兼容并不是很好，我们常常遇到node高版本无法编译低版本的工程，同时框架层面我们也知道vue3和vue2也并没有做到完全的平滑过渡。

vue

因此由于兼容性问题，我们的机器上常常需要切换node版本。以下就是小编常用的工具和插件：

nodejs版本管理工具：nvm

• nodejs版本的管理工具nvm的安装需要依赖nodejs，而nvm可以安装管理不同版本的nodejs，那么到底是要先有鸡还是先有蛋？这就是程序员常常听到的：eat your own dog food。

自己依赖自己

• 第一步通过各自操作系统的包管理工具安装随意一个nodejs（windows可以直接双击安装，mac提议使用brew）。
• 使用npm安装nvm

npm i -g nvm

• 此时你的电脑里已经有了nvm，后面的nodejs的管理都交给他处理就行了。以下是常用的nvm命令

// 获取当前系统中可用的nodejs版本
nvm ls
// 切换nodejs版本
nvm use v20.9.0
// 安装nodejs
nvm install v20.10.0
// 获取可用的lts版本
nvm ls-remote --lts
 
// 有了这几个命令，日常使用基本已经算是无敌了

npm源工具：nrm

和java的maven一样，npm就是前端界的maven，是专门用于包管理的工具。默认情况下npm会从它的官网去获取前端的包，而我们的网络由于【伟大之墙】的存在而常常抽风，因此我们就需要将npm的仓库（repository）切换到国内以获取更快的速度。

• 通过npm安装nrm（这又是一个先有鸡还是先有蛋的问题）

npm i -g nrm

• 通过nrm管理npm的repository

// 获取当前配置的所有npm源
nrm ls 
// 注册一个新的源（咱们以淘宝的源为例）
nrm add taobao https://registry.npmmirror.com/
// 切换当前使用的源
nrm use taobao

• 通过上述两步我们就可以快速的进入开发了，而且能做到随心所欲的切换node版本，同时让我们的npm i的速度直接起飞。

IDE配置

小编在此再次向大家安利神级编辑器：vscode。虽然这个工具是大家认为的“低性能”的差生：electron开发的，但是小编在实际开发过程中完全感受不到它的“卡”，反而有许多牛叉的特性值得我们去使用。其插件市场就像是宝藏库一般值得我们去探索。（部分插件在另一篇介绍IDE的文章中介绍过，感兴趣的也可以去小编的《宇宙神级开发IDE，每年给你节省一个月工钱》查看），这里介绍另外几个小编常用的插件

• HTML5 extension pack：给我们提供了一些基础的html5的模板

html5基础页面

• Live Server：用来启动一个web服务，让我们边开发边调试。
• SVG：用来编辑SVG内容（或者用来格式化SVG文件）

svg文件编辑、格式化以及预览

• Color Picker：取色板。css常常要写的吧，颜色是必须的吧，这个重大性就不必多说了吧，五彩斑斓的黑能调出来的吧？

调色板

• SCSS IntelliSense：scss能协助我们更灵活更省力的书写样式哦，这个插件也值得尝试。

写在最后

• 通过这么一系列的骚操作，你的前端效率又会提升一大截，早早地完成任务之后千万别去卷别人哦。
• 朋友们有什么更好的玩法必定要让小编知道哦。。。。