从0开始写Vue项目-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

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

二、集成Element-ui

1.安装

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

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

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

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

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

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

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

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

三、搭建后台主体框架

1.脚手架布局

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

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

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

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

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

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

2.头部Header

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

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

  
    
      
      
        首页
        {{ currentPathName }}
      
    
    
      
        
        {{user.nickname}}
      
      
        
          个人信息
        
        
          退出登录

3.侧边栏 

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

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

从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建我们可以把代码拿下来，然后按照自己的风格进行改造

  
    
      
      后台管理系统
    
    
      
        
        主页
      
    
    
      
        
        系统管理
      
      
        
        用户管理

4.侧边栏和头部布局

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

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

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

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

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

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

         在我们的Manage.Vue里面写上你所选择的布局方式，然后进行一些细节的处理，就可以拿来用了。从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建

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

Manage.Vue

    

      
        
      

      
        
          

        

        
<!--          表示当前页面的子路由会在里面展示-->
          
        
      
    



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


.headerBg {
  background: antiquewhite!important;
}

5.使用布局

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

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

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

四、效果展示

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

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

⛵小结 

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

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

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

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/9469af92b9.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐