Dental Admin

Dental Admin 牙科诊所管理系统

基于 Vue3、TypeScript、Vite 的牙科诊所管理系统 | Dental Admin based on Vue 3 + Typescript + Vite

同时使用了：路由 Vue Router，状态管理工具 Pinia，UI 组件库 Element Plus，CSS 预编译器 Sass...

简介

一个平平无奇的 web 后台管理系统，简单、纯净，未使用任何管理端模板。

前后端分离。

基于 Token(JWT) 实现登录注册和权限认证。

包含以下模块：

登录注册、公告管理、科室管理、药品管理、病历管理、收费统计、收入统计、门诊量统计、用户管理、问题反馈，

以及查看和修改个人详情、修改密码、退出登录、中英切换等功能。

更多功能有待后续开发。

接口在我的另一个仓库：dental-admin-api

接口指路： dental-admin-api

快速启动

# 克隆项目
# cnpmjs
git clone https://github.com.cnpmjs.org/Mkild/dental-admin.git
# or
git clone https://github.com/Mkild/dental-admin.git
# 进入项目目录
cd dental-admin
# 安装依赖 （推荐yarn）
npm install  / yarn
# 启动服务 （默认为http://localhost:3001）
npm run dev  / yarn dev
# 打包
npm run build  / yarn build
# 本地预览打包后的dist文件
npm run preview / yarn preview

使用到的插件/工具库

• yarn yarn 依赖管理工具，比 npm 快一点
• @vitejs/plugin-vue @vitejs/plugin-vue 提供 Vue3 单文件组件支持
• @vitejs/plugin-legacy @vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持
• eslint-plugin-vue eslint-plugin-vue 为在.vue 文件和包含 vue 代码的 js 文件中使用 ESlint 提供支持
• axios axios 基于 Promise 的 HTTP 请求库
• qs qs 查询参数序列化和解析库
• echarts echarts 一个基于 js 的开源可视化图表库
• wangeditor wangeditor 轻量级 web 富文本编辑器
• postcss-preset-env 处理 css 浏览器兼容
• postcss-pxtorem 将 px 换算成 rem，实现自适应
• vue-i18n vue-i18n 国际化，最新版本支持 Vue3 和 ts
• driver.js driver.js 用于分步引导，高亮提示
• good-storage good-storage 对原生 web storage 的封装，简单好用，ts 支持: yarn add @types/good-storage -D
• lodash-es lodash-es js 模块化工具库 lodash 的 es modules 版本，体积更小， ts 支持: yarn add @types/lodash-es -D
• unplugin-auto-import 自动导入 Vue 中常用 api，也支持导入 element-plus 组件
• unplugin-vue-components 自动导入 Vue 单文件组件和主流组件库的组件，性能存在问题，手动导入仍是最优选择
• animate.css animate.css 简单好用的 css 动画库
• vue-tsc 命令行检查

工程化

• Git Hook 工具：husky + lint-staged
• 代码规范： Prettier + ESLint
• 提交规范：Commitizen + Commitlint

浏览器支持

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

快照