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 に基づいて開発されたバックエンド管理システムで、ユーザー権限の問題を解決するための動的ルーティングと権限管理が含まれており、基本的な固定権限 (管理者、テスト、編集者、およびカスタマイズされたユーザー権限) を提供します。カスタマイズ可能 ロールに応じたメニューを定義、変更することができます。 レイアウトは、左右レイアウトと上下レイアウトの 2 つが用意されており、自由に切り替えることができます。混合テーマ、ライトテーマ、ダークテーマには、任意に切り替えることができます。フォーム、テーブルなどの管理システムの一般的に使用される機能もいくつかあります。
过一段时间后才发现忘记放测试账号和密码了，哈哈哈 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 を使用して開発されており、後で、node を使用してバックエンドを作成する予定です。
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 を参照し、多くの有用な記述方法とメソッドを見つけました。本当にコーディング レベルを向上させたい場合は、大手のコードを参照することをお勧めします。 オープンソースは簡単ではありません。このプロジェクトが役立つと思われる場合は、星をクリックしてください。提案やバグは歓迎です。
