Vue項(xiàng)目ElementUI集成

前面已經(jīng)搭建好VueJS環(huán)境绢慢，下面可以引入ElementUI組件了婴梧，ElementUI提供比較完整的控件庫(kù)矗积，很容易搭建一個(gè)自己的后臺(tái)頁(yè)面蔓倍。

參考地址：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布局頁(yè)面

剛建立好的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存儲(chǔ)偶翅，本質(zhì)上就是管理全局變量默勾，方便引用和修改
  render: h => h(App) // 渲染App.vue頁(yè)面
}).$mount("#app");

其實(shí)App.vue主要是引入router，刪掉一些原來(lái)的代碼聚谁，使用簡(jiǎn)單router-view母剥，然后整個(gè)頁(yè)面就是靠路由指向來(lái)渲染頁(yè)面，默認(rèn)會(huì)指向根路徑【/】配置形导。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

配置路由與頁(yè)面

打開(kāi)src/router/index.js可以看到目前的頁(yè)面配置环疼，我們目前可以先只配置一個(gè)首頁(yè)即可，如下：

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Home.vue")
  }
];

默認(rèn)首頁(yè)自動(dòng)查找Home.vue并渲染

后面如果有更多的頁(yè)面朵耕，可以在此文件配置炫隶，也可以在子模塊中配置好路由（個(gè)人推薦各個(gè)模塊自己定義路由文件），引入到此文件阎曹。

定制ElementUI樣式

我們要定制ElementUI樣式的話伪阶，要么直接用主題生成器生成煞檩，要么不引用css文件，直接用scss文件望门，然后修改變量定制形娇，一般是用scss文件定制主題比較方便，而且控制起來(lái)更隨心筹误。

這里選擇用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;
}

另外再針對(duì)布局等增加一個(gè)新的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;
}
//...更多內(nèi)容可以參考開(kāi)源代碼

定制好樣式之后哄酝，我們可以布局頁(yè)面了。

配置首頁(yè)布局

針對(duì)左側(cè)菜單LeftMenus和右側(cè)頂部導(dǎo)航TopMenus做一些布局的配置祷膳，完整代碼參考開(kāi)源地址陶衅。

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

大體結(jié)果：

image

配置菜單頁(yè)面

新建兩個(gè)測(cè)試頁(yè)面，并配置到路由：

{
    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">系統(tǒng)管理</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">權(quán)限管理</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>

訪問(wèn)效果：

image

到目前為止直晨，最簡(jiǎn)單版本的后退管理頁(yè)面就已經(jīng)搭建成功了搀军，需要更多功能，可以引入第三方的庫(kù)勇皇。

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