从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建

一、了解Element-ui 

1.Element-UI

• Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
  1. Element UI是基于Vue 2.0的
  2. Element UI 提供一组组件
  3. Element UI 提供组件的参考实例, 直接复制

2.官网

 地址:https://element.eleme.io/#/zh-CN

二、集成Element-ui

1.安装

我们进入官网之后，会有很详细的讲解，包括国际化和使用Element-ui

我们打开我们的项目，找到终端，然后输入 npm i element-ui -S

2.配置main.js文件

在我们安装完成之后，我们找到main.js，然后在main.js里面去引入我们的Element-ui，如上图所示

1.  
   import ElementUI from 'element-ui';
2.  
   import 'element-ui/lib/theme-chalk/index.css';
3.  
    
4.  
   Vue.use(ElementUI);

3.自定义全局css样式

我们在assets里面新建一个css文件夹，然后定义一个全局css样式global.css

同样的道理，我们在main.js里面依然引入自己写的css

三、搭建后台主体框架

1.脚手架布局

我们在compones里面新建2个Vue，分别是我们的侧边栏和头部。

        在views里面新建一个Manage.Vue，这里就是来存放我们的脚手架的，将我们的侧边栏和头部Header进行封装，

        然后就是我们的重点了，我们怎么样去使用封装之后的脚手架。那就涉及到我们的Routr了，我们的路由，所以我们要在我们的路由里面去配置我们的脚手架。 

2.头部Header

        其实头部不就那么几种，写一个框框，然后在框框里面去获取用户的信息，例如头像或者是用户名，然后还可以给我们的头部设定背景颜色。

1.  
   <template>
2.  
   <div style="line-height: 60px; display: flex">
3.  
   <div style="flex: 1">
4.  
   <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="collapse"></span>
5.  
   <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
6.  
   <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
7.  
   <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
8.  
   </el-breadcrumb>
9.  
   </div>
10.  
    <el-dropdown style="width: 120px; cursor: pointer">
11.  
    <div style="display: inline-block">
12.  
    <img :src="user.avatarUrl" alt=""
13.  
    style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
14.  
    <span>{{user.nickname}}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
15.  
    </div>
16.  
    <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
17.  
    <el-dropdown-item style="font-size: 14px; padding: 5px 0">
18.  
    <router-link style="text-decoration: none; color: #409EFF" to="/person">个人信息</router-link>
19.  
    </el-dropdown-item>
20.  
    <el-dropdown-item style="font-size: 14px; padding: 5px 0">
21.  
    <span style="text-decoration: none" @click="logout">退出登录</span>
22.  
    </el-dropdown-item>
23.  
    </el-dropdown-menu>
24.  
    </el-dropdown>
25.  
    </div>
26.  
    </template>

3.侧边栏 

关于侧边栏的样式布局，我们可以在我们的Element-ui官网里面找到具体的例子

我们可以把代码拿下来，然后按照自己的风格进行改造

1.  
   <template>
2.  
   <el-menu :default-openeds="opens" style="min-height: 100%; overflow-x: hidden"
3.  
   background-color="rgb(48, 65, 86)"
4.  
   text-color="#fff"
5.  
   active-text-color="#ffd04b"
6.  
   :collapse-transition="false"
7.  
   :collapse="isCollapse"
8.  
   router
9.  
   @select="handleSelect"
10.  
    >
11.  
    <div style="height: 60px; line-height: 60px; text-align: center">
12.  
    <img src="../assets/images/登录.png" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 5px">
13.  
    <b style="color: white" v-show="logoTextShow">后台管理系统</b>
14.  
    </div>
15.  
    <el-menu-item index="/home">
16.  
    <template slot="title">
17.  
    <i class="el-icon-house"></i>
18.  
    <span slot="title">主页</span>
19.  
    </template>
20.  
    </el-menu-item>
21.  
    <el-submenu index="2">
22.  
    <template slot="title">
23.  
    <i class="el-icon-menu"></i>
24.  
    <span slot="title">系统管理</span>
25.  
    </template>
26.  
    <el-menu-item index="/user">
27.  
    <i class="el-icon-s-custom"></i>
28.  
    <span slot="title">用户管理</span>
29.  
    </el-menu-item>
30.  
    </el-submenu>
31.  
    </el-menu>
32.  
    </template>

4.侧边栏和头部布局

        在进行页面布局之前，我们要对App.Vue进行改造，删除我们App.Vue里面不需要的东西，只显示我们路由里面的内容出来。

关于布局，我们的官网里面理所当然的也会给出实例

在这里我们选用下图的布局

         在我们的Manage.Vue里面写上你所选择的布局方式，然后进行一些细节的处理，就可以拿来用了。

  

Manage.Vue

1.  
   <template>
2.  
   <el-container style="min-height: 100vh;">
3.  
   <!--侧边栏-->
4.  
   <el-aside :width="sideWidth 'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35% )">
5.  
   <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
6.  
   </el-aside>
7.  
   <!--头部-->
8.  
   <el-container>
9.  
   <el-header style="border-bottom: 1px solid #ccc;">
10.  
    <Header :collapse-btn-class="collapseBtnClass" :asideCollapse="collapse" :user="user" />
11.  
    </el-header>
12.  
     
13.  
    <el-main>
14.  
    <!-- 表示当前页面的子路由会在<router-view />里面展示-->
15.  
    <router-view @refreshUser="getUser" />
16.  
    </el-main>
17.  
    </el-container>
18.  
    </el-container>
19.  
    </template>
20.  
     
21.  
    <script>
22.  
    import Aside from "@/components/Aside";
23.  
    import Header from "@/components/Header";
24.  
     
25.  
    export default {
26.  
    name: 'Manage',
27.  
    data() {
28.  
    return {
29.  
    collapseBtnClass: 'el-icon-s-fold',
30.  
    isCollapse: false,
31.  
    sideWidth: 200,
32.  
    logoTextShow: true,
33.  
    user: {},
34.  
    }
35.  
    },
36.  
    components: {
37.  
    Aside,
38.  
    Header,
39.  
    },
40.  
    created() {
41.  
    //从后台获取最新的User数据
42.  
    this.getUser()
43.  
    },
44.  
    methods: {
45.  
    collapse() {//点击收缩按钮触发
46.  
    this.isCollapse = !this.isCollapse
47.  
    if (this.isCollapse) { //收缩
48.  
    this.sideWidth = 64
49.  
    this.collapseBtnClass = 'el-icon-s-unfold'
50.  
    this.logoTextShow = false
51.  
    } else { //展开
52.  
    this.sideWidth = 200
53.  
    this.collapseBtnClass = 'el-icon-s-fold'
54.  
    this.logoTextShow = true
55.  
    }
56.  
    },
57.  
    getUser() {
58.  
    let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
59.  
    //从后台获取User数据
60.  
    this.request.get("user/username/" username).then(res => {
61.  
    //从新赋值后台的最新User数据
62.  
    this.user = res.data
63.  
    })
64.  
    }
65.  
    }
66.  
    }
67.  
    </script>
68.  
    <style>
69.  
    .headerBg {
70.  
    background: antiquewhite!important;
71.  
    }
72.  
    </style>

5.使用布局

        我们使用布局要到我们的路由里面去使用，然后我们的children表示我们的子路由，可以理解为侧边栏的功能区域。

路由router 

1.  
   import Vue from 'vue'
2.  
   import VueRouter from 'vue-router'
3.  
   import store from "@/store";
4.  
    
5.  
   Vue.use(VueRouter)
6.  
    
7.  
   const routes = [
8.  
   {
9.  
   path: '/',
10.  
    component: () => import('../views/Manage.vue'),
11.  
    redirect: "/home",
12.  
    children: [
13.  
    { path: 'user', name: '用户管理', component: () => import('../views/User.vue'),},
14.  
    { path: 'home', name: '首页', component: () => import('../views/Home.vue'),},
15.  
    { path: 'person', name: '个人信息', component: () => import('../views/Person.vue'),},
16.  
    ]
17.  
    },
18.  
    {
19.  
    path: '/about',
20.  
    name: 'about',
21.  
    component: () => import('../views/AboutView.vue')
22.  
    },
23.  
    {
24.  
    path: '/login',
25.  
    name: 'login',
26.  
    component: () => import('../views/Login.vue')
27.  
    },
28.  
    {
29.  
    path: '/register',
30.  
    name: 'Register',
31.  
    component: () => import('../views/Register.vue')
32.  
    }
33.  
    ]
34.  
     
35.  
    const router = new VueRouter({
36.  
    mode: 'history',
37.  
    base: process.env.BASE_URL,
38.  
    routes
39.  
    })
40.  
     
41.  
     
42.  
    export default router

四、效果展示

运行我们的项目，当出现下图的样式的时候，就表示我们后台框架搭建完成了

⛵小结 

        如果这篇文章有帮助到你，希望可以给作者点个赞👍，创作不易，如果有对后端技术、前端领域感兴趣的，也欢迎关注 ，我将会给你带来巨大的收获与惊喜💝💝💝！

这篇好文章是转载于：学新通技术网