分类:VUE模板

soybean-adminvue3naivevitetypescript

作者:honghuangdc 开源协议:MIT


Soybean Admin

English | 中文


license

<<<<<<< HEAD

注意 SoybeanAdmin 正在重构,全新 1.0 即将发布

Soybean Admin v1.0 :

  • [x] 采用基于 pnpm 的 monorepo 管理项目
  • [x] 第三方 soybeanjs 的工具库直接抽离到项目中(ElegantRouter除外),不再作为依赖
  • [x] 采用全新的路由插件 ElegantRouter
  • [x] 使用基于 ApiFox 的远程 mock 代替本地 mock
  • [x] 基于现有路由插件迁移至新路由插件的指南
  • [x] 代码实现遵循 SoybeanJS 的代码规范
  • [ ] 项目的 main 分支保留系统核心部分,示例页面和无关核心的插件移至 example 分支
  • [ ] 完整 1.0 版本的文档

    1.0 源代码:v1.0-beta

同时推出开源的AntDesignVue 版本 和 ElementPlus 版本

>新开项目建议直接使用v1.0-betaAntDesignVue 版本

[!NOTE]If you think Soybean Admin is helpful to you, or you like our project, please give us a ⭐️ on GitHub. Your support is the driving force for us to continue to improve and add new features! Thank you for your support!

>[!CAUTION]

the old version of Soybean Admin is moved to branch legacy. It is recommended to use the latest version of Soybean Admin.the documents of new version is processing, please wait patiently.


Star History Chart

Introduction

Soybean Admin is a clean, elegant, beautiful and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite5, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. Soybean Admin provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.>>>>>>>db17c916ef5454f1076b0ad2a49949ee847abeb4

Features

  • Cutting-edge technology application: using the latest popular technology stack such as Vue3, Vite5, TypeScript, Pinia and UnoCSS.
  • Clear project architecture: using pnpm monorepo architecture, clear structure, elegant and easy to understand.
  • Strict code specifications: follow the SoybeanJS specification, integrate eslint, prettier and simple-git-hooks to ensure the code is standardized.
  • TypeScript: support strict type checking to improve code maintainability.
  • Rich theme configuration: built-in a variety of theme configurations, perfectly integrated with UnoCSS.
  • Built-in internationalization solution: easily realize multi-language support.
  • Automated file routing system: automatically generate route import, declaration and type. For more details, please refer to Elegant Router.
  • Flexible permission routing: support both front-end static routing and back-end dynamic routing.
  • Rich page components: built-in a variety of pages and components, including 403, 404, 500 pages, as well as layout components, tag components, theme configuration components, etc.
  • Command line tool: built-in efficient command line tool, git commit, delete file, release, etc.
  • Mobile adaptation: perfectly support mobile terminal to realize adaptive layout.

Preview

Documentation

  • Legacy Docs

    new version documentation is processing, please wait patiently.

Repositories

RepositoryGithubGiteePreview
NaiveUIgithubgiteepreview
AntDesign Vuegithubgiteepreview
Legacygithubgiteepreview
Legacy Documentationgithubgiteepreview

Example Images

Usage

Environment Preparation

Make sure your environment meets the following requirements:

  • git: you need git to clone and manage project versions.
  • NodeJS: >=18.0.0, recommended 18.19.0 or higher.

    You can use fnm to manage your NodeJS version, installation tutorial.

  • pnpm: >= 8.0.0, recommended 8.14.0 or higher.

Clone Project

git clone https://github.com/honghuangdc/soybean-admin.git

Install Dependencies

pnpm i

Since this project uses the pnpm monorepo management method, please do not use npm or yarn to install dependencies.

Start Project

pnpm dev

Build Project

pnpm build

How to Contribute

We warmly welcome and appreciate all forms of contributions. If you have any ideas or suggestions, please feel free to share them by submitting pull requests or creating GitHub issue.

Git Commit Guidelines

This project has built-in commit command, you can execute pnpm commit to generate commit information that conforms to Conventional Commits specification. When submitting PR, please be sure to use commit command to create commit information to ensure the standardization of information.

Browser Support

It is recommended to use the latest version of Chrome in development for a better experience.

IE EdgeFirefoxChromeSafari
not supportlast 2 versionslast 2 versionslast 2 versionslast 2 versions

OpenSource Author

Soybean

Communication

CommunicationLink or QR Code
GitHub IssueLink
DiscordLink
QQ Group
Technical communication, questions and answers
Soybean's WeChat
Business consulting, cooperation, project architecture, one-to-one guidance, etc.

Donate

If you think this project is helpful to you, you can buy Soybean a drink to show your support, Soybean open source power can not be separated from your support and encouragement.

<<<<<<< HEAD

QQ交流群

添加本人微信,欢迎来业务咨询(技术交流请加QQ群)

>>>>>>>db17c916ef5454f1076b0ad2a49949ee847abeb4

Contributors

Thanks the following people for their contributions. If you want to contribute to this project, please refer to How to Contribute.

License

This project is based on the MIT © 2021 Soybean protocol, for learning purposes only, please retain the author's copyright information for commercial use, the author does not guarantee and is not responsible for the software.