vue antd admin
1.0.0
이 프로젝트에 대한 문서 살펴보기 »
온라인 미리보기 · 버그 신고 · 제안
vue3-basic-admin 완료됨: vue3-basic-admin 즉시 사용 가능한 오픈 소스 미드엔드 및 백엔드 관리 시스템입니다. Vue3 , Vite , Element-Plus , TypeScript , Pinia 등과 같은 주류 기술을 기반으로 개발되었으며, 즉시 사용할 수 있는 많은 구성 요소가 내장되어 있어 중간 및 백엔드 관리 시스템을 빠르게 구축할 수 있습니다. .현재는 완전 오픈소스로 결정되었습니다. 이 프로젝트가 도움이 되셨다면 별표를 눌러주셔도 되고, 어느 정도 경제적 여력이 되신다면 작가님과 커피 한잔 대접하기는 쉽지 않을 것 같습니다. ! 미리보기 및 사용에 오신 것을 환영합니다: vue3-basic-admin
1.优化之前版本的权限控制，菜单通过角色控制，可以给用户对应的角色和多角色 2.优化mock数据部分，建立用户常量和角色常量 3.添加tag标签页鼠标滚动功能 4.添加真正的整体换肤功能 5.添加外链 6.添加可视化图，饼图，柱状图等拖拽
vue-antd-admin은 vue+ant-design-vue를 기반으로 개발된 백엔드 관리 시스템으로, 사용자 권한 문제를 해결하기 위한 동적 라우팅 + 권한 관리를 포함하고 기본 고정 권한(관리자, 테스트, 편집자 및 사용자 정의된 사용자 권한)을 제공합니다. 역할에 따라 메뉴를 정의하고 수정할 수 있습니다. 레이아웃은 왼쪽 및 오른쪽 레이아웃과 위쪽 및 아래쪽 레이아웃을 제공하며 자유롭게 전환할 수 있습니다. 마음대로 전환할 수 있는 혼합 테마, 밝은 테마 및 어두운 테마에는 양식, 테이블 등과 같이 일반적으로 사용되는 관리 시스템 기능도 있습니다.
过一段时间后才发现忘记放测试账号和密码了，哈哈哈 1. 用户名：admin 密码 任意6位数 （如果你喜欢，可以用123456） 拥有admin的权限可以查看所有页面 2. 用户名：test 密码 任意6位数 （如果你喜欢，可以用123456） 拥有test的页面权限，可以查看部分页面 3. 用户名：editor 密码 任意6位数 （如果你喜欢，可以用123456） 拥有editor的页面权限，可以查看富文本等页面 4. 使用手机号验证码登录 ，默认拥有admin的权限
node+express+mysql 백엔드의 기본 버전이 구현되었습니다. 주소: vue-antd-server
반응 버전, 주소: reacct-antd-admin
이 프로젝트는 vue+vue-cli4+vuex+ant-design-vue 및 axios를 사용하여 개발되었습니다. 데이터는 mock.js를 사용하여 시뮬레이션됩니다. 나중에 노드를 사용하여 백엔드를 작성할 계획입니다.
Webpack은 크게 최적화되었으며 첫 번째 화면이 더 빠르게 로드됩니다.
시스템에는 echart에서 일반적으로 사용되는 차트 디스플레이와 arcgis 맵이 내장되어 있습니다.
jest 단위 테스트를 사용했는데, 현재 적용 범위는 여전히 상대적으로 낮습니다. 시간이 나면 작성하겠습니다.
형식화에는 ESlint+prettier가 사용됩니다.
- 登录 用户名密码/手机号验证码 - 权限 - 动态路由 - echarts各种图表 - arcgis地图 - 克里金插值分析图 - 全景图 - 富文本 - Markdown - 错误页面 403 404 500 - 个人设置 - 系统设置 - 更换主题 - 两种布局方式 - 面包屑 - 标签页 - webSocket - svg图标 - 全屏 - 返回顶部 - webpack优化 - 抽奖页 - table表 - form表单 - 上传Excel - 上传头像和裁剪 - htmlcanvas2截屏 - 封装自定义loading
- 关闭生产环境sourceMap; - 关闭预加载(vue会预加载后面的页面，会导致首屏加载比较慢) - g-zip压缩(需要nginx配置); - 生产环境CDN加载部分插件 - 去除生产环境console和debugger; - 公共代码抽离 - 打包大小分析 - 打包缓存 - 部分依赖使用异步cdn加载
- 拥有 admin、test和editor三种权限，每个权限对应的路由和左侧菜单不同； - 点击个人设置个性化或者右边设置，可以更改页面的设置，如果标签页是否开启，布局方式,主题颜色等； - 系统管理员拥有所有权限，可以更改用户对应的菜单路由和角色对应的权限。 ......
├── mock ---mock模拟数据 ├── public ---静态资源文件 ├── src │ ├── api ---接口 │ ├── assets ---图片 │ ├── components ---可复用的vue组件 │ ├── layouts ---布局方式 │ ├── router ---路由 │ ├── store ---vuex │ ├── styles ---sass样式 │ ├── utils ---方法函数 │ ├── vendor ---导出excel │ ├── views ---页面 │ ├── App.vue │ ├── main.js │ ├── permission.js ---路由拦截 ├── tests ---单元测试文件 ├── .browserslistrc ├── .env ├── .eslintrc.js ├── babel.config.js ├── .jest.config.js ---jest的配置 ├── package.json ├── package-lock.json ├── README.md └── vue.config.js ---webpack的配置
# 克隆项目 git clone https://github.com/biubiubiu01/vue-antd-admin.git # 进入项目目录 cd vue-antd-admin # 安装依赖 npm install # 本地开发 启动项目 npm run serve
# 打包项目 npm run build # 单元测试 npm run test:unit
온라인 데모
이번 프로젝트는 vue-element-admin과 ant-design-pro를 참고했고, 유용한 작성 방법과 방법을 많이 찾았습니다. 정말로 코딩 수준을 향상시키고 싶다면 빅맨들의 코드를 살펴보는 것이 좋습니다. 오픈 소스가 쉽지 않습니다. 이 프로젝트가 유용하다고 생각되면 별표를 클릭하고 제안을 환영합니다.
