Vue3-Antd-Admin 开源项目教程

最新推荐文章于 2024-08-08 08:34:06 发布

郭沁熙

最新推荐文章于 2024-08-08 08:34:06 发布

阅读量953

点赞数 8

本文链接：https://blog.csdn.net/gitblog_00813/article/details/141015712

版权

Vue3-Antd-Admin 开源项目教程

vue3-antd-admin使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。项目地址:https://gitcode.com/gh_mirrors/vu/vue3-antd-admin

项目介绍

Vue3-Antd-Admin 是一个基于 Vue 3 和 Ant Design UI 的后台前端解决方案。它集成了动态路由、鉴权登录、菜单管理等基础功能，并对样式进行了优化，解决了其他框架菜单超出不滚动、未 BFC 隔离等问题。该项目逻辑清晰简洁，没有冗余代码，上手快速，适用于中大型管理系统开发。

项目快速启动

克隆项目

首先，克隆项目到本地：

git clone git@github.com:llyyayx/vue3-antd-admin.git

进入项目目录

cd vue3-antd-admin

安装依赖

使用 npm 安装项目依赖：

npm install

启动项目

启动本地开发服务器：

npm run dev

应用案例和最佳实践

登录和权限验证

Vue3-Antd-Admin 提供了登录和权限验证功能，包括页面权限和二步登录。以下是一个简单的登录示例：

<template>
  <a-form :model="formState" @finish="handleLogin">
    <a-form-item label="用户名" name="username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const formState = reactive({
      username: '',
      password: '',
    });

    const handleLogin = () => {
      // 登录逻辑
    };

    return {
      formState,
      handleLogin,
    };
  },
};
</script>

动态侧边栏

项目支持动态侧边栏，可以实现多级路由嵌套。以下是一个简单的侧边栏配置示例：

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue'),
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('@/views/User.vue'),
    children: [
      {
        path: 'profile',
        name: 'Profile',
        component: () => import('@/views/UserProfile.vue'),
      },
    ],
  },
];