前提：

(1) 相关博文地址：

SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一)：搭建基本环境：https://www.cnblogs.com/l-y-h/p/12930895.html

(2)代码地址：

https://github.com/lyh-man/admin-vue-template.git

一、定义公共组件页面

简单的页面效果如下所示：(做的比较粗糙，大致理解页面即可)

1、安装 element-ui

(1)简介

一款 ui 框架。使用 element-ui 用于实现页面的绘制。

【官网：】

https://element.eleme.cn/#/zh-CN

【文档：】

https://element.eleme.cn/#/zh-CN/component/installation

(2)安装

可以通过 npm 或者 cdn 方式使用，此处使用 npm 方式安装。

【安装方式一：(npm 安装)】

npm install element-ui

【安装方式二：(CDN 方式引入)】

(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)修改页面内容

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;

}

3、404.vue

(1)简介

定义错误页面。

当错误发生时，用于跳转到 404 页面。

(2)定义页面内容

position: absolute;

top:0;

right:0;

bottom:0;

left:0;

overflow: hidden;

}

.not-found-title {

margin: 20px015px;

font-size: 10em;

font-weight: 400;

color: rgb(55, 71, 79);

}

.not-found-desc {

margin:0 030px;

font-size: 26px;

color: rgb(118, 131, 143);

}

.not-found-desc>em {

font-style: normal;

color: #ee8145;

}

.not-found-btn-gohome {

margin-left: 30px;

}

(3)页面显示如下：

4、Login.vue

(1)简介

定义登陆页面。

访问系统时，用于跳转到登录界面。

背景图(来源于网络)：

(2)定义页面内容：

data() {return{

dataForm: {

userName:'',

password:''},

dataRule: {

userName: [{

required:true,

message:'帐号不能为空',

trigger:'blur'}],

password: [{

required:true,

message:'密码不能为空',

trigger:'blur'}]

}

}

},

methods: {//提交表单

dataFormSubmit() {//TODO：登录代码逻辑待完善

alert("登录代码逻辑未完善")this.$router.replace({name: 'Home'})

}

}

}

position: absolute;

top:0;

right:0;

bottom:0;

left:0;

overflow: hidden;

background-color: rgba(38, 50, 56, .6);

background: url(~@/assets/login_bg.jpg) no-repeat;

background-size: 100% 100%;

}

.login-content {

position: absolute;

top:0;

right:0;

bottom:0;

left:0;

margin: auto;

height: 300px;

width: 400px;

background-color: #112234;

opacity: .8;

}

.login-main {

color: beige;

padding: 20px 20px 10px 20px;

}

(3)页面显示如下：

二、定义主页面

主页面 可以拆分成多个组件，每个组件负责一部分页面的显示。

拆分成 Header、Aside、Content 三个页面。

其中：

Header          用于定义导航栏信息

Aside             用于定义菜单栏信息

Content         用于显示各个菜单选项的页面

1、Home.vue

(1)简介

定义主界面。

通过 Login 登录系统后，需要跳转到 主页面。

(2)定义页面内容

name:'Home',

components: {

Header,

Aside,

Content

},

data() {return{

foldAside:true}

},

methods: {

foldOrOpen(data) {this.foldAside =data

}

}

}

height:100%;

}

(3)页面显示如下：

2、Header.vue

(1)简介

用于定义主页面的导航栏。

通过导航栏，可以进行一些操作。比如：折叠侧边栏、修改密码、退出登录等。

(2)定义页面内容

name:'Header',

data() {return{//是否展开侧边栏

foldAside: true,//默认用户名

userName: 'admin',//是否展开密码框

UpdatePasswordVisible: false}

},

components: {//引入密码框组件

UpdatePassword

},

methods: {//展开密码修改框

showPasswordBox() {this.UpdatePasswordVisible = true

//this.$nextTick 表示数据渲染后，执行密码框初始化

this.$nextTick(() =>{this.$refs.updatePassowrd.init()

})

},//展开、折叠侧边栏

foldOrOpen() {this.foldAside = !this.foldAside//this.$emit 用于触发父组件的方法，并传递参数值

this.$emit("foldOrOpenAside", this.foldAside)

},//退出登录，回到登录界面

logout() {//TODO：退出逻辑待完成

alert("退出逻辑未完成");this.$router.push({

name:"Login"})

}

}

}

padding:010px;

display: flex;

height: 50px;

line-height: 50px;

}

.header-title {

height: 50px;

width: 50px;float: left;

font-size: 50px;

cursor: pointer;

}

.header-menu {

height: 50px;

width:100%;

flex:1;

line-height: 50px;

font-size: 30px;

}

.header-menu-submenu {float: right;

}

.header-submenu-a {

text-decoration: none;

color: #4CC4B8;

font-weight: bold;

font-size: 16px;

}

.header-submenu-a:hover {

background-color: #2C3E50;

}

.el-menu--horizontal>.el-menu-item,

.el-menu--horizontal>.el-submenu .el-submenu__title {

height: 50px!important;

line-height: 50px !important;

}

.el-menu--collapse .el-menu .el-submenu, .el-menu--popup {

min-width: auto !important;

}

.header-span img {

width: 40px;

height: 40px;

line-height: 40px;

margin: 5px 10px 10px 10px;

}

.header-span {

font-size: 20px;

}

(3)页面显示如下

3、UpdatePassword.vue

(1)简介

定义密码修改框，用于修改用户密码。

(2)定义页面内容

{{ userName }}

取消

确定

data() {return{

userName:'admin',

visible:false,

dataForm: {

password:'',

newPassword:'',

confirmPassword:''},

dataRule: {

password: [{

required:true,

message:'原密码不能为空',

trigger:'blur'}],

newPassword: [{

required:true,

message:'新密码不能为空',

trigger:'blur'}],

confirmPassword: [{

required:true,

message:'确认密码不能为空',

trigger:'blur'}]

}

}

},

methods: {//初始化

init() {this.visible = true

//初始化清空表单内容

this.$nextTick(() =>{this.$refs['dataForm'].resetFields()

})

},//表单提交，回到登录界面

dataFormSubmit() {//TODO: 表达提交逻辑待完成

alert("表达提交逻辑未完成")this.visible = false;this.$nextTick(() =>{this.$router.push({

name:"Login"})

})

}

}

}

(3)页面显示如下

4、this.$nextTick 与 this.$emit 简单介绍

(1)this.$nextTick

其用于数据渲染之后执行。

比如：

修改了某个数据，这个数据需要 dom 更新之后才会显示出来，此时就可以使用 this.$nextTick。其传递一个回调函数，在数据渲染之后执行。

在 Header.vue 中，就使用到了这个。如下所示：

密码修改框通过 UpdatePasswordVisible 来控制是否显示。

showPasswordBox() 方法被执行时，UpdatePassword 组件开始加载，数据渲染完成后触发 this.$nextTick 的回调函数，进行密码框的初始化。

//展开密码修改框

showPasswordBox() {this.UpdatePasswordVisible = true

//this.$nextTick 表示数据渲染后，执行密码框初始化

this.$nextTick(() =>{this.$refs.updatePassowrd.init()

})

},

若立即使用 this.$refs.updatePassowrd.init() 调用 UpdatePassword 的 init 方法，会报错，因为此时的 UpdatePassword  数据还未渲染，若想成功执行，需要使用 this.$nextTick，表示在数据渲染成功后执行。

//展开密码修改框

showPasswordBox() {this.UpdatePasswordVisible = true

this.$refs.updatePassowrd.init()

},

(2)this.$emit

用于子组件向父组件传递数据，并触发父组件的方法。

在Home.vue 与 Header.vue 中，就使用到了这个。如下所示：

在 Home 组件里引入了 Header 组件，并定义了 @foldOrOpenAside 方法，

在 Header 组件里通过 this.$emit 调用 foldOrOpenAside 方法，并传递数据(可选)。

【Home.vue】

foldOrOpen(data) {this.foldAside =data

}

【Header.vue】

//展开、折叠侧边栏

foldOrOpen() {this.foldAside = !this.foldAside//this.$emit 用于触发父组件的方法，并传递参数值

this.$emit("foldOrOpenAside", this.foldAside)

},

5、Aside.vue

(1)简介

用于定义侧边栏，显示菜单。

(2)定义页面内容

name:'Aside',

props: ['foldAside'],

data() {return{//保存当前选中的菜单

menuActiveName: 'home',//保存当前侧边栏的宽度

asideWidth: '200px',//用于拼接当前图标的 class 样式

iconSize: 'true'}

},

watch: {//监视是否折叠侧边栏，折叠则宽度为 64px。

foldAside(val) {this.asideWidth = val ? '200px' : '64px'

this.iconSize =val

}

}

}

margin-bottom: 0;

height:100%;

max-height: calc(100% -50px);

width:100%;

max-width: 200px;

background-color: #263238;

text-align: left;

right:0;

}

.header-logo {

background-color: #17b3a3;

text-align: center;

height: 50px;

line-height: 50px;

width: 200px;

font-size: 24px;

color: #fff;

font-weight: bold;

margin-bottom: 0;

cursor: pointer;

}

.el-submenu .el-menu-item {

max-width: 200px !important;

}

.el-scrollbar__wrap {

overflow-x: hidden !important;

}

.icon-size-falsei {

font-size: 30px !important;

}

.icon-size-truei {

font-size: 18px !important;

}

(3)页面显示如下

6、props 简单介绍

其用于父组件向子组件传递数据。

在 Home.vue 和 Aside.vue 中，就使用到了这个。如下所示：

在 Home.vue 中引入 Aside.vue 组件，并定义了 :foldAside 属性。

在 Aside.vue 组件中，使用 props 可以获取到 这个 属性。

【Home.vue】

【Aside.vue】

props: ['foldAside'],

7、Content.vue

(1)简介

用于定义各个菜单点击后的页面显示。

同样需要使用 router 进行页面跳转(嵌套路由，通过 children 中的规则定义跳转路径)，基本路由规则本文最后有介绍。

(2)定义页面内容

name:'Content'}

background-color: #f1f4f5;

}

.card {

height:100%;

}

(3)页面显示如下

8、定义 content 显示页面(仅供测试)

【Ueditor.vue】

【HomePage.vue】

【Echarts.vue】

点击 Aside 中各个菜单，在 Content 会显示不同的 页面。

9、基本路由问题

(1)简介

想要各个组件页面间能够顺利跳转，就需要 router 来操作了。

此处简单写了路由跳转规则，后续会进行修改。

(2)定义路由跳转规则

path 指的是 路径。

redirect 指的是 需要跳转的路径。

name 指的是 路由的名字(此项目中，均使用 name 进行路由跳转)。

component 指的是 路由的组件，用于显示页面( 会加载组件)。

children 指的是 子路由(路由中显示另一个路由)。

import Vue from 'vue'import VueRouter from'vue-router'import Home from'../views/Home.vue'Vue.use(VueRouter)

const routes=[{

path:'/',

redirect: {

name:"Login"}

},

{

path:'/404',

name:'404',

component: ()=> import('@/components/common/404.vue')

},

{

path:'/Login',

name:'Login',

component: ()=> import('@/components/common/Login.vue')

},

{

path:'/Home',

name:'Home',

component: ()=> import('@/views/Home.vue'),

redirect: {

name:'HomePage'},

children: [{

path:'/Home/Page',

name:'HomePage',

component: ()=> import('@/views/menu/HomePage.vue')

},

{

path:'/Home/Demo/Echarts',

name:'Echarts',

component: ()=> import('@/views/menu/Echarts.vue')

},

{

path:'/Home/Demo/Ueditor',

name:'Ueditor',

component: ()=> import('@/views/menu/Ueditor.vue')

}

]

},

]

const router= newVueRouter({//routes 用于定义 路由跳转 规则

routes,//mode 用于去除地址中的 #

mode: 'history',//scrollBehavior 用于定义路由切换时，页面滚动。

scrollBehavior: () =>({

y:0})

})//解决相同路径跳转报错

const routerPush =VueRouter.prototype.push;

VueRouter.prototype.push= functionpush(location, onResolve, onReject) {if (onResolve ||onReject)return routerPush.call(this, location, onResolve, onReject)return routerPush.call(this, location).catch(error =>error)

};

exportdefault router