啊胡

V1

2022/09/16阅读:19主题:自定义主题1

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

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

代码更新地址: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就可以看到最新上传的代码了。

分类:

后端

标签:

软件测试

作者介绍

啊胡
V1