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

柔情只为你懂 2024-05-06 23:01 67阅读 0赞

**1.**[从0开始写Vue项目-环境和项目搭建\_慕言要努力的博客-CSDN博客][0_Vue_-_-CSDN]

#### 一、了解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][https_element.eleme.io_zh-CN]

![516d4e40ce9445ef9b4027c8ef93eba8.png][]

#### 二、集成Element-ui ####

**1.安装**

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

![4b70b93c9ceb4ea7bdd51fdf54a80968.png][]

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

![b56dfc9ec3b446319b2f68c3bc006d6f.png][]

**2.配置main.js文件**

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

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

**3.自定义全局css样式**

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

![d218379bfdb14d79bb4a310114a16780.png][]

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

![8de83bf00bd54e1fa4e1463124eefbc7.png][]

#### **三、搭建后台主体框架** ####

**1.脚手架布局**

![a823d3b19aeb48b2a05582ead376249e.png][]

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

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

![ec771728b6b94bc29bb3c73c75f475aa.png][]

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

![ad6cbaa8bd5547a49e03df0aef45695d.png][]

**2.头部Header**

![1ca31e4501384e0aba2157085faf4545.png][]

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

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

**3.侧边栏**

![e6655b7aad714f8699239da6593e690f.png][]

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

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

<template>
      <el-menu :default-openeds="opens" style="min-height: 100%; overflow-x: hidden"
               background-color="rgb(48, 65, 86)"
               text-color="#fff"
               active-text-color="#ffd04b"
               :collapse-transition="false"
               :collapse="isCollapse"
               router
               @select="handleSelect"
      >
        <div style="height: 60px; line-height: 60px; text-align: center">
          <img src="../assets/images/登录.png" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 5px">
          <b style="color: white" v-show="logoTextShow">后台管理系统</b>
        </div>
        <el-menu-item index="/home">
          <template slot="title">
            <i class="el-icon-house"></i>
            <span slot="title">主页</span>
          </template>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">系统管理</span>
          </template>
          <el-menu-item index="/user">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </template>

**4.侧边栏和头部布局**

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

![eecc9679fe3947efb60e53ca78ecb270.png][]

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

![d5c010f2f0f54daca38e54568c8913d0.png][]

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

![09c56437046c4a409e3d64d783d72ebc.png][]

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

![f939406bd7004b55ba3d9871ffe10bf0.png][]

**Manage.Vue**

<template>
        <el-container style="min-height: 100vh;">
    
          <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35% )">
            <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
          </el-aside>
    
          <el-container>
            <el-header style="border-bottom: 1px solid #ccc;">
              <Header :collapse-btn-class="collapseBtnClass" :asideCollapse="collapse" :user="user" />
            </el-header>
    
            <el-main>
    
              <router-view @refreshUser="getUser" />
            </el-main>
          </el-container>
        </el-container>
    </template>
    
    <script>
    import Aside from "@/components/Aside";
    import Header from "@/components/Header";
    
    export default {
      name: 'Manage',
      data() {
        return {
          collapseBtnClass: 'el-icon-s-fold',
          isCollapse: false,
          sideWidth: 200,
          logoTextShow: true,
          user: {},
        }
      },
      components: {
        Aside,
        Header,
      },
      created() {
        //从后台获取最新的User数据
        this.getUser()
      },
      methods: {
        collapse() {//点击收缩按钮触发
          this.isCollapse = !this.isCollapse
          if (this.isCollapse) {       //收缩
            this.sideWidth = 64
            this.collapseBtnClass = 'el-icon-s-unfold'
            this.logoTextShow = false
          } else {      //展开
            this.sideWidth = 200
            this.collapseBtnClass = 'el-icon-s-fold'
            this.logoTextShow = true
          }
        },
        getUser() {
          let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
          //从后台获取User数据
          this.request.get("user/username/" + username).then(res => {
            //从新赋值后台的最新User数据
            this.user = res.data
          })
        }
      }
    }
    </script>
    <style>
    .headerBg {
      background: antiquewhite!important;
    }
    </style>

**5.使用布局**

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

![4e6032146ab445e2885e91eeda0ed897.png][]

**路由router**

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import store from "@/store";
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        component: () => import('../views/Manage.vue'),
        redirect: "/home",
        children: [
          { path: 'user', name: '用户管理', component: () => import('../views/User.vue'),},
          { path: 'home', name: '首页', component: () => import('../views/Home.vue'),},
          { path: 'person', name: '个人信息', component: () => import('../views/Person.vue'),},
        ]
      },
      {
        path: '/about',
        name: 'about',
        component: () => import('../views/AboutView.vue')
      },
      {
        path: '/login',
        name: 'login',
        component: () => import('../views/Login.vue')
      },
      {
        path: '/register',
        name: 'Register',
        component: () => import('../views/Register.vue')
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    
    export default router

#### 四、效果展示 ####

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

![b82e87f9368648988add058767ed1a44.png][]

#### ⛵小结 ####

以上就是对从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建的概述，之后会陆续更新后面的模块，包括后端代码，带大家手码项目，提升自己的编码能力。

![20201213121345281.gif_pic_center][]

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

[0_Vue_-_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129103838
[https_element.eleme.io_zh-CN]: https://element.eleme.io/#/zh-CN
[516d4e40ce9445ef9b4027c8ef93eba8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/29891f545cc84bff8ef5bdfbd653e82f.png
[4b70b93c9ceb4ea7bdd51fdf54a80968.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e1675a71189943a499934ca6ade0b22f.png
[b56dfc9ec3b446319b2f68c3bc006d6f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1c440a0e7cd0425eb7e4288e8235692e.png
[d218379bfdb14d79bb4a310114a16780.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/bc284fee0063452989321ef4b7b48b2a.png
[8de83bf00bd54e1fa4e1463124eefbc7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e82463cdd4aa450b88a4ca9f9916b159.png
[a823d3b19aeb48b2a05582ead376249e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/28fa3f386cd644588f6be558bfa67072.png
[ec771728b6b94bc29bb3c73c75f475aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/20d904cbbe664994aea1dff29b2adcaa.png
[ad6cbaa8bd5547a49e03df0aef45695d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c0c7f2d3efa44814894ae7da69fd1ee1.png
[1ca31e4501384e0aba2157085faf4545.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/59009b843d944581853047624192060a.png
[e6655b7aad714f8699239da6593e690f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c724cff2a5324bb488866f5f39aea1fc.png
[a0621d704a704c459b46d5b2a5129ed9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f071d1e5c03d4bf5af63e5d250b77ced.png
[eecc9679fe3947efb60e53ca78ecb270.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e26c83cb82274a58aff5dab942ec60de.png
[d5c010f2f0f54daca38e54568c8913d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/31eb9f86357448e38275d85cb1ac72ae.png
[09c56437046c4a409e3d64d783d72ebc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/314f2daf7e074b5dbbb7623ca21771cf.png
[623861269c534aac969b6342f98ab9d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d310a52da852447888c0da8bb4840d61.png
[f939406bd7004b55ba3d9871ffe10bf0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d20a08cf75b54a61b9b4e9f27f56eb93.png
[4e6032146ab445e2885e91eeda0ed897.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3e3be0f8a8b94eaf8dcb170f732ad495.png
[b82e87f9368648988add058767ed1a44.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ad7d42e849e840b290a761c400cfcb70.png
[20201213121345281.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/21da2edeae134d3c8751d4f6da972d4e.gif