基于vue3.0 + Element UI实现后台管理模板

基于vue3.0 + Element UI实现后台管理模板 最后编辑:2020-02-03
网站服务: 网站收录 站长导航 侵权申诉 域名出售广告服务VIP会员

使用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实现后台管理模板

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 免责声明。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 提交工单.。
本站资源是否提供技术服务?
本站提供的源码、模板、插件、素材或教程等资源,都不包含技术服务请大家谅解!
叁夏资源
专业精品资源分享平台!致力于收集各类高质量精品资源,VIP更享无限下载之体验。
  • 2020-01-30Hi,初次和大家见面了,请多关照!
  • 761会员总数(位)
  • 1889资源总数(个)
  • 48本周发布(个)
  • 0 今日发布(个)
  • 340稳定运行(天)

提供全网最优质的资源集合

加入VIP会员 获取全站资源
升级SVIP尊享更多特权立即升级