用vuetify3实现经典的登录页面

这是使用vuetify3可以开发的一个登录实例。
它包含了一个经典的包含系统消息、登录按钮、更换主题按钮的工具栏（toolbar）、轮播(carousel)和登录表单控件。

vuetify官网的组件部分有大量控件，我想绝大部分应用使用这些控件拼凑就足够酷了。

新建项目

工具栏（toolbar）控件

可以在 veutify官网选择一款工具栏（toolbar），可以在网页上直接查看实际效果，也可以直接把代码拷贝出来使用。
选择工具栏控件

在项目的 components 文件夹中新建文件 ToolBar.vue，然后把从官网拷贝的代码粘贴过来，修改一下，我们自定义的工具栏控件就做好了。
下面是ToolBar.vue的代码：

<template>
  <v-toolbar density="compact">
    <v-toolbar-title>
      <router-link to="/">
        <v-icon icon="mdi-home" class="mr-4"></v-icon
        >Vuerify3登录演示</router-link
      >
    </v-toolbar-title>

    <v-spacer></v-spacer>

    <v-btn icon @click="changeTheme">
      <v-icon  :icon="myTheme ? 'mdi-weather-night' : 'mdi-weather-sunny'"></v-icon>
    </v-btn>

    <v-menu transition="scale-transition">
      <template v-slot:activator="{ props }">
        <v-btn icon class="mr-12" v-bind="props">
          <v-badge color="red-darken-2" content="8">
            <v-icon icon="mdi-bell" color="blue-darken-4"></v-icon>
          </v-badge>
        </v-btn>        
      </template>
      <v-list>
        <v-list-item
          v-for="(item, index) in notifications"
          :key="index"
          :value="index"
        >
          <v-list-item-title><v-icon :icon="item.icon" :color="item.color"></v-icon>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>

    <v-btn icon>
      <v-btn variant="outlined" class="mr-12" color="red-darken-2" to="/login">
        登录 <v-icon>mdi-login-variant</v-icon>
      </v-btn>
    </v-btn>
  </v-toolbar>
</template>

<script setup>

import { ref } from "vue";
import {useTheme} from 'vuetify'

const notifications = [
  { title: "消息1",icon:"mdi-email",color:"red" },
  { title: "消息2" ,icon:"mdi-email",color:"blue" },
  { title: "消息3" ,icon:"mdi-email",color:"green" },
  { title: "消息4" ,icon:"mdi-email",color:"yellow" },
];

const myTheme = ref(true)

const theme = useTheme();

// 切换主题
function changeTheme() {
  myTheme.value = !myTheme.value;
  theme.global.name.value = myTheme.value ? "dark" : "light";
}

</script>

vuetify3自带dark和light两种主题。通过to，点击登录按钮可以跳转到login页面。

轮播(carousel)控件

我们可以在vuetify官网上找到轮播(carousel)控件拿来用：在compoents下面新增Carousel.vue,是该控件Carousel.vue的代码：

<template>
  <v-carousel :show-arrows="true" :height="carouselHeight">
    <v-carousel-item
      v-for="(item, i) in items"
      :key="i"
      :src="item.src"
      cover
    ></v-carousel-item>
  </v-carousel>
</template>
  <script setup>
import { reactive, computed } from "vue";

const items = reactive([
  {
    src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg",
  },
  {
    src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg",
  },
  {
    src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg",
  },
  {
    src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg",
  },
]);

const carouselHeight = computed(() => {
  return "calc(100vh - 64px)"; //toolbar默认高度是64px，这样刚好可以填满整个屏幕
});
</script>

上述控件使用了计算字段设置其高度，以使得轮播图能占满整个屏幕。

登录页面

在pages文件夹中新增login.vue文件，这里实现了登录表单、字段校验，通过v-progress-circular实现提交时的蒙版效果。
下面是该页面的代码，通过代码应该可以更加清晰的了解实现思路。

<template>
  <v-container fluid>
    <v-row justify="center">
      <v-col md="4">
        <v-overlay :model-value="isLoading" class="justify-center align-center">
          <v-progress-circular
            indeterminate
            color="white"
          ></v-progress-circular>
        </v-overlay>
        <v-card class="pa-8 mx-auto">
          <v-card-title class="text-center">登录</v-card-title>
          <v-card-item>
            <v-sheet>
              <v-form @submit.prevent>
                <v-text-field
                  v-model="form_data.email"
                  label="电子邮件地址"
                  variant="solo"
                  prepend-inner-icon="mdi-email"
                  :rules="[rules.required, rules.email, rules.max]"
                ></v-text-field>
                <v-text-field
                  type="password"
                  v-model="form_data.password"
                  label="密码"
                  variant="solo"
                  prepend-inner-icon="mdi-key"
                  :rules="[rules.required, rules.max]"
                ></v-text-field>
                <v-checkbox
                  v-model="form_data.remember"
                  color="red"
                  label="30天内免登录"
                  hide-details
                ></v-checkbox>
                <v-btn type="submit" color="red-darken-2" @click="submit" block>
                  <span>登录</span>
                </v-btn>
              </v-form>
            </v-sheet>
          </v-card-item>
          <v-card-actions>
            <div class="mx-4">
              <v-btn block to="/register">注册</v-btn>
            </div>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
  
<script setup>
import { ref } from "vue";

//表单数据
const form_data = ref({
  email: "",
  password: "",
  remember: false,
});

const isLoading = ref(false);

//提交
function submit() {
  if (form_data.value.email === "" || form_data.value.password === "") {
    return;
  }
  isLoading.value = true;
  setTimeout(() => {
    isLoading.value = false;
  }, 3000);
  alert(JSON.stringify(form_data.value));
}

//校验规则
const rules = {
  required: (value) => !!value || "不能为空。",
  max: (value) => value.length <= 20 || "最多20个字符。",
  email: (value) => {
    const pattern =
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return pattern.test(value) || "Invalid e-mail.";
  },
};
</script>

这个文件创建在pages文件夹内，由于App.vue中的router-view的动态路由的作用，所以无需手工配置路由，在浏览器中输入http://localhost:3000/login即可直接打开此页面。
可以尝试在此文件夹中增加register.vue，然后在浏览器打开http://localhost:3000/register看看实际效果。

登录页面可以基于官网的代码演示修改：相册启动啦

组合控件，见证成果

修改App.vue，下面是代码：

<template>
  <v-app>
    <!--对整个应用进行导航-->
    <ToolBar />
    <v-main>
      <!--所有页面跳转时都会出现的动画-->
      <v-slide-x-transition>
        <router-view />
      </v-slide-x-transition>
    </v-main>
  </v-app>
</template>

把ToolBar放在App.vue中使得该工具栏应用于整个应用，同样v-slide-x-transition将使得整个应用在页面切换时都会在v-main中播放动画效果。

在应用程序的根目录下运行：

pnpm dev

程序启动后会出现下图所示页面，并且自动打开浏览器：程序启动了

总结

通过几个简单的控件组合，我们就实现了一个经典的首页框架和登录页面，这里面也使用了很多控件可以应用在其它很多场合，相信能对您使用vuetify3起到入门的功效。

查看完整代码

🪐祝好运🪐

新建项目#

工具栏（toolbar）控件#

轮播(carousel)控件#

登录页面#

组合控件，见证成果#

总结#

查看完整代码#