开源TS全栈后台管理系统之前端 Soon-Admin-Vue3

leafnote
167 阅读2分钟

Soon-Admin 是一套以typescript全栈开发的后台管理系统。包含vue版、nextjs版前端，express版后端。

  • 🧑‍🤝‍🧑前端 soon-admin-vue3 vue3 ts tailwind-css i18n国际化 多标签 可视化mock 移动端适配

  • 🧑‍🤝‍🧑前端 soon-admin-react-nextjs app router ts tailwind-css i18n国际化 可视化mock 移动端适配

  • 👭后端 soon-admin-express express ts i18n国际化 api级权限

截图

pc settings mobile

项目功能 🔨

  • Vue3.4 + Vite + TypeScript 开发，单文件组件＜script setup＞
  • 自定义主题色，暗黑模式
  • 样式采用 scss 和 Tailwind Css
  • 使用 unplugin-auto-import unplugin-vue-components 自动导入element-plus 组件
  • 采用 Pinia 作为状态管理
  • 使用 soon-fetch 进行http请求,不到3K
  • 使用 soon-i18n 实现国际化,有良好的type提示约束,不到3K
  • 使用 soon-mock 可视化配置模拟API
  • 使用 vue-router 配置动态路由权限拦截、路由懒加载，支持页面按钮权限控制
  • 使用 KeepAlive 对页面进行缓存，支持多级嵌套路由缓存
  • 移动端适配完善，表格在移动端展示为卡片形式
  • 使用 Prettier 统一格式化代码，集成 ESLint代码校验规范
  • 使用 husky、lint-staged 规范提交信息

安装使用步骤 📔

  • Clone：
git clone https://github.com/leafio/soon-admin-vue3.git
  • Install：
yarn install
  • Run：
  1. 普通dev模式 (需开启后端项目进行连接)
yarn dev
  1. mock dev模式（会自动启动并连接本地mock服务器）
yarn dev:mock
  • Build：
# 生产环境
yarn build
  • Lint：
# eslint 检测代码
yarn lint:eslint

# prettier 格式化代码
yarn lint:prettier

文件资源目录 📚

Soon-Admin-Vue3
├─ .husky                  # husky 配置文件
├─ build                   # Vite 配置项
├─ mock                    # soon-mock 配置及数据文件
├─ public                  # 静态资源文件（该文件夹不会被打包）
├─ src
│  ├─ api                  # API 接口管理
│  ├─ assets               # 静态资源文件
│  ├─ components           # 全局组件
│  ├─ css                  # 全局样式文件
│  ├─ directives           # 全局指令文件
│  ├─ hooks                # 常用 Hooks 封装
│  ├─ i18n                 # 语言国际化 i18n
│  ├─ layout               # 框架布局模块
│  ├─ router               # 路由管理
│  ├─ store                # pinia store
│  ├─ utils                # 常用工具库
│  ├─ views                # 项目所有页面
│  ├─ App.vue              # 项目主组件
│  └─ main.ts              # 项目入口文件
├─  types                  # 全局 ts 声明
├─ .env                    # vite 常用配置
├─ .env.development        # 开发环境配置
├─ .env.mock               # 本地Mock环境配置
├─ .env.production         # 生产环境配置
├─ .gitignore              # 忽略 git 提交
├─ .prettierignore         # 忽略 Prettier 格式化
├─ CHANGELOG.md            # 项目更新日志
├─ eslint.config.js        # Eslint 校验配置文件
├─ index.html              # 入口 html
├─ package.json            # 依赖包管理
├─ postcss.config.js       # postcss 配置
├─ prettier.config.js      # Prettier 格式化配置
├─ README.md               # README 介绍
├─ tsconfig.json           # typescript 全局配置
└─ vite.config.ts          # vite 全局配置文件
avatar
文章
阅读
粉丝