soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript.

Overview
SoybeanAdmin Logo

Soybean Admin


简介

Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript 的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务模型,页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能,它可以帮助你快速搭建企业级中后台项目,相信不管是从新技术使用还是其他方面,都能帮助到你。

特性

  • 最新技术栈:使用 Vue3/vite2 等前端前沿技术开发, 使用高效率的npm包管理器pnpm
  • TypeScript: 应用程序级 JavaScript 的语言
  • 主题:可配置的主题
  • 代码规范:丰富的规范插件及极高规范的代码组织

预览

目录规范

soybean-admin
├── README.md                  //项目说明文档
├── build                      //vite构建相关配置和插件
│   ├── env                    //.env环境文件内容加载插件
│   └── plugins                //构建插件
│       ├── html.ts            //html插件(注入变量,压缩代码等)
│       ├── iconify.ts         //iconify图标插件
│       └── vue.ts             //vue相关vite插件
├── commitlint.config.js       //commitlint提交规范插件配置
├── index.html
├── package.json
├── pnpm-lock.yaml             //npm包管理器pnpm依赖锁定文件
├── public                     //公共目录
│   ├── resource               //资源文件夹(不会被打包)
│   └── favicon.ico
├── src
│   ├── App.vue                //vue文件入口
│   ├── AppProvider.vue        //配置naive UI的vue文件(国际化,loadingBar、message等组件)
│   ├── assets                 //静态资源
│   ├── components             //全局组件
│   │   ├── business           //业务相关组件
│   │   ├── common             //公共组件
│   │   └── custom             //自定义组件
│   ├── context                //全局上下文(通过provide和inject实现)
│   │   ├── app                //从app.vue注入的上下文
│   │   └── part               //局部组件注入的上下文
│   ├── enum                   //TS枚举
│   │   ├── animate.ts         //动画枚举
│   │   ├── business.ts        //业务相关枚举
│   │   ├── common.ts          //通用枚举
│   │   ├── route.ts           //路由相关枚举
│   │   ├── storage.ts           //存储相关枚举
│   │   └── theme.ts           //系统主题配置相关枚举
│   ├── hooks                  //组合式的钩子函数hooks
│   │   ├── business           //业务相关hooks
│   │   └── common             //通用hooks
│   ├── interface              //TS类型接口
│   │   ├── business.ts        //业务相关类型接口
│   │   ├── common.ts          //通用类型接口
│   │   └── theme.ts           //系统主题配置相关类型接口
│   ├── layouts                //布局组件
│   │   ├── BasicLayout        //基本布局组件(包含全局头部、侧边栏、底部等)
│   │   └── BlankLayout        //空白布局组件
│   ├── main.ts                //项目入口ts文件
│   ├── plugins                //插件
│   │   └── dark-mode.ts       //windicss暗黑模式插件
│   ├── router                 //vue路由
│   │   ├── cache.ts           //缓存的路由
│   │   ├── components.ts      //缓存的路由对应的组件
│   │   ├── helpers.ts         //工具函数
│   │   ├── menus.ts           //菜单
│   │   ├── permission.ts      //路由守卫相关函数
│   │   └── routes.ts          //声明的路由
│   ├── service                //网络请求
│   │   ├── api                //请求接口
│   │   ├── middleware         //请求结果的处理中间件
│   │   ├── request            //封装的请求函数
│   │   └── utils              //请求相关工具函数
│   ├── settings               //项目初始配置
│   │   └── theme.ts           //项目主题初始配置
│   ├── store                  //状态管理
│   │   └── modules            //状态管理划分的模块
│   ├── styles                 //样式
│   ├── typings                //TS类型声明文件(*.d.ts)
│   ├── utils                  //全局工具函数
│   │   ├── auth
│   │   ├── common
│   │   └── storage
│   └── views                  //页面
│       ├── dashboard
│       └── system
├── tsconfig.json              //TS配置
├── vite.config.ts             //vite配置
├── windi.config.ts            //windicss框架配置
├── .cz-config.js              //git cz提交配置
├── .editorconfig              //统一编辑器配置
├── .env                       //环境文件
├── .env.development           //环境文件(开发模式)
├── .env.production            //环境文件(生产模式)
├── .env.staging                //环境文件(自定义staging模式)
├── .eslintignore              //忽略eslint检查的配置文件
├── .eslintrc.js               //eslint配置文件
├── .gitignore                 //忽略git提交的配置文件
├── .husky                     //git commit提交钩子,提交前检查代码格式和提交commit内容的格式
└── .prettierrc.js             //prettier代码格式插件配置
Comments
  • [issue] pnpm dev 启动失败

    [issue] pnpm dev 启动失败

    [email protected]:~/soybean-admin# npm -v
    6.14.17
    [email protected]:~/soybean-admin# pnpm -v
    7.13.5
    [email protected]:~/soybean-admin# node -v
    v14.20.1
    [email protected]:~/soybean-admin# pnpm dev
    
    > [email protected] dev /root/soybean-admin
    > cross-env VITE_SERVICE_ENV=dev vite
    
                                                                                                                            14:56:05
      VITE v3.1.7  ready in 2753 ms
    
      ➜  Local:   http://localhost:5173/                                                                                    14:56:05
      ➜  Network: http://192.168.0.104:5173/                                                                                14:56:05
    events.js:377
          throw er; // Unhandled 'error' event
          ^
    
    Error: spawn xdg-open ENOENT
        at Process.ChildProcess._handle.onexit (internal/child_process.js:277:19)
        at onErrorNT (internal/child_process.js:472:16)
        at processTicksAndRejections (internal/process/task_queues.js:82:21)
    Emitted 'error' event on ChildProcess instance at:
        at Process.ChildProcess._handle.onexit (internal/child_process.js:283:12)
        at onErrorNT (internal/child_process.js:472:16)
        at processTicksAndRejections (internal/process/task_queues.js:82:21) {
      errno: -2,
      code: 'ENOENT',
      syscall: 'spawn xdg-open',
      path: 'xdg-open',
      spawnargs: [ 'http://localhost:5173/' ]
    }
     ELIFECYCLE  Command failed with exit code 1.
    

    版本如上,启动失败,端口也没占用

    opened by locustbaby 4
  • post请求在网络中可以看到后端正确返回信息,但是consol终端打印返回信息为空。

    post请求在网络中可以看到后端正确返回信息,但是consol终端打印返回信息为空。

    网络请求返回为 { "status": 200, "data": { "user": { "name": "dfhndfs", "age": "dfgndftgs" }, "phone": "dfthnde" }, "msg": "success", "error": null } consol打印结果为 { "error": { "type": "backend" }, "data": null }

    opened by yangsadd 4
  • Unexpected token '.'

    Unexpected token '.'

    项目启动报 html = await server.transformIndexHtml?.(url, html, req.originalUrl); ^

    SyntaxError: Unexpected token '.' at wrapSafe (internal/modules/cjs/loader.js:915:16) at Module._compile (internal/modules/cjs/loader.js:963:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at require (internal/modules/cjs/helpers.js:74:18) at Object. (E:\workspace\2022\synway\soybean-admin\vite.config.ts:43:31) at Module._compile (internal/modules/cjs/loader.js:999:30) at Object.require.extensions. [as .ts] (E:\workspace\2022\synway\soybean-admin\node_modules\vite\dist\node\chunks\dep-f9d9421a.js:71391:20)

    opened by dargon5210 4
  • Replace `↹` with `··`

    Replace `↹` with `··`

    大佬,请问这个怎么解决,一格式化就提示这个错误,感谢! [{ "resource": "/e:/Test/soybean-admin/build/utils/index.ts", "owner": "eslint", "code": { "value": "prettier/prettier", "target": { "$mid": 1, "external": "https://github.com/prettier/eslint-plugin-prettier#options", "path": "/prettier/eslint-plugin-prettier", "scheme": "https", "authority": "github.com", "fragment": "options" } }, "severity": 8, "message": "Replace with ··", "source": "eslint", "startLineNumber": 8, "startColumn": 1, "endLineNumber": 8, "endColumn": 2 }]

    opened by JOECHAN890 3
  • [需求]更多场景下的权限和菜单模式

    [需求]更多场景下的权限和菜单模式

    作者你好,我查阅文档和代码之后发现,当前的权限模式是固定的前端角色权限。

    后期是否考虑添加更多的权限处理方式呢?如果权限是动态的,需要如何处理呢,后期是否考虑优化。

    这是我在另一个项目中看到的处理方式,可以参考一下https://vvbin.cn/doc-next/guide/auth.html

    最后补充一下,你的代码写的很优雅,项目UI也很美观,我非常喜欢,感谢你对开源做出的贡献

    opened by chenwen97 4
  • 一些想法

    一些想法

    1、路由优化:一般情况下菜单、路由都是从后台获取加载的,所以对应的routeKey集合也应该自动适配或生成,目前好像是需要手动在文件里添加,并且处理路由过程,是用到了routeKey类型约束,不添加应该会报错。 2、vue页面缓存:正常vue页面,开启keepalive缓存后,默认情况不论刷新,关闭后重新打开,还是切换tab,都会保持志之前的现状。是否可以只在切换tab时,使得keepalive生效,而在手动刷新、关闭后重新打开,即便开启了keepalive,也会重新加载页面。是否可以通过添加meta属性,添加keepalive开启状态下,生效的事件:1、点击菜单(或页面连接)全新打开页面(open)2、点击已打开页面的菜单(链接)或切换tab(switch)3、刷新,不论是点击tab菜单还是右侧刷新(refresh) 3、iframe页面缓存:看了网上大部分解决思路是,将所有ifram页面拿出来,循环先渲染好,然后根据路由路径,控制哪个显示。这是一个解决方案,但是如果iframe页面过多,肯定存在性能问题,而目前肯定都是系统集成,iframe页面不会少。而且这样也存在一个问题,无法支持刷新,获取最新新页面。

    opened by kenixFog 2
Releases(v0.9.7)
  • v0.9.7(Nov 7, 2022)

    特性

    new router system [新的路由系统] (c7b6a3f) import i18n [引入i18n] (b632b7f) add constant route page without login status[添加未登录可访问的固定路由示例页面] (78efd77) add pinia setup syntax example: setup-store[添加setup syntax的pinia示例setup-store] (82c4b09) refactor icon system, unify icon usage [重构图标系统,统一图标用法] (811f820) support constant route without login status[支持未登录状态下访问自定义的固定路由] (a539112) useNaiveTable函数:类型部分 (02992dc) 全局搜索菜单及消息通知适配移动端 (97e2ffd) 实现用户管理页面 (472f93b) 适配移动端,修复Tab关闭图标的bug (296b154) 添加请求适配adapter层应用的示例页面 (8d11a6a) 添加生产的主题配置缓存 (718c362) 添加系统管理的页面 (c33b5eb) 添加组件名称,调整vue文件里面的类型声明位置 (f64bc91) 添加provide、inject上下文示例 (a444731) 系统消息组件代码优化 (9518372) 增加返回顶部功能 (894b0f1) 增加系统消息组件 (afa0134) 多页签增加关闭所有 (8237adb)

    缺陷修复

    decrease @types/node version to fix TS type error [降低@types/node版本修复TS的类型错误] (149d22a) 修复多个后端服务时的本地代理 (2aba58c) 修复构建后mockjs对xhr的影响问题 (7757285) 修复图标的TS类型 (dbd6760) 修复eslint规则 (d7f5bf3) 修复import.meta.env的TS类型 (1994262) 修复tab不显示路由首页的问题 (a792bb5) 修复TS类型问题 (16dce9a) add iconify json (8a1ec93) 自定义图标在Dropdown组件下hover状态无法显示图标 (0523f08) 修复iconifyRender (c37d0ac)

    Source code(tar.gz)
    Source code(zip)
  • v0.9.5(Jun 6, 2022)

    支持同一路由根据不同query和hash同时显示不同Tab 动态路由根路由重定向只需取决于后端返回的路由首页 补充更多的ECharts示例 添加百度地图、升级依赖 添加插件页面:图表 添加自动跟随系统主题设置 添加antv g2图表示例 引入echarts替换antvG2plot 路由meta新增activeMenu属性 修复@antv/g2生产环境报错 修复插件不存在的错误提示 修复权限切换路由数据未更新的问题 修复页面切换时导致的溢出滚动条 当为左侧混合菜单时activeMenu无效情况

    Source code(tar.gz)
    Source code(zip)
  • v0.9.3(Mar 12, 2022)

  • v0.9.2(Feb 11, 2022)

    重构路由页面引入,简化步骤 迁移全局搜索菜单功能 修复Tab在移动端设备无法点击的问题 修复分析页和工作台的布局问题 修复项目配置拷贝功能 vite配置修复

    Source code(tar.gz)
    Source code(zip)
  • v0.9.1(Jan 23, 2022)

  • v0.0.5(Nov 28, 2021)

  • v0.0.4(Nov 26, 2021)

  • v0.0.3(Nov 23, 2021)

  • v0.0.2(Nov 21, 2021)

🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Jacking 51 Jun 20, 2021
vue3+vite+typescript+naive-ui

Vue 3 + Typescript + Vite This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setu

duofan 0 Dec 24, 2021
Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案

Naive Ui Admin 是一个基于 Vue3.0、Vite、 Naive UI、TypeScript 的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务模型,页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能,它可以帮助你快速搭建企业级中后台项目,相信不管是从新技术使用还是其他方面,都能帮助到你。

Ah jung 3.2k Jan 1, 2023
Star Admin Vue Admin Template is a free admin template based on Bootstrap 4 and Vue.js.

Star Admin Vue Admin is a free admin template based on Bootstrap 4 and Vue.js.

BootstrapDash 310 Dec 25, 2022
wt-vite-vue3-element-ruoyi-ts 若以 若依 typescript ts vue3 vue vite vite2.0 模版

wt-vite-vue3-element-ruoyi-ts ?? 全网首发 ?? 基于 Vite 2.0 + Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 Project setup npm i -g

superDragon 5 May 5, 2022
vue-vben-admin-2.0 mini template.vue3,vite,typescript

Vue vben admin English | 中文 Introduction Vue Vben Admin is a free and open source middle and back-end template. Using the latest vue3, vite2, TypeScri

Vben 1.8k Dec 30, 2022
Tauri-vue3-vuetify3-template - Power by tauri add vue3 vuetify3 typescript cross platform gui template

First EVN 1、install cargo curl https://sh.rustup.rs -sSf | sh 2、install cargo-ta

庄文达 4 Oct 25, 2022
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus + typescript

vue3-admin-ts English | 中文 A basic vue3 admin template with vite2 & Element-Plus UI & axios & svg-icon& permission control & lint A new generation adm

kuanghua 194 Dec 15, 2022
Vue3 admin,ant design vue pro,vue admin,vue vite admin,ant design pro

Ant Design Vue Pro An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue 基于 Vite2 Vue3 Ant-Design-of-

Ones 80 Dec 16, 2022
A frontend SIMPLE Admin Interfaces, based on Vite + Vue3 + Antd + Typescript

Lightweight, pure, easy to use Vue3 admin interfaces.

Jesse Zhao 52 Jan 3, 2023
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

Vben 15.5k Jan 1, 2023
Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

null 21 Dec 26, 2022
A hybrid app template, base on Vue3, Vite, Vuetify, TypeScript and Capacitor.

A hybrid app template, base on Vue3, Vite, Vuetify, TypeScript and Capacitor.

Grant Chan 7 Dec 29, 2022
a lite vue3.0 admin template,there is no typescript !

Vuejs3+Vite2+ElementPlus后台管理系统模板 简介 一个免费开源的后台管理系统模板。使用最新的主流技术开发,开箱即用(主要还是用于学习参考!),主要向以下两个高star的后台管理系统模板进行学习,并根据需求进行取舍和优化改进。 vue-vben-admin 使用了最新的vue3,

小夕立 67 Dec 24, 2022
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus

?? A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus

kuanghua 228 Dec 30, 2022
Laravel Vue Admin is a beautiful dashboard combination of Laravel, Vue3 and the UI Toolkit Element Plus.

Laravel Vue Admin Laravel Vue Admin is a beautiful dashboard combination of Laravel, Vue3 and the UI Toolkit Element Plus. Getting started Installing

null 6 Dec 5, 2022
Free and Beautiful Vue 3 Admin Template

Free and beautiful Vue.js admin template with 44+ custom UI components. Developed by Epicmax. Designed by Vasili Savitski Based on Vuestic UI library.

Epicmax 9.1k Jan 8, 2023
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus + typescript 的后台管理系统vue3-element-admin-ts

vue3-element-admin-ts ?? 基于 Vite 2.0 + Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 v

雪月欧巴 92 Nov 16, 2022
Dashboard starter template built with Vite, Vue 3, Tailwind CSS and TypeScript.

Dashboard starter template built with Vue 3 and Tailwind CSS.

Robert Soriano 766 Dec 19, 2022