前面已经搭建好VueJS环境,下面可以引入ElementUI组件了,ElementUI提供比较完整的控件库,很容易搭建一个自己的后台页面。
参考地址:https://element.eleme.cn/#/zh-CN/component/installation
安装并使用ElementUI
npm install element-ui --save
等下在完成之后,就可以引入ElementUI了
在main.js中引入:
// 引入ElementUI的js和css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 配置ElementUI
Vue.use(ElementUI)
使用ElementUI布局页面
刚建立好的Vue工程,在main.js
入口指向了App.vue
文件
main.js指向:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
new Vue({
router, // 路由配置
store, // vuex的store存储,本质上就是管理全局变量,方便引用和修改
render: h => h(App) // 渲染App.vue页面
}).$mount("#app");
其实App.vue
主要是引入router
,删掉一些原来的代码,使用简单router-view
,然后整个页面就是靠路由指向来渲染页面,默认会指向根路径【/
】配置。
<template>
<div id="app">
<router-view />
</div>
</template>
配置路由与页面
打开src/router/index.js
可以看到目前的页面配置,我们目前可以先只配置一个首页即可,如下:
const routes = [
{
path: "/",
name: "Home",
component: () => import("../views/Home.vue")
}
];
默认首页自动查找Home.vue
并渲染
后面如果有更多的页面,可以在此文件配置,也可以在子模块中配置好路由(个人推荐各个模块自己定义路由文件),引入到此文件。
定制ElementUI样式
我们要定制ElementUI样式的话,要么直接用主题生成器生成,要么不引用css文件,直接用scss文件,然后修改变量定制,一般是用scss文件定制主题比较方便,而且控制起来更随心。
这里选择用scss文件定制,删除main.js
里面引入css的代码
import 'element-ui/lib/theme-chalk/index.css';
//改为(此文件为定制样式):
import './assets/css/main.scss'
可以参考:https://element.eleme.cn/#/zh-CN/component/custom-theme
新建文件scss文件引入(放到src/assets/themes/default/index.scss
):
// 参考:https://element.eleme.cn/#/zh-CN/component/custom-theme
/* 改变主题色变量 */
$--color-primary: #545C64;
$--color-success: #27B6AF;
$--menu-background-color: #1D212A;
$--menu-item-font-color: #B3B8C3;
$--menu-item-hover-fill: #1F2D3D;
$--main-padding: 15px;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
// 自定义变量
$---menu--inline-background-color: #13161C;
@import "node_modules/element-ui/packages/theme-chalk/src/index";
.el-menu-item.is-active {
color: $--color-white;
background-color: $--menu-item-hover-fill;
font-weight: $--font-weight-primary;
}
.el-menu--inline {
background-color: $---menu--inline-background-color;
}
.el-submenu__title {
font-weight: $--font-weight-primary;
}
另外再针对布局等增加一个新的scss文件main.scss
,引入我们定制的主题文件
@import "variables"; // 自定义的一些变量
@import "src/assets/themes/default/index";
html, body {
height: 100%;
margin: 0;
}
.index-menu, #app, .index-container, .top-menu {
height: 100%;
}
.index-menu {
color: $--menu-item-font-color;
}
//...更多内容可以参考开源代码
定制好样式之后,我们可以布局页面了。
配置首页布局
针对左侧菜单LeftMenus
和右侧顶部导航TopMenus
做一些布局的配置,完整代码参考开源地址。
<template>
<el-container class="index-container">
<el-aside width="auto">
<left-menus :menu-collapse.sync="menuCollapse"/>
</el-aside>
<el-container>
<el-header class="index-header" height="50px">
<top-menus :menu-collapse.sync="menuCollapse"/>
</el-header>
<router-view/>
</el-container>
</el-container>
</template>
<script>
// @ is an alias to /src
import LeftMenus from "../components/LeftMenus";
import TopMenus from "../components/TopMenus";
export default {
name: "Home",
components: {
TopMenus,
LeftMenus
},
data(){
return {
menuCollapse: false
}
},
computed: {
}
};
</script>
大体结果:
配置菜单页面
新建两个测试页面,并配置到路由:
{
path: '/admin',
component: Home,
redirect: '/admin/user-list',
name: 'Settings',
children: [
{
path: "/admin/user-list",
name: "UserList",
component: () => import("../views/user/UserList.vue")
},
{
path: "/admin/role-list",
name: "RoleList",
component: () => import("../views/user/RoleList.vue")
}
]
}
配置到菜单:
<template>
<el-menu class="index-menu" :collapse="isCollapse" router>
<el-row>
<el-col class="text-center padding-tb">
<router-link class="index-title" to="/">{{logoTitle}}</router-link>
</el-col>
</el-row>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-setting"></i>
<span slot="title">系统管理</span>
</template>
<el-menu-item index="/admin/user-list">
<i class="el-icon-s-custom"></i>
<span slot="title">用户管理</span>
</el-menu-item>
<el-menu-item index="/admin/role-list">
<i class="el-icon-user-solid"></i>
<span slot="title">角色管理</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-lock"></i>
<span slot="title">权限管理</span>
</el-menu-item>
<el-menu-item index="5">
<i class="el-icon-menu"></i>
<span slot="title">菜单管理</span>
</el-menu-item>
</el-submenu>
</el-menu>
</template>
访问效果:
到目前为止,最简单版本的后退管理页面就已经搭建成功了,需要更多功能,可以引入第三方的库。
GitHub地址:https://github.com/fugary/simple-element-ui-template