Login页面

夢☆Meng

已于 2024-03-25 01:56:20 修改

阅读量612

点赞数 16

分类专栏： vue 文章标签： vue.js javascript 前端

于 2024-03-25 01:54:38 首次发布

本文链接：https://blog.csdn.net/qq_51554230/article/details/136992582

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue3项目中引入和配置ElementPlus组件库，包括安装、自动导入、Sass配置、Icon图标管理和Login页面的实现，以展示其丰富的组件、响应式设计和易用性。

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

页面展示

一、引入element-plus

element-plus官网：

https://element-plus.gitee.io/zh-CN/

为什么要引入element-plus？

丰富的组件库: Element Plus 提供了丰富的 UI 组件，包括按钮、表单、对话框、表格、菜单等，这些组件可以帮助你快速构建出美观、功能丰富的用户界面。
符合现代设计风格: Element Plus 的组件设计符合现代的 UI 设计趋势，使得你的应用看起来更加专业和现代。
响应式布局: Element Plus 的组件库支持响应式设计，可以轻松适配不同大小的屏幕，使你的应用在各种设备上都能够良好地展现。
易于定制化: Element Plus 提供了丰富的主题定制选项，可以让你根据自己的需求定制应用的外观和风格。
完善的文档和社区支持: Element Plus 拥有完善的中英文文档，以及活跃的社区支持，如果在使用过程中遇到问题，可以方便地获取帮助和支持。
与 Vue 3 完美结合: Element Plus 是专为 Vue 3 设计的组件库，它充分利用了 Vue 3 的新特性，例如 Composition API，使得在 Vue 3 项目中使用 Element Plus 更加高效和便捷。

element-plus的配置

1、进行安装

官方建议：如果您的网络环境不好，建议使用相关镜像服务 cnpm 或中国 NPM 镜像。

npm install element-plus

2、自动导入

npm install -D unplugin-vue-components unplugin-auto-import

3、配置vite文件

然后把下列代码插入到你的 Vite 的配置文件中，（vite.config.ts文件）

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

sass的配置

Sass（Syntactically Awesome Stylesheets）是一种成熟、稳定且功能强大的 CSS 预处理器。它扩展了 CSS，为样式表提供了许多便利的功能，使得样式表更加易于编写和维护。

安装命令

npm install -D sass

完成了就可以使用element-plus组件库中的组件了。

Icon图标配置

配置Icon主要是方便使用提供的图标库

1、进行下载

npm install @element-plus/icons-vue

2、注册所有图标

在mian.js文件中，需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

二、Login页面

在views包下创建Login.vue 文件。

<<template>
     <!-- 根div -->
     <div class="login_container">
        <div class="login_background">
        </div>
    
          <!-- 登陆表单 -->
          <div class="login_zhongform">
          <div class="login_form">
            <h3 class="title">海洋笔记</h3>
            <el-form ref="formRef" :model="loginForm">
                <!-- 用户名 -->
                <el-form-item>
                    <el-input v-model="loginForm.account" placeholder="请输入账号" >
                        <template #prefix>
                            <el-icon class="el-input__icon"><User /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item>
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" >
                        <template #prefix>
                            <el-icon class="el-input__icon"><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 记住我和忘记密码 -->
                <div class="rememberMe">
                    <el-checkbox v-model="loginForm.rememberMe" label="记住我" size="large" />
                    <!-- 忘记密码 -->
                    <el-text class="forgetpass mx-1" type="primary">忘记密码?</el-text>
                </div>
                <!-- 分割线 -->
                <el-divider>其他登录方式</el-divider>
                
                <!-- 其他的登录方式 -->
                <div class="other_login">
                    <el-icon class="other_login_item"><ChromeFilled /></el-icon>
                    <el-icon class="other_login_item"><ElemeFilled /></el-icon>
                    <el-icon class="other_login_item"><WindPower /></el-icon>
                </div>
                <el-form-item>
                    <!-- 按钮 -->
                    <el-button style="width: 100%;" type="primary" >登陆</el-button>
                </el-form-item>
            </el-form>
            
        </div>
    </div>
    </div>
</template>

<script setup>
 // 导入 ref
 import { ref } from  'vue';
// 导入login方法
// import { login } from '@/api/auth/index.js';

    const loginForm = ref({
        account: undefined,
        password: undefined,
        rememberMe: undefined
    })
    
</script>

<style lang="scss" scoped>

.login_container { 
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 97vh; /* 设置高度为视口高度 */
    .login_background{
        flex: 1;
        // 背景图
    background-image: url('../assets/background/1.jpg');
    background-size: 100% 100% ;
    // display: flex;
    // justify-content: flex-end;
    height: 97vh;
        
    }
}
.login_zhongform{
    // float: right;
    flex: 1; /* 占据剩余空间 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 97vh;  // 适当填充


    .login_form {
        display: flex;
        justify-content: center;
        align-items: center;
        //设置换行
        flex-direction: column;
        width: 90%;
        background-color: #fff;
        margin-top: -80px;
        float: right;
        // 设置 海洋笔记这个几个字
        .title {
            margin-bottom: 40px;
            font-size: 40px; /* 设置字体大小为24像素 */
        }
        //对表单输入框进行设置
        .el-input {
            height: 50px; /* 设置输入框的高度 */
        }
        .rememberMe {
            
            display: flex;
            justify-content: space-between;
            align-items: center;
            .forgetpass {
                cursor: pointer;
            }
        }
        // 其他登录
        .other_login {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            .other_login_item {
                margin-right: 60px;
                cursor: pointer;
            }
        }

    }

}

    

// 设置form的宽度
.el-form {
    width: 70%;
}
.el-form-item {
    width: 100%;
}

</style>