本来是做java的，没想到在前端上费的力气这么大，虽然感觉有点偏，但是又觉得前端知识还要有一定的掌握，所以还是要继续学习。做这个我也挺挣扎的，主要是对前端的逻辑代码看不懂，环境又让我玩坏了，又要重新折腾，做一天也没整出来了啥，不知道逻辑代码怎么写，所以这个就先把页面写出来吧，逻辑代码往后站。
安装Element
安装element也比较简单，我们可以直接去查它的官方文档，找到引入它的办法。打开官方文档，左侧边栏找到安装，可以看到有两种方式，一种是npm安装，一种是cdn引入，我这里就是用npm安装。
npm i element-ui -S
在idea中的终端执行这个命令即可，或者在项目目录下cmd命令行中执行也可以。如果提示警告修复，可以按照给出的命令进行修复一下。
安装完之后，需要引入，再次打开官方文档，左侧侧边栏点击快速上手，有几种方式，我这里就完整引入，在main.js中进行操作，添加四行代码：
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
在new Vue中添加render: h => h(App)
构建登陆页面
首先去除掉原始项目中的Vue图标，在asstes文件夹中删除logo.png图片，然后在App.vue中删除代码<img src="./assets/logo.png">，这样图片就删除了。
结构我就学习Evan-Nightly“白卷”的结构，在cpmponents文件夹下新建Login.vue，作为登陆页面，在cpmponents文件夹下新建文件夹home，在home中新建AppIndex.vue，作为首页组件。
Login.vue
接下来开发Login.vue组件，我使用的是Element官方文档->Form表单->自定义校验规则这个表单作为我们登陆的模板，把这段代码复制，然后粘贴到Login页面中，需要注意的是，最好不要直接全部复制，前面的html代码复制到<template>中，后面的js代码对应的复制到<script>中，另外我又学习大佬在<template>下一层放置了一层<div>，目的是可以对整个浏览器可见区域进行操作，如果放在<body>下会报警告。
他这个js代码我看不懂，屡不清关系，就暂时搁置了。
为了能访问这个页面还需要去配置路由，就按照例子中的格式去配置就可以，代码如下：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login',
name: 'Login',
component: Login
},
]
})
现在应该就可以访问了，访问的时候只需要在地址上加上login就可以了。但是我们还需要去修改一下Login页面，达到我们想要的效果，也需要添加一些css样式。关于这个一定要学会去看官方文档，去看一看它每一项是在做什么，Element前端标签里的各种属性是做什么的
还需要注意的是，Vue中v-bind可以用一个:来简单代表，v-on可以用’@'来简单代替。
Element官网上的那个在线编译还是挺好用的，可以来进行很多的测试。
这里我多记录多记录一下，记录学这么一遍，之后就不在仔细去看了，直接CV了。下面记录的这两个代码不同的地方就在于对输入框的检查，一个是“白卷”的写法，一个是Element的自带的写法。
第一种
<template>
<div>
<el-form :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login_form">
<h3>系统登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" v-model="Form.username" autocomplete="off" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="Form.password" autocomplete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">登陆</el-button>
<el-button plain="true" type="primary">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
Form: {
username: '',
password: ''
},
rules: {
username: [
// required: true 可以在左上角显示*号，判断是否为必填项,如果设置为false，则不能触发后面的设置
{required: true,message: '用户名不能为空', trigger: 'blur'}
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' }
]
}
};
}
}
</script>
<style scoped>
.login_form{
/*这两个边框的设置都来自Element官网*/
border-radius: 12px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
width: 350px;
margin: 90px auto;
padding: 30px;
}
</style>
效果图如下：
第二种
<template>
<div>
<el-form :model="Form" status-icon :rules="rules" ref="Form" label-width="50px" class="login_form">
<h3>系统登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" v-model="Form.username" autocomplete="off" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="Form.password" autocomplete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item >
<el-button type="primary">登陆</el-button>
<el-button plain="true" type="primary">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
var checkUsername = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入用户名'));
} else {
callback();
}
};
var checkPassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
callback();
}
};
return {
Form: {
username: '',
password: ''
},
rules: {
username: [
// required: true 可以在左上角显示*号，应该是判断为必填项
{ validator: checkUsername, trigger: 'blur' }
],
password: [
{ validator: checkPassword, trigger: 'blur' }
]
}
};
}
}
</script>
<style scoped>
.login_form{
/*这两个边框的设置都来自Element官网*/
border-radius: 12px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
width: 350px;
margin: 90px auto;
padding: 30px;
}
</style>
效果图如下：
这两种方式实现的效果差不多，第一种方式代码量少，但是不能写太多的逻辑，而且左上角会带着星号，第二种可以更加自如的去写逻辑。
:model绑定变量值，:rules绑定规则，status-icon可以用来显示验证是否成功的小图标，label-width="50px"不要太大，否则左边会空出一块。
第二种方法，要检查的el-form-item里面一定要有prop参数，否则后面的验证函数获取不到。ref的值可以用在methods方法中。
我这里先使用官网上的写法。
后面我发现的登陆注册总是不能居中，按钮的居中是居中在输入框的，为了能够正居中，所以删除<el-form-item>,转而使用<div>,
如下：
<div style="width: 100%;">
<el-button type="primary">登陆</el-button>
<el-button plain="true" type="primary">注册</el-button>
</div>
AppIndex.vue
这个页面作为我们一会儿登陆成功跳转的页面，里面就先只写一个HelloWorld就行。
如下：
<template>
<div>
HelloWorld!
</div>
</template>
<script>
export default {
name: 'AppIndex'
}
</script>
<style scoped>
</style>
这一篇就先写到这里，慢慢来。
系列文章保存在Vue+SpringBoot学习_1专栏中
学习参考Evan-Nightly的白卷（White Jotter）
具体如下：
学习的作者名：Evan-Nightly
学习的项目名称：白卷（White Jotter）
学习的原文地址：https://gitee.com/Even-zh/White-Jotter#https://blog.csdn.net/Neuf_Soleil/article/details/88925013
https://learner.blog.csdn.net/article/details/88925013
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
