vue入门003~vue项目引入element并创建一个登录页面
时间:2022-07-26
本文章向大家介绍vue入门003~vue项目引入element并创建一个登录页面,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上一节已经教大家如何创建一个vue项目,这一节,我们就温故下vue项目的创建,顺便引入element,实现一个简答的登陆页面。
老规矩,先看效果图
一,快速创建vue项目
二,引入element类库
首先我们进入element官网:https://element.eleme.cn/#/zh-CN/component/installation 简单熟悉下element。然后如下图所示引入element类库。
做完上面的操作后,不要忘记安装依赖。
三,在main.js里引入使用
如下图红色框里所示
四,改造HelloWorld组件如下图
下面我把HelloWorld.Vue的完整代码贴出来给大家
<template>
<div>
<el-form :rules="rules" :model="loginForm" class="loginRoot">
<h3 class="loginTitle">系统登陆</h3>
<el-form-item prop="username">
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item prop="password">
<el-input type="text" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"/>
</el-form-item>
<el-button type="primary" style="width: 100%">登陆</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
loginForm: {
username: 'admin',
password: '123'
},
rules: {
username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
password:
[{required: true, message: '请输入密码', trigger: 'blur'}],
},
}
}
}
</script>
<style>
.loginRoot {
border-radius: 15px;
background-clip: padding-box;
margin: 50px auto;
width: 350px;
padding: 15px 35px;
background: aliceblue;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #c6c6c6;
}
.loginTitle {
margin: 15px auto 20px auto;
text-align: center;
color: #505050;
}
</style>
五,运行项目查看效果
运行效果如下
到这里就完整的使用vue+element实现了登陆页的ui样式了。 后面我还会系统的更新更多vue入门相关的文章,还会录制对应的视频出来,敬请关注。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- codeforces1216C (矩形面积交)
- codeforces 1234C(思维)
- codeforces 1405B(思维)
- codeforces 1216D(数学)
- codeforces 1256D(优先队列+贪心)
- codeforces 1343D(差分数组)
- codeforces1385D (递归+分治)
- codeforces1294D(思维+暴力)
- codeforces 1367D(思维)
- 数据库事务处理与资源池
- codeforces 1328D(思维)
- codeforces 1283D(BFS)
- codeforces 1213D2(贪心+思维)
- codeforces 1426E(贪心)
- codeforces 1374E1(贪心+优先队列)