Vue+AntDesign实现登陆页面

最新推荐文章于 2024-08-12 05:07:15 发布

丶酸酸

最新推荐文章于 2024-08-12 05:07:15 发布

阅读量9.9k

点赞数 7

分类专栏： vue登陆页面 vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/a82048195/article/details/107935937

版权

这篇博客展示了如何利用Vue.js和AntDesign Vue库来实现一个登录页面。首先通过npm或yarn安装AntDesign Vue，然后在main.js中引入。接着，提供了页面的代码示例，读者可以替换代码中的图片以适配自己的项目需求。

摘要由CSDN通过智能技术生成

先给大家看页面效果：
在这里插入图片描述

1.使用 npm 或 yarn 安装ant-design-vue

npm install ant-design-vue --save

yarn add ant-design-vue

2.在main.js中引用
在这里插入图片描述
3.页面代码

<template>
  <div class="login-container">
    <h2 class="login-title">Vue+AntDesign实现登陆页面</h2>
    <a-form ref="form" :model="form" class="login-form">
      <h2 class="title">用户登录 LOGIN</h2>
      <a-form-item>
        <a-input class="inputBox" v-model="form.username">
          <img :src="user" slot="prefix" alt=</