叁夏资源(SanSummers.Com)-专业精品资源分享平台!
  • 文章介绍

  • 使用vue最新脚手架和Element UI搭建的一个关于后台管理的模板界面,有时间就会更新新的内容,实现一些常用的功能。

    Project setup

    npm install

    Compiles and hot-reloads for development

    npm run dev

    项目入口src目录

    │  App.vue
    │  main.js
    ├─api
    │      api.js       #配置API URL的地方
    │      http.js      #封装axios的一个HTTP请求,
    ├─assets            #放资源的目录
    ├─components        #组件目录
    │  ├─LeftMenu       #左边菜单组件
    │  └─TopMenu        #头部菜单组件
    ├─router            #路由配置
    ├─store             #vuex状态管理
    └─views             #编写各个页面的目录
        ├─404           #无用的示例页面
        ├─projectManagement   #项目管理页面
        ├─home          #主页面
        ├─login         #登录页面
        ├─register      #注册页面
        ├─repository    #无用的示例页面
        └─test          #无用的示例页面

    API配置

    const baseUrl='http://127.0.0.1:8080/serverapi/';
    export default {
        projectManagement:{
            list:baseUrl+'projectManagement/list'
        },
        user:{
            list:baseUrl+'user/list'
        }
    }
    //在页面或者组件里直接使用api
    this.api.projectManagement.list

    使用封装好的http请求

    //在页面或者组件里直接使用
    this.http.post(this.api.projectManagement.list, {
        name:'test'
    }, res => {
        console.log(res);
    }, err=>{
        console.log(err);
    })

    左边菜单配置

    在router.js配置路由即可

    import Vue from 'vue'
    import Router from 'vue-router'
    import login from '@/views/login/index.vue'
    import register from '@/views/register/index.vue'
    import home from '@/views/home/index.vue'
    import projectManagement from '@/views/projectManagement/index.vue'
    import repository from '@/views/repository/index.vue'
    import error404 from '@/views/404/index.vue'
    import test from '@/views/test/index.vue'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: "/",
          redirect: '/login',
          hidden: true
        },
        {
          path: '/login',
          component: login,
          name: 'login',
          hidden: true,
          meta: { title: '登录'}
        },
        {
          path: '/register',
          component: register,
          name: 'register',
          hidden: true,
          meta: { title: '注册'}
        },
        {
          path: '*',
          component: error404,
          name: '404',
          hidden: true,
          meta: { title: '404'}
        },
        {
          path: "/home",
          redirect: '/home/projectManagement',
          hidden: true
        },
        {
          path: '/home',
          name: 'home',
          component: home,
          children:[          //这下面配置左边菜单
            {
              path:'projectManagement',
              name:'projectManagement',
              component:projectManagement,
              //这里配置左边菜单标题和图标
              meta: { title: '项目管理', icon: 'fa fa-database' }
            },
            {
              path:'repository',
              name:'repository',
              component:repository,
              meta: { title: '知识库', icon: 'fa fa-book' }
            },
            {
              path:'test',
              name:'测试二级菜单',
              component:test,
              meta: { title: '测试二级菜单', icon: 'fa fa-align-justify' },
              children:[
                {
                  path:'test',
                  name:'test1',
                  component:test,
                  meta: { title: 'test1', icon: 'fa fa-align-justify' }
                },
                {
                  path:'test2',
                  name:'test2',
                  component:() => import('@/views/test/index'),
                  meta: { title: 'test2', icon: 'fa fa-align-justify' }
                },
                {
                  path:'https://www.baidu.com/',
                  name:'test2',
                  component:test,
                  meta: { title: '外链', icon: 'fa fa-align-justify' }
                }
              ]
            }
          ]
        }
      ]
    })
    1. 本站所有资源来源于用户上传和互联网,如有侵权请及时联系站长!
    2. 分享目的仅为供大家学习和交流,请不要用于商业用途!您需在下载24H内删除!
    3. 如果你也有好源码、素材或教程,可以发布提交审核,推广有RMB奖励和额外收入!
    4. 本站提供的源码、模板、插件、素材或教程等资源,都不包含技术服务请大家谅解!
    5. 如有链接、图片无法下载或失效,请及时联系站长处理!
    6. 本站资源的售价只是赞助,收取微弱费用来维持本站的日常运营所需!
    7. 本站不保证所提供下载的资源准确性、安全性和完整性,源码仅供下载学习之用!
    8. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    9. 如遇到加密压缩包,默认解压密码为"SanSummers",如无法解压请联系站长!
    叁夏资源(SanSummers) » 基于vue3.0 + Element UI实现后台管理模板