03 接口测试平台 前端项目创建

CSDN话题挑战赛第2期
参赛话题：学习笔记

别人写的平台再垃圾，也是用来淘汰你的。

代码更新地址：https://github.com/ahu965/api-automator.git

Python环境没有的，请自行安装，本教程采用的是python 3.9。

Django官网 https://www.djangoproject.com/

Node环境没有的，请自行安装，本教程采用的是node v17.6.0。

Vue.js官网 https://cn.vuejs.org/

上一节已经成功将Django自带的Admin管理后台启动了，今天开始进行前端项目的创建。

初始化vue3项目

使用命令npm init vue@3初始化vue3项目，如果之前没有执行过该命令，就会提示先安装create-vue@3，这个包是基于Vite创建的Vue3的脚手架。之前使用的vue-cli创建的脚手架是基于webpack的。

命令执行成功后，会提示一些默认的模块是否需要安装，根据提示选择No或者yes就可以了，下面大致介绍下这些模块：

• TypeScript 是否支持TypeScript语法，默认只支持JavaScript
• JSX Support JSX语言支持
• Vue Router 路由管理
• Pinia 状态管理，跟vuex功能类似
• Vitest 单元测试
• Cypress UI测试
• ESLint 代码质量检查
• Prettier 代码格式化

创建成功后，根据提示，先进入项目根目录，然后执行命令npm install安装项目依赖。这一步下载需要一些时间，同样可以更换为国内的镜像源。依赖全部安装成功后，使用命令npm run dev启动项目。

用浏览器打开网址http://localhost:5173，出现如下图所示的Vue LOGO就说明项目启动成功了。

推送代码

使用WebStorm打开项目目录，在项目目录中，使用命令git init将本地仓库初始化

然后使用命令git branch -m frontend/day01创建一个分支；接着使用命令git remote add origin https://github.com/ahu965/api-automator.git将本地仓库关联到远程仓库地址，最后将本地仓库，并推送到远程。

再次登录github就可以看到最新上传的代码了。