vk-unicloud-admin
vk-unicloud
系列开发框架client端
框架地址: https://ext.dcloud.net.cn/plugin?id=2204
admin端
框架地址:https://ext.dcloud.net.cn/plugin?id=5043
client端
框架文档:点击查看
admin端
框架文档:点击查看
22466457
欢迎萌新和大佬来使用和共同改进框架vk-unicloud-admin
?vk-unicloud-admin
是基于 uniapp
+ unicloud
+ uni-id
+element
+ vk-unicloud-router
的一套快速 admin
完整开发框架注意:TA是uniapp项目,支持uniapp所有H5的API和插件市场所有uni-admin插件
最大亮点:使用 vk-unicloud-admin
后,即使你是一个纯后端,不会写任何css,照样可以写出功能强大且页面好看的admin管理系统。
vk-unicloud-admin
主要功能 以及 对开发者的价值vk-unicloud-router
,拥有 vk-unicloud-router
的所有现成API功能。让你开发事半功倍。点击查看
element
UI框架,并在 element
基础上进行了深度封装(支持原生 element
)element官网
表单可视化拖拽工具
(可直接生成 vk框架代码
和 element
原生代码 点击体验
万能表格组件
,通过少量代码即可完成 CRUD
,同时还拥有较高的自由度。几分钟完成一个页面 CRUD
。万能表单组件
,通过少量代码即可完成表单渲染 + 表单请求。element
原生代码来写页面。pages-dev.json
机制,开发调试页面不会被发布到正式版中。vue admin
项目,那么上手此框架的学习成本几乎为0核心思想:通过 JSON 配置渲染页面(简单配置一下,表格就完成了)
如下方JSON用于渲染头像和时间
[
{ key: "avatar", title: "头像", type: "avatar", width: 80, shape:"circle" },
{ key: "_add_time", title: "添加时间", type: "time", width: 160, valueFormat:"yyyy-MM-dd hh:mm:ss" },
]
核心思想:通过 JSON 配置渲染表单(简单配置一下,表单就完成了)
如下方JSON用于渲染 一个昵称输入框 和 性别单选按钮组
[
{ key:"nickname", title:"昵称", type:"text" },
{
key:"gender", title:"性别", type:"radio",
data:[
{ value:1, label:"男" },
{ value:2, label:"女" }
]
}
]
vk-unicloud-admin
框架同时还包含 vk-unicloud-router
所有功能,点击查看vk-unicloud-router功能列表
项目根目录
执行 npm i
命令(必须先执行此npm命令,安装必要的依赖,否则会无法启动。)client端
(客户端)、admin端
(管理端)、service端
(服务端,这里指云函数端)vk-unicloud-router
框架开发H5、小程序、APP的开发者。client端
和 admin端
都还没开发。service端(云函数端)
统一放在 client端
的项目中,而 admin端
项目 直接绑定 client端
项目admin端
内的 uniCloud/router/service/admin
内的以下文件复制到你之前的 client端
项目 uniCloud/router/service/admin
内(复制整个目录)admin端
内的 uniCloud/router/service/template
内的以下文件复制到你之前的 client端
项目 uniCloud/router/service/template
内(复制整个目录)admin端
内的 uniCloud/database/db_init/
目录下的3个数据库表数据导入对应的表内(导入方法:服务空间后台 - 数据库 - 导入)uni-id-roles 角色表
uni-id-permissions 权限表
opendb-admin-menus 菜单表
admin端
的服务空间直接绑定 client端
项目(注意是 绑定
不是 关联
)(注意是 绑定
不是 关联
)(注意是 绑定
不是 关联
)
4、上传 router
云函数
5、完成
已完成情况一的请直接跳过情况二和情况三
1、在 项目根目录
目录执行 npm i
2、右键 uniCloud
目录 点击 运行云服务空间初始化向导
3、完成
建议你先使用 vk-unicloud-router
框架进行 client端
开发,client端
开发完成后,使用 vk-unicloud-admin
开发 admin端
当然你也可以先开发 admin端
,再开发 client端
。
如果先开发 admin端
,则直接用 情况二
的安装步骤即可。
如果先开发 client端
,则先下载 client端
开发框架,等 client端
开发完后再用 情况一
的安装步骤即可 点击前往下载client端开发框架
根目录/使用帮助/代码快捷提示/javascript代码块提示.json
内的代码 复制到 hbx 工具 - 代码块设置 - javascript代码块根目录/使用帮助/代码快捷提示/vue代码块提示.json
内的代码 复制到 hbx 工具 - 代码块设置 - vue代码块删除 pages.json
内的 pages_template/components
和 pages_template/element
分包(此为发布演示版本需要而加,你的项目可以删除,删除后开发模式下依然存在(因为在pages-dev.json
中配置了),发布到线上环境时自动屏蔽)
uniCloud/common
目录是否跟下图完全一致如果不一致,特别是 uni-id
目录下没有这个文件 uni-id/node_modules/uni-config-center/uni-id/config.json
,则在 uni-id
目录执行 npm i
试试(如果有这个uni-id/node_modules
目录,先删除目录,再执行npm i)
因为每个人的 DCloud Appid
是不一样的,所以你需要在应用管理中添加自己的应用(或直接修改内置的2条数据的appid即可)
DCloud Appid
获取方法
复制 uniapp
项目根目录的 manifest.json
文件内的 appid
22466457
如有问题或建议可以在群内讨论。此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。