สำรวจเอกสารสำหรับโครงการนี้ »
ดูตัวอย่างออนไลน์ · รายงานข้อบกพร่อง · ให้คำแนะนำ
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 ได้รับการปรับให้เหมาะสมอย่างมาก และหน้าจอแรกโหลดเร็วขึ้น
ระบบมีการแสดงแผนภูมิในตัวและแผนที่ arcgis ที่ใช้กันทั่วไปใน echarts
ใช้การทดสอบหน่วย 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 และพบวิธีการและวิธีการเขียนที่มีประโยชน์มากมาย แนะนำว่าหากคุณต้องการปรับปรุงระดับการเขียนโค้ดของคุณจริงๆ คุณสามารถดูโค้ดของผู้ยิ่งใหญ่ได้ โอเพ่นซอร์สไม่ใช่เรื่องง่าย หากคุณคิดว่าโปรเจ็กต์นี้มีประโยชน์สำหรับคุณ คุณสามารถคลิกดาวได้ ยินดีต้อนรับข้อเสนอแนะและข้อบกพร่อง