使用uview ui框架写一个登录页面

好的，这是一种使用 uview UI 框架写登录页面的方法：

1. 在 main.js 中引入 uview UI 库：

import Vue from 'vue'
import App from './App.vue'
import uView from 'uview-ui'

Vue.use(uView)

new Vue({
  render: h => h(App)
}).$mount('#app')

2. 在组件中使用 uview 组件写登录页面：

<template>
  <div>
    <u-form ref="form" :model="form" :rules="rules" label-width="100rpx">
      <u-form-item label="用户名" prop="username">
        <u-input v-model="form.username" placeholder="请输入用户名" />
      </u-form-item>
      <u-form-item label="密码" prop="password">
        <u-input v-model="form.password" placeholder="请输入密码" password />
      </u-form-item>
      <u-form-item>
        <u-button type="primary" @click="handleSubmit">登录</u-button>
      </u-form-item>
    </u-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交表单
          this.$toast.success('提交成功')
        } else {
          this.$toast.fail('请检查表单填写是否正确')
        }
      })
    },
  },
}
</script>

希望这对您有帮助！