当前位置:首页 > 下载列表 > Vue Antd Admin

Vue Antd Admin v0.7.4

VueAntdAdmin是一个开箱即用的中后台前端/设计解决方案。功能特点:简洁以Markdown为中心的项目结构,以最少的配置帮助你专注于写作。优雅享受Vue+webpack的开发体验,在Markdown中使用Vue组件,同时可以使用Vue来开发自定义主题。自然VuePress为每个页面预渲染生成静态的HTML,同时在页面被加载的时候,将作为SPA运行。Adm
分类:   下载/工具 · JavaScript 来源:  点击进入 版本:  v0.7.4
日期:  2023-02-17 人气:   大小:  1.63MB
标签:   javascript web应用开发
点击下载 相关下载
功能介绍

Vue Antd Admin是一个开箱即用的中后台前端/设计解决方案。

功能特点:

简洁

以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。

优雅

享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。

自然

VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。

Admin 的布局

在 Vue Antd Admin 中,我们抽离了使用过程中一些常用的布局,都放在 layouts 目录中,分别为:

AdminLayout / 管理后台布局,包含了头部导航,侧边导航、内容区和页脚,一般用于后台系统的整体布局

PageLayout / 页面布局,包含了页头和内容区,常用于需要页头(包含面包屑、标题、额外操作等)的页面

CommonLayout / 通用布局,仅包含内容区和页脚的简单布局,项目中常用于注册、登录或展示页面

Admin 的视图

在 Vue Antd Admin 中,除了基本布局外,通常有很多页面的结构是相似的。因此,我们把这部分结构抽离为视图组件。

一个视图组件通常包含一个基本布局组件、视图公共区块、路由视图内容区、页脚等,常常结合路由配置使用。它们也被放入了 layouts 目录中,分别为:

TabsView / 多页签视图,包含了 AdminLayout 布局、多页签头和路由视图内容区

PageView / 页面视图,包含了 PageLayout 布局和路由视图内容区

BlankView / 空白视图,仅包含一个路由视图内容区

如何使用

通常我们会把视图组件和路由配置结合一起使用,我们把配置信息抽离在路由配置文件中 src/router/config.js 。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  path: 'form',
  name: '表单页',
  meta: {
    icon: 'form',
  },
  component: PageView,
  children: [
    {
      path: 'basic',
      name: '基础表单',
      component: () => import('@/pages/form/basic/BasicForm'),
    }
  ]
}

当然,如果这满足不了你的需求,你也可以自定义一些视图组件,或者直接在页面组件中使用布局。参考 workplace 页面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <page-layout :avatar="currUser.avatar">
    <p slot="headerContent">
      <p class="title">{{$t('timeFix')}},{{currUser.name}},{{$t('welcome')}}</p>
      <p>{{$t('position')}}</p>
    </p>
    <template slot="extra">
      <head-info class="split-right" :title="$t('project')" content="56"/>
      <head-info class="split-right" :title="$t('ranking')" content="8/24"/>
      <head-info class="split-right" :title="$t('visit')" content="2,223"/>
    </template>
    <p>...</p>
  </page-layout>
</template>

版本声明
本文转载于:https://down.chinaz.com/soft/51123.htm 如有侵犯,请联系study_golang@163.com删除
查看更多
课程推荐
  • Golang云原生架构师课程
    Golang云原生架构师课程
    Go是一门并发支持、垃圾回收的编译型系统编程语言;本课程转载自哔哩哔哩:https://www.bilibili.com/video/BV1Mh411M7A
    204次学习
  • MySQL数据管理之备份恢复案例解析视频教程
    MySQL数据管理之备份恢复案例解析视频教程
    《MySQL数据管理之备份恢复案例解析视频教程》MySQL是一个开放源码的小型关联式数据库管理系统,目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。
    160次学习
  • MySQL索引优化解决方案
    MySQL索引优化解决方案
    本套课程是根据MySQL索引的设计理念与数据结构、索引使用场景、索引分类、索引运用场景、索引性能分析、查询优化、MySQL索引的慢查询等组成,主要讲述了MySQL索引优化的解决方案,非常适合有MySQL使用基础或者有一定工作经验的同学。课程讲解了解决大数量查询慢的问题、如何编写一个高效的SQL、查询语句应该如何优化、索引的实现原理是什么、索引又应该如何优化...等诸多SQL索引优化的难点和面试点。
    182次学习
  • 极客学院Docker视频教程
    极客学院Docker视频教程
    Docker是PaaS提供商dotCloud开源的一个基于LXC的高级容器引擎,源代码托管在Github上,基于go语言并遵从Apache2.0协议开源。Docker自2013年以来非常火热,无论是从github上的代码活跃度,还是各大厂商的支持,都使Docker成为了时下最受关注的技术,甚至微软都声称在下一代WindowsServer中集成对Docker的支持。所以我们收集了《极客学院Docke
    243次学习
  • Golang进阶实战编程
    Golang进阶实战编程
    本课程是在《Go语言基础视频》基础之上录制的,是Go语言基础的后半部分。包括包的管理,IO操作,Go语言最大的亮点:高并发,goroutine,channel,反射等。本视频主要为了帮助Go语言的初学者,从零到一的快速入门。学完本套课程,可以学会如果通过包管理Go项目,并发模型,以及并发实现,channel通道如何传递数据,反射等等。
    127次学习
  • JavaScript极速入门
    JavaScript极速入门
    本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了,让你学习0压力,适合新手观看学习......
    431次学习
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码