Java后端（番外篇）——springboot学习之路（项目实践）第四天

前端开发

前后端分离式的开发，有后端的地方就有前端，为了配合后端的学习，简单了解一些前端知识，会使用即可，方便展示后端的效果。

前端开发工具

VScode。
下载完成后安装以下插件，安装红色方框内的插件（安装完插件需要重启VScode，一般会有重启的提示吧）。

下载安装node.js

安装一般情况下有两种方式，有一种较为快捷简单，直接下载对应版本的后缀为msi的文件，自动安装和配置路径。但是我在实际使用的过程中，一直报错，无奈之下选择了后缀为zip的压缩包，解压后，手动配置路径。这里具体的安装过程可以多搜搜相关的帖子。

创建前端工程

VScode的项目创建与众不同，首先在任意一个位置创建一个文件夹。（如在E盘中创建vue文件夹）

然后在VScode中点击文件，选择打开文件夹，文件夹打开后；再次点击文件，选择将工作区另存为……，为工作区起一个名字，存储在刚刚创建的文件夹下面。

完成工作区的创建后，创建一个文件夹vue，在其中选择新建文件创建hello.html。

鼠标右键，选择open with Live Sever（之前一开始安装过的插件）,会在浏览器看见以下结果。（端口号是默认的5500，不需要作出修改）

解压文件vue-admin-template-master，并复制到工作区下。

右击vue-admin-template-master，选择在集成终端中打开，在命令行输入npm install，安装依赖。

之后会出现一系列名称填写，不需要理会，直接回车就会自动默认，到最后会问你yes/no，选择yes即可。

执行模板

完成上述操作后，在命令区输入npm run dev，代表运行开发版本，第一次加载可能会慢一点，浏览器自动打开界面。如下图所示，这是模板自带的登录界面，足够我们初级使用。

账号和密码都是admin，点击登录，大部分时间都不会成功（偶尔会成功），因为模板的服务器时常会出现问题。
我们按下F12，点击登录。

配置的域名不是我们设置，在正式开发中，我们会更换。
具体的更换教程在Java后端第四天（正式版）中，如果能实现这一步，任务就基本完成了。