Vue3模板:https://github.com/WangZhenHao/vite-vue3-admin
参考大量的后台开源项目,发现都是花里胡哨的东西,如什么 eachart,拖拽等等
实际上主要的功能就是用户权限
,用户权限一般都是根据接口返回的路由列表,在本地/public/data 模拟了接口的返回
非常真实模拟了日常开发。这样子,方便数据很轻松接入不同的后台如:Java, PHP,NodeJS 等,数据只要和模拟接口一样就可以了
非常适合接私活或者接外包的时候用
在线地址:https://wangzhenhao.github.io/webpack-react-admin/index.html#/overview
React + typeScript + webpack + antd + Tailwind 后台管理
├─src
| ├─views 页面
| ├─type 全局类型定义
| |
| |
| ├─store store数据
| |
| ├─router 路由
| |
| ├─components
| | ├─global 组件
| ├─assets 资源
| | ├─js js目录
| | | |
| | | |
| | ├─img 图片
| | |
| | ├─css css资源
| | |
| ├─api 接口列表集合
| |
├─public
| ├─data mock数集合
| | ├─roleList.json
| | ├─user
| | | ├─getUserList.json
| | | └userLoginIn.json
├─.vscode 自动格式化配置
| ├─extensions.json
| └settings.json
├─config webpack配置
|
|
├─scripts webpack启动命令
- 安装 vscode 专用插件:Tailwind CSS IntelliSense
https://tailwindcss.com/docs/installation
字体颜色:
text-color-3
text-color-6
...
字体大小:
text-12px
text-14px
text-16px
...
背景颜色:
bg-color-f
bg-color-3
bg-color-6
...
外边距:
mb-10px
mt-10px
mb-20px
mt-30px
...
内边距:
pb-10px
pt-10px
pb-20px
pt-30px
...