Vue项目ElementUI集成

Vue项目ElementUI集成

前面已经搭建好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>

大体结果：

image

配置菜单页面

新建两个测试页面，并配置到路由：

{
    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>

访问效果：

image

到目前为止，最简单版本的后退管理页面就已经搭建成功了，需要更多功能，可以引入第三方的库。

GitHub地址：https://github.com/fugary/simple-element-ui-template