1、在dos窗口下运行命令 npm i element-ui -S 安装elementui
2、配置elementui
3、画面代码展示
登录页面
<template>
<div>
<!-- :是 v-bind的简写 -->
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
<el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<!-- <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" > -->
<span>请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
form: {
username: '',
password: ''
},
//表单验证，需要在 el-form-item 元素中增加prop属性
rules:{
username:[
{
required:true,
message:"账号不可为空",
trigger:"blur"
}
],
password:[
{required:true,message:"密码不可为空12",tigger:"blur"}
]
},
// 对话框显示何隐藏
dialogVisible: false,
}
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if(valid) {
if(this.form.username == "admin" && this.form.password == "123456a?") {
// 跳转画面
// 使用vue-router ，跳转到指定的页面，这种方式称为编程式路导航
this.$router.push('/main');
} else {
this.$message.error('用户名 or 密码不正确');
}
} else {
// alert('budui ');
// 表单验证没有通过的时候
this.dialogVisible = true;
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
}
</script>
<style lang="scss" scoped>
.login-box{
border:1px solid #DCDFE6;
width: 350px;
margin:180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title{
text-align:center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
点击登录跳转页面
<template>
<div>
<!-- <h1>main</h1> -->
<el-container>
<el-aside width="200px">
<el-menu>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-caret-right"></i>用户管理
</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<!-- 个人信息 -->
<router-link to="/user/profile">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!-- 用户列表 -->
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">
分类管理
</el-menu-item>
<el-menu-item index="2-2">
内容列表
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<!-- 个人信息111 -->
<router-link to="/user/profile">个人信息</router-link>
</el-dropdown-item>
<el-dropdown-item>
退出登录222
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<!-- <h1>main</h1> -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: 'Main',
}
</script>
<style lang="scss" scoped>
.el-header {
background-color: #8ab9e8;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
点击个人信息跳转页面
<template>
<div>
<h1>用户信息</h1>
</div>
</template>
<script>
export default {
name: 'UserProfile',
}
</script>
<style>
</style>
点击用户列表跳转页面
<template>
<div>
<h1>用户一览</h1>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'UserList',
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
doSearch:function() {
}
},
}
</script>
<style>
</style>
----------------------------补充说明--------------------------------------------------------------
补充1、
补充2：以上跳转用到了：默认路由、子路由，
