devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Cpp五条 | 2024-02-17 05:17:48

赞

踩

vue2 element ui

1.从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

二、集成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

四、效果展示

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

⛵小结 

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

        如果这篇文章有帮助到你，希望可以给作者点个赞

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/100393
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。