3-搭建开发环境原创

在学习with之前，我们需要搭建一个开发环境。首先我们需要下载安装和初始化Vs code的。大家可以打开Vs code的官方网站code.visual studio.com。在首页面上大家能看到我们这里发布的一个Vs code的版本，大家可以直接的点击这个按钮就可以了，因为它会根据浏览器判断出我们当前操作系统的版本，比如这里边它根据我现在的Mac系统监测出让我download Mac universal build。当然你也可以点击这个下拉的箭头，然后在这里边根据自己的操作系统来选择相关的版本，比如你可以选择Mac OS的universal stable，也可以选择Windows叉64的users install，这里大家点击这个按钮就可以下载了。当然你如果是其他的平台的话，你可以点击这个按钮，不过呢，我们一般情况下都使用的是Mac OS和Windows。

下载完了以后，大家可以根据它下载的安装包的安装向导，一步一步的安装就好了，这里呢，由于篇幅问题，我就不再赘述了。下载完成了以后呢，大家能看到类似于这样的一个Vs code的界面，在使用它之前，我先帮大家来做一些初始化的工作，首先呢，大家可以点击这个扩展按钮，在这里呢，我给大家推荐四个扩展，第一个叫做Chinese，呃，Simplified就表示它是一个简体版，什么意思呢？它可以帮助我们去汉化Vs code，因为Vs code刚安装好了以后是一个英文版。第二个强烈大家推荐的一个所谓的皮肤啊，叫做monoch pro，在之前的视频里，好多同学都问我，我的现在的编辑器到底是什么样的一个皮肤，我会告诉他是monok pro，这个皮肤呢是收费的，他只是在Vs code的刚开始打开的时候会弹出一个窗口。

那其他使用的时间呢，它是不会弹出的，所以大家可以一直使用它这个试用版。然后接下来大家可以安装可选的live server，也就是可以让Vs code直接的打开一个HTTP，或者是呃，某个协议的一个server服务。还有一个，如果是在你的项目里边使用view，你比方说我们讲V可能会穿插使用view，那你可以去安装一个view的这样的一个工具，叫做ver，那这四个所谓的扩展如何安装呢？大家直接在这里边搜索相关的这四个扩展的名字就可以，比方说大家可以输入一个live server，那么它就会给你显示出live server的一系列的东西。当然了，一般是第一个是完全匹配的，大家可以点击安装按钮就好，因为这里边呢，我已经安装好了，它是一个配置按钮。

扩展安装好了以后呢，我在推荐大家一个非常适合于我们编程的字体。这个字体的名字呢，我们回到浏览器，我们来看一个页面，叫做FA code，这个字体呢，特别适合于咱们编程啊，或者说我们可以把它安装在我们的Vs code里边，这里呢，我给他打开了一个网站，叫做放点Google的com，但是有的同学可能打不开谷歌的网站，需要呃，加个梯子，或者是做个科学上网，那如果是你打不开的话，你可以在百度上去搜索这个fair code的这个字体。比如现在呢，我们可以在Google放这里边去download family，这样的话呢，这个字体就下载下来了，下载下来以后呢，大家可以直接把这个字体的文件夹，然后解压到你的电脑的某个目录下，然后你就可以安装了，那Windows系统的话，大家可以找相关的安装新字体的方法，那我给大家演示一下Mac系统的安装某个字体的方式，大家可以点击command加空格，然后输入一个字体册。

那这样的话呢，我们就可以打开类似于这样的一个窗口，然后大家点击用户点击添加，然后把我们刚才下载好的那个目录啊选择上点击打开就可以了，这样的话我们就相当于可以在我们本地安装fair code这个字体了，那字体安装完了以后呢，嗯，还并没有呃完全的实现这个效果，大家呢，可以点击这个齿轮的这个图标，然后点击设置。在第一个打开的窗口里面，在常用设置里，大家可以设置我们的found size，比如这里呢，我们设置的是14，关键是来配置刚才我们装好的fair cold这个字体，大家可以在放在family的这个前面添加两个新的字体，一个是fair cold light，一个是FA cold，中间用逗号来分隔。

那设置好了以后呢，大家不用保存，它会自动保存，那我们来试验一下这个字体的效果，首先呢，大家可以点击我们这个所谓的当前资源管理器的一个目录，然后再点击这个添加，我们可以添加一个test JS这样的一个JS文件，大家看到这里边的这个目录的颜色啊，以及这样的字体都是因为我们安装了刚才的monoc pro啊，以及刚才我们安装的f code的这个字体，那么我们来验证一下这个字体。比方说我们用Y来定义一个变量X等于100，大家发现这个所谓的啊，皮肤的颜色或者是字体就是这样的，那下面呢，我们可以去实验一下，比方说我们用A语句呃来判断一下X是否等于100，大家发现这里边的等于号是一个三条横线的等于号，也就是我们这个字体呢，特别智能的能够结合我们编程的逻辑做一些效果，不过这只是效果而已，它其实实上还是三个等于号，写到这儿以后就证明了我们这个字体已经安装成功了。安装和初始化完我们的Vs code，下面我们再去安装第二个东西，就是node JS，因为V是基于node的一些包或者是模块来工作的，那么我们得需要先安装node JS。

我们现在回到我们浏览器，我们打开note JS的官方网站，在首页面上呢，这里面有一个download for Mac OS，这个浏览器还是根据我们当前的操作系统，然后识别出啊，自动的让我们去下载Mac这个版本，如果你使用的是Windows的话，那应该就是Windows版本，那么这两个一个是LTS，一个是current，大家下载哪一个呢？那一般我们下载左边的这个long term support。

现在的版本呢，是16:13点二，那我们点击它，它就会下载一个安装包，我们根据安装向导安装就好了，安装好了以后，我们怎么去验证我们的note JS已经安装成功了呢？大家可以返回我们的Vs code。在这里边点击一下键盘的CTRL加波浪线，然后呼唤出我们Vs code的集成的终端，在这里边呢，大家可以去输入一些命令，比如我们输入一个node-V，这样的话我们就能验证出当前我们这个系统已经成功的安装了note的环境，它的版本是16:13点二。Noe安装完了以后呢，还有一个东西就自动的安装好了，就是NPM，大家可以去验证一下，输入NPM-V，你会发现它安装了一个8.1.2的NPMNPM叫node package manager，就是node的一个包管理工具，有了这个工具以后，我们才能基于它去安装其他的包，比方说大家知道现在比较流行的还有一个NPM的替代品，就是ern亚N是Facebook开发的一个快速安全的包管理工具，那我们可以通过NPM来去安装它，我们执行n PM install12-G，这样的话，我们就在全局的范围内安装了一个ern，现在呢，还有一个更好的工具来替代NPM和ern，就是PNPM，那么在我们V的官网里边呢，大家也看到了，他建议我们去用PNPM去安装V的那样的一个方法，一会儿呢，我们就使用这个。

PNPM，那它怎么安装呢？我们可以通过n PM install，我们可以把install简写为I，后边我们写一个PNPM-G，这样的话我们就可以在全区里边去使用这个PNPM了，一会儿呢，我们使用它来去安装VPNPM，目前giateb上已经有将近10K的star，现在已经相对成熟和稳定了。

它由NPM和亚N衍生而来的，但却解决了NPM和亚人内部潜在的bug，并且极大的优化了性能，扩展了使用场景。大家呢，可以去看我给大家准备的其他的资料去了解它。好，至此呢，我们的基本的V的开发环境就安装好了，下一步呢，我们来初始化一个V的项目。