目录
页面展示
一、引入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-plus2、自动导入
npm install -D unplugin-vue-components unplugin-auto-import3、配置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-vue2、注册所有图标
在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>