准备：axios elementUI vue-router
先把项目根目录下components和views目录下的文件都删掉
在 src\router\index.js 中配置路由（把原有的路由配置删除），如下：
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
});
在 src\views 目录下新建 login 目录及此目录下新建文件 index.vue写入如下内容
<template>
<div>
登录页面
</div>
</template>
我们的组件写好了，那怎么渲染到页面呢，先在router下的index.js里配置路由
import Vue from "vue";
import Router from "vue-router";
// import Login from '@/views/login/index'
// 下面的情况，默认会导入@/views/login下的index.vue组件
import Login from '@/views/login'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/login',
name: 'login', // 路由名称
component: Login // 组件对象
}
]
});
这样我们的路由也就写好了，在去App.vue里写组件的渲染出口
<template>
<div id="app">
<!-- 组件渲染出口 -->
<router-view></router-view>
</div>
</template>
然后启动服务，访问login路由
上面的流程是先找public下的index.html文件，然后将main.js里的vue实例渲染到index.html里的id=‘app’的标签上。
main.js导入了App.vue，所以将App.vue里的内容渲染到index.html里，当我们访问login路由的时候，会在router下的index.js里找login路由，找到之后，找到对应的组件，然后渲染到App.vue里，所以index.html里的id=‘app'的标签里渲染的内容就是views/login下的index.vue里的内容
使用elementUI
上面我们测试了一下路由，访问是没有问题的，现在来结合elementUI做个登录页面
在src/views/login/index.vue里写如下代码
<template>
<div class="login-container">
<el-form ref="form" :model="form" label-width="80px" class="login-form">
<h2 class="login-title">管理系统</h2>
<el-form-item label="用户名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: "",
password: ""
}
};
},
methods: {
onSubmit() {
console.log("submit!");
}
}
};
</script>
<style acoped>
.login-form {
width: 350px;
margin: 160px auto; /* 上下间距160px，左右自动居中*/
background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
padding: 30px;
border-radius: 20px; /* 圆角 */
}
/* 背景 */
.login-container {
position: absolute;
width: 100%;
height: 100%;
background: url("../../assets/login.png");
}
/* 标题 */
.login-title {
color: #303133;
text-align: center;
}
</style> -->
在App.vue里去掉上下边距和设置字体
<template>
<div id="app">
<!-- 组件渲染出口 -->
<router-view></router-view>
</div>
</template>
<style >
body{
font-family: "微软雅黑"; /* 设置字体 */
margin: 0px auto /* 去除上下的边距*/
}
</style>
访问login
添加表单验证
上面我们只是实现了登录的form表单，但是没有验证数据输入的合法性，比如空，或者长度
elementui提供给了我们校验的方法
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
校验规则：https://github.com/yiminghe/async-validator
修改 src/views/login/index.vue里的代码
1 <template>
2 <div class="login-container">
3 <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
4 <h2 class="login-title">管理系统</h2>
5 <el-form-item label="用户名" prop="username">
6 <el-input v-model="form.username"></el-input>
7 </el-form-item>
8 <el-form-item label="密码" prop="password">
9 <el-input v-model="form.password"></el-input>
10 </el-form-item>
11
12 <el-form-item>
13 <el-button type="primary" @click="submitForm('form')">登录</el-button>
14 </el-form-item>
15 </el-form>
16 </div>
17 </template>
18 <script>
19 export default {
20 data() {
21 return {
22 form: {
23 username: "",
24 password: ""
25 },
26 rules: {
27 username: [
28 {required: true, message: "用户名不能为空", trigger: 'blur'},
29 {min: 3, max: 10, message: "用户名3-5位", trigger: 'blur'}
30 ],
31 password: [
32 {required: true, message: "密码不能为空", trigger: 'blur'},
33 {min: 3, max: 10, message: "密码3-5位", trigger: 'blur'}
34 ]
35 }
36 };
37 },
38 methods: {
39 submitForm(formName) {
40 this.$refs[formName].validate(valid => {
41 // console.log(valid) 验证通过为true，有一个不通过就是false
42 if (valid) {
43 // 通过的逻辑
44 } else {
45 console.log('验证失败');
46 return false;
47 }
48 });
49 }
50 }
51 };
52 </script>
53
54 <style acoped>
55 .login-form {
56 width: 350px;
57 margin: 160px auto; /* 上下间距160px，左右自动居中*/
58 background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
59 padding: 30px;
60 border-radius: 20px; /* 圆角 */
61 }
62
63 /* 背景 */
64 .login-container {
65 position: absolute;
66 width: 100%;
67 height: 100%;
68 background: url("../../assets/login.png");
69 }
70
71 /* 标题 */
72 .login-title {
73 color: #303133;
74 text-align: center;
75 }
76 </style> -->
在第三行加上 :rules="rules" 第五行和第八行加上 prop="username" 后面的属性值自定义，更改39行到47行，第十三行改为 @click="submitForm('form')"，submitForm就是method的方法名。后面的form是第三行的ref属性。
{required: true, message: "密码不能为空", trigger: 'blur'},表示当鼠标失去焦点后验证，必填，如果为空则提示message里的信息
{min: 3, max: 10, message: "密码3-5位", trigger: 'blur'}表示当鼠标失去焦点后验证，最小为3位，最大为10位，如果不满足则提示message里的信息