Jelajahi dokumentasi untuk proyek ini »
Pratinjau online · Laporkan bug · Berikan saran
vue3-basic-admin Selesai: vue3-basic-admin
adalah sistem manajemen mid-end dan back-end open source yang out-of-the-box. Dikembangkan berdasarkan teknologi arus utama seperti Vue3
, Vite
, Element-Plus
, TypeScript
, Pinia
, dll., ia memiliki banyak komponen bawaan yang dapat langsung digunakan, yang dapat dengan cepat membangun sistem manajemen menengah dan back-end Saat ini diputuskan untuk sepenuhnya open source. Jika proyek ini bermanfaat bagi Anda, Anda dapat mengklik bintang, dan jika Anda memiliki kemampuan finansial tertentu, Anda dapat mentraktir penulisnya dengan secangkir kopi ! Selamat datang di pratinjau dan penggunaan: vue3-basic-admin
1.优化之前版本的权限控制,菜单通过角色控制,可以给用户对应的角色和多角色 2.优化mock数据部分,建立用户常量和角色常量 3.添加tag标签页鼠标滚动功能 4.添加真正的整体换肤功能 5.添加外链 6.添加可视化图,饼图,柱状图等拖拽
vue-antd-admin adalah sistem manajemen backend yang dikembangkan berdasarkan vue+ant-design-vue. Ini mencakup perutean dinamis + manajemen izin untuk menyelesaikan masalah izin pengguna, dan menyediakan izin tetap dasar: admin, pengujian, editor, dan izin pengguna yang disesuaikan, yang dapat disesuaikan Tentukan dan ubah menu yang sesuai dengan peran. Anda dapat menentukan beberapa peran untuk pengguna. Tata letak menyediakan dua tata letak: tata letak kiri dan kanan serta tata letak atas dan bawah, yang dapat diubah secara bebas. dalam tema campuran, tema terang, dan tema gelap, yang dapat diubah sesuka hati; ada juga beberapa backend Fungsi sistem manajemen yang umum digunakan seperti formulir, tabel, dll.;
过一段时间后才发现忘记放测试账号和密码了,哈哈哈 1. 用户名:admin 密码 任意6位数 (如果你喜欢,可以用123456) 拥有admin的权限可以查看所有页面 2. 用户名:test 密码 任意6位数 (如果你喜欢,可以用123456) 拥有test的页面权限,可以查看部分页面 3. 用户名:editor 密码 任意6位数 (如果你喜欢,可以用123456) 拥有editor的页面权限,可以查看富文本等页面 4. 使用手机号验证码登录 ,默认拥有admin的权限
Versi dasar backend node+express+mysql telah diimplementasikan, alamat: vue-antd-server
versi reaksi, alamat: react-antd-admin
Proyek ini dikembangkan menggunakan vue+vue-cli4+vuex+ant-design-vue dan axios. Datanya disimulasikan menggunakan mock.js.
Webpack telah dioptimalkan secara signifikan, dan layar pertama dimuat lebih cepat;
Sistem ini memiliki tampilan grafik bawaan dan peta arcgis yang biasa digunakan dalam grafik;
Digunakan unit test bercanda, cakupan saat ini masih relatif rendah, saya akan menulisnya ketika saya punya waktu;
Untuk pemformatan, ESlint+prettier digunakan.
- 登录 用户名密码/手机号验证码 - 权限 - 动态路由 - 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
Demo Daring
Proyek ini merujuk pada vue-element-admin dan ant-design-pro, dan menemukan banyak metode dan metode penulisan yang berguna. Disarankan jika Anda benar-benar ingin meningkatkan level pengkodean Anda, Anda dapat melihat kode dari orang-orang besar. Open source tidak mudah. Jika menurut Anda proyek ini bermanfaat bagi Anda, Anda dapat mengklik bintang.