SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（⼆）：引⼊。。。前提：
（1）相关博⽂地址：
　SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（⼀）：搭建基本环境：wwwblogs/l-y-h/p/12930895.html
（2）代码地址：
github/lyh-man/admin-vue-template.git
⼀、定义公共组件页⾯
  简单的页⾯效果如下所⽰：（做的⽐较粗糙，⼤致理解页⾯即可）
1、安装 element-ui
（1）简介
  ⼀款 ui 框架。使⽤ element-ui ⽤于实现页⾯的绘制。
【官⽹：】
element.eleme/#/zh-CN
【⽂档：】
element.eleme/#/zh-CN/component/installation
（2）安装
  可以通过 npm 或者 cdn ⽅式使⽤，此处使⽤ npm ⽅式安装。
【安装⽅式⼀：（npm 安装）】
npm install element-ui
【安装⽅式⼆：（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）。
// 引⼊ element-ui
import ElementUI from 'element-ui'
// 引⼊ element-ui 的 css ⽂件
import 'element-ui/lib/theme-chalk/index.css';
// 声明使⽤ element-ui
Vue.use(ElementUI);
2、修改 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;
}
/* 解决⼦组件中 height: 100% 不⽣效问题 */
html,body,#app{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
3、404.vue
（1）简介
  定义错误页⾯。
  当错误发⽣时，⽤于跳转到 404 页⾯。
（2）定义页⾯内容
<template>
<div class="error-wrapper">
<h2 class="not-found-title">404</h2>
<p class="not-found-desc">抱歉！您访问的页⾯<em>失联</em>啦 ...</p>
<el-button @click="$(-1)">返回上⼀页</el-button>
<el-button type="primary" class="not-found-btn-gohome" @click="$router.push({ name: 'Home' })">进⼊⾸页</el-button>    </div>
</template>
<script>
export default {}
</script>
<style>
.error-wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.not-found-title {
margin: 20px 0 15px;
font-size: 10em;
font-weight: 400;
前端页面模板color: rgb(55, 71, 79);
}
.not-found-desc {
margin: 0 0 30px;
font-size: 26px;
color: rgb(118, 131, 143);
}
.not-found-desc>em {
font-style: normal;
color: #ee8145;
}
.not-found-btn-gohome {
margin-left: 30px;
}
</style>
（3）页⾯显⽰如下：
4、Login.vue
（1）简介
  定义登陆页⾯。
  访问系统时，⽤于跳转到登录界⾯。
背景图（来源于⽹络）：
（2）定义页⾯内容：
<template>
<div class="login-wrapper">
<div class="login-content">
<div class="login-main">
<h2 class="login-main-title">管理员登录</h2>
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @native="dataFormSubmit()" status-icon>                    <el-form-item prop="userName">
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item>
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dataForm: {
userName: '',
password: ''
},
dataRule: {
userName: [{
required: true,
message: '帐号不能为空',
trigger: 'blur'
}],
password: [{
required: true,
message: '密码不能为空',
trigger: 'blur'
}]
}
}
},
methods: {
/
/ 提交表单
dataFormSubmit() {
// TODO：登录代码逻辑待完善
alert("登录代码逻辑未完善")
this.$place({name: 'Home'})
}
}
}
</script>
<style>
.login-wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;

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