Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】

简介: 这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。

一、创建 VUE 项目

npm create vue@latest

二、安装使用 ant-design-vue

  1. 安装脚手架工具
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
  1. 使用组件
# 安装
$ npm i --save ant-design-vue@4.x
  1. 全局完整注册
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);

app.use(Antd).mount('#app');

tips :使用方式基本与element-ui一致,不过确实好看很多和省事儿,都有现成的组件,拿过来改改就行

三、后台管理通用页面的demo

1. 代码部分

<template>
  <a-layout style="min-height: 100vh;min-width: 100vw;">
    <!-- 左侧 侧边栏 -->
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item key="1">
          <pie-chart-outlined />
          <span>Option 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <desktop-outlined />
          <span>Option 2</span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <user-outlined />
              <span>User</span>
            </span>
          </template>
          <a-menu-item key="3">Tom</a-menu-item>
          <a-menu-item key="4">Bill</a-menu-item>
          <a-menu-item key="5">Alex</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <team-outlined />
              <span>Team</span>
            </span>
          </template>
          <a-menu-item key="6">Team 1</a-menu-item>
          <a-menu-item key="8">Team 2</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="9">
          <file-outlined />
          <span>File</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <!-- 右侧 主体内容区域分为三部分 -->
    <a-layout>
      <!-- 顶部区域 -->
      <a-layout-header style="background: #fff; padding: 0">

        <div style="display: flex;float: right;margin-right: 40px;">
          <!-- 登录用户描述性文字-->
           <span style="margin-right: 15px;">欢迎:xxxx</span>
          <!-- 用户点击下拉 -->
          <a-dropdown>
            <a-avatar size="normal" style="margin-top: 15px;">
              <!-- 实际使用时,src绑定实际用户头像即可 -->
              <template #icon>
                <UserOutlined />
              </template>
            </a-avatar>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a href="javascript:;">注销</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">切换账号</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">修改密码</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      <!-- 内容区域 -->
      <a-layout-content style="margin: 0 16px">
        <!-- 面包屑导航 -->
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>User</a-breadcrumb-item>
          <a-breadcrumb-item>Bill</a-breadcrumb-item>
        </a-breadcrumb>
        <a-card style="width: 100%;">
          <a-table :columns="columns" :data-source="data">
            <template #headerCell="{ column }">
              <template v-if="column.key === 'name'">
                <span>
                  <smile-outlined />
                  Name
                </span>
              </template>
            </template>

            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'name'">
                <a>
                  {
  { record.name }}
                </a>
              </template>
              <template v-else-if="column.key === 'tags'">
                <span>
                  <a-tag v-for="tag in record.tags" :key="tag"
                    :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                    {
  { tag.toUpperCase() }}
                  </a-tag>
                </span>
              </template>
              <template v-else-if="column.key === 'action'">
                <span>
                  <a>Invite 一 {
  { record.name }}</a>
                  <a-divider type="vertical" />
                  <a>Delete</a>
                  <a-divider type="vertical" />
                  <a class="ant-dropdown-link">
                    More actions
                    <down-outlined />
                  </a>
                </span>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-layout-content>
      <!-- 页脚区域 -->
      <a-layout-footer style="text-align: center;background-color: #ccc;">
        Ant Design @2023 Changed by Robin
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import {
    
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  SmileOutlined,
  DownOutlined
} from '@ant-design/icons-vue';
import {
     ref } from 'vue';
const collapsed = ref<boolean>(false);
const selectedKeys = ref<string[]>(['1']);

const data = ref([{
    
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
  tags: ['nice', 'developer'],
},
{
    
  key: '2',
  name: 'Jim Green',
  age: 42,
  address: 'London No. 1 Lake Park',
  tags: ['loser'],
},
{
    
  key: '3',
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
  tags: ['cool', 'teacher'],
},])
const columns = ref([{
    
  name: 'Name',
  dataIndex: 'name',
  key: 'name',
},
{
    
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
},
{
    
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
},
{
    
  title: 'Tags',
  key: 'tags',
  dataIndex: 'tags',
},
{
    
  title: 'Action',
  key: 'action',
},])
</script>
<style scoped>
#components-layout-demo-side .logo {
    
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
    
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
    
  background: #141414;
}
</style>

2. 页面显示

在这里插入图片描述

在这里插入图片描述

相关文章
|
9天前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
37 3
|
2天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
13 3
|
8天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
16 2
|
16天前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
|
23天前
|
前端开发 开发者 UED
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。
|
23天前
|
前端开发 JavaScript 开发者
UI 框架:element-ui(二)
在当今快速发展的前端开发领域,用户界面的设计和交互体验日益成为软件成功的关键因素之一。Element UI,作为一款基于Vue.js的组件库,以其精美的界面和丰富的功能受到了广泛的关注与应用。它为开发者提供了一整套高质量的组件,帮助他们快速构建具有现代感的应用程序。 Element UI不仅注重美观的设计,还提供了良好的文档支持和社区活跃度,使得开发者能够轻松上手并解决实施过程中的各种问题。在这篇文章中,我们将深入探讨Element UI的基本特点、安装步骤,以及如何利用其强大的组件系统高效地构建用户友好的界面。无论您是初学者还是有经验的开发者,这篇文章都将为您开辟一条通向更高效开发的道路。
|
16天前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
80 0
|
6月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
6月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
6月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍