Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。
前言
在之前的文章中，我们已经完成了简单的后端框架搭建，并实现了 user 简单的增删改查接口，现在我们来搭建前端框架对接这些接口。
前端框架搭建
新建 vue 项目
在后端代码（first_project）的同一个目录（D:\giteeSpace\myExercise\my_project）下，打开命令行工具，输入 vue create first_project-front 命令初始化一个 vue 项目：
回车，并等待一段时间，初始化 vue 项目成功：
根据提示，输入命令 cd first_project-front ，进入到该项目中，再输入命令 yarn serve（或 npm run serve）启动 vue 项目：
在浏览器中输入：http://localhost:8080/ 即可访问：
至此，前端 vue 项目算是初始化成功了，接下来，我们需要安装一些开发所需的工具，为了方便，我将使用 vs code 打开该项目并进行操作。
安装开发所需工具
1、安装 vue-router
安装命令如下：
npm install vue-router
安装成功后，package.json 文件内容如下：
安装的时候需要注意 vue 与 vue-router 的版本，如果版本不匹配，启动项目时会报错，比如下面的版本不互相支持，就会报错：
2、安装 axios
安装命令如下：
npm install axios
安装成功后，package.json 文件内容如下：
3、安装 axios-utils
安装命令如下：
npm i axios-utils
安装成功后，package.json 文件内容如下：
4、安装 vuex
安装命令如下：
npm install vuex --save
安装成功后，package.json 文件内容如下：
同样的，安装的时候也需要注意版本问题。
5、安装 element-ui
安装命令如下：
npm i element-ui -S
安装成功后，package.json 文件内容如下：
至此，开发所需的基本工具就安装完了，后期可能会有更多工具要安装，可以根据项目需求自行选择。下面我们就可以进行代码编写了。
