【测试平台开发】——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/

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

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

posted @ 2022-06-02 11:40  Owen_ET  阅读(364)  评论(0编辑  收藏  举报