【测试平台开发】——02Vue前端框架实战—router路由设计（登录页面）

一、安装vue-cli

Mac系统：

sudo npm install -g vue-cli

检查是否安装好：

vue -V

二、创建新项目

1、打开Vue项目管理器

输入命令：

vue ui

但是没有任何反应，再输入检查，没有ui：

vue -h

经查询得知，需要升级vue脚手架：

cnpm i -g @vue/cli

再输入：

vue ui

参考文章：《【Bug解决】输入vue ui没有反应的原因和解决办法》

2、创建项目

1）第一步：

2）第二步：

3）第三步

4）第四步

5）第五步

3、添加插件

1）安装vuetify

2）安装axios

与后端进行交互与ajax

遇上同理。

4、运行项目

在aitest目录下运行命令：

npm run serve

打开地址：http://localhost:8080

三、实战部分

1、vue router路由设计

1）首先新创建一个登录页面，SignIn.vue文件

2）再配置路由，进入router文件夹中的index.js文件中

引入SignIn.vue文件，并且添加路由

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue'
import SignIn from '../components/SignIn.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'SignIn',
    component: SignIn
  }
]
const router = new VueRouter({
  routes
})

export default router

3）修改App.vue

加上<router-view></router-view>标签，子组件放在父组件里面，就可以展示设置的路由路径了

<template>
  <v-app>
    <router-view></router-view>
  </v-app>
</template>

<script>

export default {
  name: 'App',

  data: () => ({
    //
  }),
};
</script>

4）SignIn.vue文件编写前端代码

// Html部分
<template>
    <div class="login-form">
        <h1>登录</h1>
        <v-col cols="12">
          <v-text-field
            v-model="username"
            name = 'input-10-0'
            label="用户名"
            placeholder="请输入用户名"
            outlined
            :rules="[rules.required, rules.nameMin]"
            hint="至少8个字符"
            counter
            ></v-text-field>
        </v-col>

        <v-col cols="12">
          <v-text-field
            v-model="password"
            :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.pwdMin]"
            :type="show1 ? 'text' : 'password'"
            name="input-10-1"
            label="密码"
            placeholder="请输入密码"
            hint="至少6个字符"
            outlined
            counter
            @click:append="show1 = !show1"
          ></v-text-field>
        </v-col>

        <v-btn depressed color="primary" elevation="12" large>立即登录</v-btn>
        <v-btn class="btn2" depressed color="primary" elevation="12" large>立即注册</v-btn>
    </div>
</template>

// JS部分
<script>
export default {
    data () {
      return {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        username: '',
        password: '',
        rules: {
          required: value => !!value || '不能为空',
          nameMin: v => v.length >= 8 || '至少8个字符',
          pwdMin: v => v.length >= 6 || '至少6个字符',
          emailMatch: () => (`The email and password you entered don't match`),
        },
      }
    }
}
</script>

// CSS部分
<style scoped>
.login-form{
    width: 500px;
    margin: 0 auto;
    text-align: center;
}
.btn2{
    margin-left: 30px;
}
</style>

展示效果：

插件参考vuetify：https://vuetifyjs.com/zh-Hans/

四、自动化平台系列文章汇总

《【测试平台开发】——开篇章节》