上一节已经教大家如何创建一个vue项目,这一节,我们就温故下vue项目的创建,顺便引入element,实现一个简答的登陆页面。
老规矩,先看效果图
![0f3b6aedcfae3ab5acd4b1fdc0cf83e3.png](https://i-blog.csdnimg.cn/blog_migrate/66e7b1e926cc61c7cbfb08a494ed7f57.png)
一,快速创建vue项目
![7ab366a27adab18704d5c8a690a0a207.png](https://i-blog.csdnimg.cn/blog_migrate/c4af9ace8b24b3ae0c8ac8574353809d.jpeg)
二,引入element类库
首先我们进入element官网:https://element.eleme.cn/#/zh-CN/component/installation
简单熟悉下element。然后如下图所示引入element类库。
![0da3a95531314fb99e6b61128462326e.png](https://i-blog.csdnimg.cn/blog_migrate/6d657da6e6dd79edfd255b82d279a55c.jpeg)
做完上面的操作后,不要忘记安装依赖。
![b114b15e3e1764af0a8a080b8c9a8fc8.png](https://i-blog.csdnimg.cn/blog_migrate/ef37d323fdee0da8ba7f82aed2ca0c6f.jpeg)
三,在main.js里引入使用
如下图红色框里所示
![574900404cfed6a7f1258b01b07f07a9.png](https://i-blog.csdnimg.cn/blog_migrate/dd77fdc05161e4077169a6fe4d42074c.jpeg)
四,改造HelloWorld组件如下图
![060929c817da9740a9c24c648a4c05b6.png](https://i-blog.csdnimg.cn/blog_migrate/e7e6038bf0fb1b9e8224d3c2a218312c.jpeg)
下面我把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>
五,运行项目查看效果
![02d322ced15d3d5996bbcc4b23009da0.png](https://i-blog.csdnimg.cn/blog_migrate/43c212a18f1dbc656c9d3249ac7efd83.jpeg)
![57cd568fe0a66fe9d3ca88bee20bf007.png](https://i-blog.csdnimg.cn/blog_migrate/e7b2c36aa5ae9e896cac9bccd4e4f866.jpeg)
运行效果如下
![8a2b5ac1e920f19965306cc1270fba16.png](https://i-blog.csdnimg.cn/blog_migrate/35b7f6a66b8b45fd682fa720033b2fdb.png)
到这里就完整的使用vue+element实现了登陆页的ui样式了。
后面我还会系统的更新更多vue入门相关的文章,还会录制对应的视频出来,敬请关注。