Vue+ElementUI实现后台管理系统模板--前端篇（三）：引⼊
element-ui定。。。
⼀、安装 element-ui
1》简介
UI框架。使⽤ element-ui ⽤于实现页⾯的绘制。
前端页面模板【官⽹：】
element.eleme/#/zh-CN
【⽂档：】
element.eleme/#/zh-CN/component/installation
2》安装
UI框架。使⽤ element-ui ⽤于实现页⾯的绘制。
【安装⽅式⼀：（npm 安装）】
npm i element-ui -S
【安装⽅式⼆：（CDN ⽅式引⼊）】
<!-- 引⼊样式 -->
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css">
<!-- 引⼊组件库 -->
<script src="unpkg/element-ui/lib/index.js"></script>
3》引⼊ element-ui
  在 main.js 中引⼊（也可以⾃定义⼀个 js，然后在 main.js 中引⼊⾃定义的 js）。
⼆、修改app.vue
1》简介
⼊⼝⽂件，通过 router 将组件 显⽰在 router-view 标签处。2》修改页⾯内容
<template>
<div id="app">
<router-view />
</div>
</template>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
html,
body,
#app {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
三、404页⾯
1》简介
　定义错误页⾯。当错误发⽣时，⽤于跳转到 404 页⾯。2》views⽬录下新建页⾯404.vue 代码
<template>
<div class="error-wrapper">
<h2 class="not-find-title">404</h2>
<p class="not-find-desc">抱歉！您访问的页⾯<em>失联</em>啦 ...</p>
<el-button @click="$(-1)">返回上⼀页</el-button>
<el-button type="primary" class="not-find-btn-gohome" @click="$router.push({ name: 'Home' })">进⼊⾸页</el-button>  </div>
</template>
<script>
export default {
name: '404',
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.error-wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.not-find-title {
margin: 20px 0 15px;
font-size: 10em;
font-weight: 400;
color: rgb(55, 71, 79);
}
.not-find-desc {
margin: 0 0 30px;
font-size: 26px;
color: rgb(118, 131, 143);
}
.not-find-desc > em {
font-style: normal;
color: #ee8145;
}
.not-find-btn-gohome {
margin-left: 30px;
}
</style>
3》路由
{
path: "*",
name: "404",
component: () => import('./views/404.vue')
},
4》页⾯展⽰
四、Login.vue登录页⾯
1》简介
登录页 未登录时跳转到登录页⾯
2》页⾯代码
<template>
<div class="login" :>
<div class="wrapper">
<h3 class="head">CMS后台管理系统</h3>
<el-form :rules="rules" size="medium" :model="loginForm" ref="loginForm" class="login-form" @native="submitForm">
<el-form-item prop="username">
<el-input size="medium" type="text" im="loginForm.username" placeholder="请输⼊⽤户名" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input size="medium" type="password" im="loginForm.password" placeholder="请输⼊密码" autocomplete="off"></el-input>        </el-form-item>
<el-form-item>
<el-button size="medium" type="primary" @click="submitForm">⽴即登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
// import md5 from 'js-md5';
export default {
name: 'Login',
data() {
return {
loginBg: require('../assets/images/login-bg.png'),
loginForm: {
username: '',
password: '',
},
rules: {
username: [{ required: 'true', message: '账户不能为空', trigger: 'blur' }],
password: [{ required: 'true', message: '密码不能为空', trigger: 'blur' }],
},
};
},
methods: {
// 提交表单
submitForm() {
// 登录
// this.$router.push({
//  name: 'Home',
// });
},
},
};
</script>
<style scoped>
.login {
height: 100vh;
background-size: 100% 100%;
}
.wrapper {
position: absolute; /* fixed 同理 */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20rem;
}
.head {
margin-bottom: 25px;
color: #fff;
font-size: 24px;
}
</style>
注意：随意准备⼀张背景图login-bg.png放在⽂件夹assets的images⽂件夹下 3》页⾯路由
{
path: "/login",
name: "Login",
component: () => import("./views/login.vue")
}
4》页⾯效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。