测试平台搭建 （二）前端框架Vue 快速搭建

 前言

此文主要是记录，搭建测试平台所使用的前端技术。

一、vue是什么？

vue.js 是一种single page app 类型的前端技术框架。详细介绍请访问官网

https://v1.vuejs.org/guide/installation.html

 

二、使用步骤

1.安装node

去node官网https://nodejs.org/zh-cn/下载node安装包进行安装

或者 mac 用户 使用brew 安装node

brew install node

2.安装vue

npm i -g @vue/cli

3.创建vue project

1. vue ui

     2.  此时游览器会自动打开创建项目向导 localhost:8080

        

 

  3. 创建项目 并指定自己机器上 所对应的js package manager 工具，比如yarn 或者 npm

      比如我的机器只安装npm的工具，这里选择npm

4.选择manual preset

5.这里我们要选择Babel,Router,使用配置文件(个人项目Linter/Formatter最好不要选，检查的过于严格有点烦)，点击下一步，进入配置页面

6.我们选择默认关闭，点击创建项目，然后会弹框提示我们要不要保存预设，需要的话输入预设名点保存，然后下次创建在预设页面就可以选择我们保存的预设，这里我们点击不保存，然后就会开始转圈圈等待了，好了之后就会进入到项目的仪表盘页面

 

 配置Element-UI 组建库

7.进入仪表盘之后 在左侧菜单栏选择插件，然后点击右上方的添加插件

8.点击添加插件,进入到添加插件页面，输入vue-cli-plugin-element，我们选择第一个下载量多的，然后点击右下角安装按钮。

9.安装完之后 我们选import on demand

 10.配置axios

在仪表盘页面选中依赖，进入依赖页面，如图所示

 

点击安装依赖，搜索axios，选中点击安装

完成之后就安装ok,到此前端项目初始化构建完成，然后我们用js 的ide 工具比如webstorm打开构建好的项目就能进行开发了。

4.运行vue项目

切换到刚才创建的项目的目录下运行

npm run serve

 

直到console 出现localhost:port , 使用游览器打开地址，出现下图就表明前端创建vue项目成功了
 

---

总结

简单的记录了下 vue 脚手架的搭建。为之后的测试平台的前端作准备。