Skip to content

sunbcy/fastapi-vue3-admin-template

Repository files navigation

fastapi-vue3-admin-template

介绍

fastapi-vue3-admin-template  是一个前后台全栈解决方案,它基于  vue3  和  element-plus实现。它使用了最新的前端技术栈,内置了动态路由,权限验证,提供了多种布局方式,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。

建议

本项目的定位是管理后台开发模版,适合当基础模板来进行二次开发,部分公共组件会在后续持续集成,欢迎提 issues。

功能

- 登录 / 注销

- 权限验证
  - 页面权限
  - 指令权限
  - 权限配置

- 多环境发布
  - dev
  - prod

- 全局功能
  - 国际化多语言
  - 多种动态换肤
  - 动态侧边栏(支持多级路由嵌套)
  - 动态面包屑
  - 快捷导航(标签页)
  - Svg Sprite 图标
  - Screenfull全屏

前序准备

你需要在本地安装  node  和  git。本项目技术栈基于  ES2015+element-plusaxiospiniavue-routervite和提前了解和学习这些知识会对使用本项目有很大的帮助。

目录结构

本项目已经为你生成了一个完整的 fastapi+vue3 全栈开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。

├── README.md
├── deploy.sh
├── index.html
├── jsconfig.json
├── package.json
├── public
   └── favicon.ico
├── src
   ├── App.vue
   ├── api
   ├── assets
   ├── components
   ├── icons
   ├── layout
   ├── main.js
   ├── permission.js
   ├── router
   ├── settings.js
   ├── store
   ├── styles
   ├── utils
   └── views
├── vite.config.js
├── yarn.loc
└──.env.prod

安装

# 克隆项目
git clone https://github.com/sunbcy/fastapi-vue3-admin-template.git

# 进入项目目录
cd fastapi-vue3-admin-template

# 安装前端依赖
yarn install

# 安装后端依赖
cd fastapi-vue3-admin-template/api
pip install -r requirements_xxx.txt(xxx-mac/win/termux)

# 前端本地开发
yarn dev

# 启动项目
./mac_start.sh

TIP

强烈建议使用 yarn 安装依赖,避免使用 npm 或者 cnpm 安装,可能会有各种诡异的 bug。

启动完成后,当你看到下面的页面说明你操作成功了。

  • 默认布局

image.png

  • 经典布局

image.png

  • 单栏布局

image.png

  • 全局管理

image.png 接下来你可以修改代码进行业务开发了,本项目内建了常用公共组件、全局路由管理等等各种实用的功能来辅助开发,你可以通过查看已有的工具类和封装方法来使用。

建议

使用前建议将目前项目中已有的配置和文件夹工具类先行查看一番,方便后续使用。

其它

基于vue3-admin-template模版开发管理后台,你可以通过微量的改造来达到符合你司项目的需求。

对于一些开发中常遇到的问题和解决方案欢迎讨论。

欢迎您提供宝贵的意见和建议,也欢迎提 issues 增加和修改功能或组件,另外如果可以的话请给个 start,感谢~

About

fastapi-vue3-admin-template框架学习

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •