1.前言
最近在学习程序员鱼皮大佬的相关的项目教程，但是觉得自己太菜了，后端的这个很多的技术栈都不是很理解，对于前端的一些东西，也是完全不懂，之前在学习这个用户中心项目的时候了解过一些这个相关的内容，但是当时这个用户中心项目怎么起都起不来，后面也就放弃了，但是当时的那个项目基本上都是前后端完成了的；
这次在这个程序员鱼皮的编程导航上面学习的是关于聚合搜索和这个在线OJ的这个相关的内容，这个里面的一些技术我不是很了解，所以打算学习一下；
但是这两个项目都是使用的vue进行前端的设计，虽然我可以直接跳过去，但是我知道即使我拉去别人的代码，这个环境配置的问题也很难正确的运行起来，而且这个前后端的联调之类的，肯定是需要我知道这个前端的基础的，因此我决定还是学习一下这个相关的vue的内容把，毕竟用到的还是很多的，也是早晚的事情，肯定是逃脱不掉的；
2.工程创建
2.1vue-cli脚手架创建
我看程序员鱼皮的这个项目里面目前主要使用的还是这个脚手架创建的这个方式，但是官网上面针对于这个脚手架目前是维护模式了，更加推荐我们使用这个vite进行这个项目的创建；
我选择的是尚硅谷的教程，因此尚硅谷的老师针对于这个教程，主要也是使用的这个vite，也就是下面介绍的这个第二种方式进行这个项目的创建的，但是脚手架的方式大家可以去官网上面进行查阅，也是可以的，后面我尝试去学习聚合搜索和在线判题系统的时候，也是会写一写自己的这个笔记的，搭建项目的这个流程，自己的这个理解之类的，到时候还是使用的这个脚手架的方式进行的这个项目的创建；
2.2vite创建
vite和webpack是比较类似的，但是这个打包的速度是非常的快速的：如下图所示
可以看到，这个vite进行项目创建的时候，这个速度是很快的；
2.3项目创建
下面的这个是项目的启动方式，dev是我们的这个项目里面的一个文件夹里面的东西，文件夹的名字叫做package.json
跳转之后，这个进入的就是我们的vue默认的这个界面
顺便说一下，这个默认打开这个初始化的项目之后，这个里面其实是没有这个终端的，这个时候如果你想要输入这个npm的命令，肯定是需要把这个终端调用出来的，这个vscode之前我使用不是很多，即使是使用的话，也是有这个Python的这个直接运行显示出来这个终端的，这个我看尚硅谷的老师很快的就把这个终端调用出来的，我自己也是第一次知道这个方法，帮助一下可能和我一样这个编程的基础不是很好的同学：
使用ctrl+反引号（数字键1左边的那个按键）就可以把这个终端调用出来，然后就可以把输入这个npm run dev命令 把这个项目跑起来了，跑起来了之后，我们就可以点击这个给出来的这个链接直接进入这个前端的页面，在浏览器里面看到这个初始的效果拉；
2.4关于插件的安装
为什么使用这个vscode进行这个前端的开发，因为这个vue在vscode里面精心准备了这个对应的插件，非常的舒服，但是我看的这个尚硅谷老师的教程的笔记里面使用的是下面的这两个插件：
但是我找了很久都没有找到，后来发现这个插件已经被放弃了，换成了新的插件，大家需要注意一下：上面的两个插件都是集成在了下面的这个插件里面
其实这个在弹幕里面也是有说的，但是我嫌浙江华海金额个弹幕太乱了，所以把这个弹幕关闭了，所以我觉得有些时候这个弹幕还是很有用的；
下面的这个就是集成的新的插件，安装这个新的即可：
2.5代码分析
下面的这个是我们的mount指向的这个内容，因此大家也应该发现了，这个index。html里面可以没有其他的，但是这个id和这个script是一定需要有的；
2.6如何把这个脚手架停下来
我们的这个npm run dev之后，这个脚手架就是处于运行的这个状态了，这个时候，我们如果想要把这个脚手架停下来，这个时候可以使用ctrl+C,这个时候会问你确认删除吗，你选择yes即可，这个就是退出我们的这个项目，这个时候你可以输入其他的这个指令了；
