2024最新1小时零基础编写uniapp和小程序管理后台，基于uniadmin和vue3实现uniapp小程序的网页管理后台

大家好，欢迎来到IT知识分享网。

一，创建uniAdmin项目

二，关联云服务空间并部署项目

2-1，新建云服务空间

2-2，关联云服务空间

三，运行uniAdmin项目

3-1，运行项目

3-2，注册管理员账号

3-3，项目目录结构

我们先来大致的熟悉下项目目录，不用死记硬背。我们后面只看我们用到的地方就行。 没有用到的可以不用管。

项目目录结构

┌── uniCloud # 云端文件 │ │── cloudfunctions # 云函数相关文件 │ └── database # 数据库相关文件 ├── common │ │── admin-icons.css # admin-icons 图标样式 │ │── theme.scss # 换肤功能样式 │ │── uni.css # 公共样式 │ └── uni-icons.css # icon样式 ├── components # 自定义组件 ├── i18n # 国际化语言包目录 ├── js_sdk # js sdk目录 ├── pages # 页面 │ │── demo # demo相关的页面 │ │── error # 404页面 │ │── index # 首页 │ │── system # 系统管理 │ │ │── app # 应用管理 │ │ │── menu # 菜单管理 │ │ │── permission # 权限管理 │ │ │── role # 角色管理 │ │ │── safety # 安全审计 │ │ │── tag # 标签管理 │ │ └── user # 用户管理 │ └── uni-stat # uni统计 │ │── channel # 渠道（app） │ │ │── channel.vue # 页面（下同） │ │ └── fieldsMap.js # 字段配置（下同） │ │── device # 设备统计 │ │ │── activity # 渠道/场景分析 │ │ │ │── activity.vue │ │ │ └── fieldsMap.js │ │ │── comparison # 平台对比 │ │ │ │── comparison.vue │ │ │ └── fieldsMap.js │ │ │── overview # 今日概览 │ │ │ │── overview.vue │ │ │ └── fieldsMap.js │ │ │── retention # 留存 │ │ │ │── retention.vue │ │ │ └── fieldsMap.js │ │ │── stickiness # 粘性 │ │ │ │── stickiness.vue │ │ │ └── fieldsMap.js │ │ └── trend # 趋势分析 │ │ │── trend.vue │ │ └── fieldsMap.js │ │── error # 错误分析 │ │ │── error.vue │ │ └── fieldsMap.js │ │── page-content # 内容统计 │ │ │── page-content.vue │ │ └── fieldsMap.js │ │── event # 事件分析 │ │ │── event.vue │ │ └── fieldsMap.js │ │── page-ent # 入口页 │ │ │── page-ent.vue │ │ └── fieldsMap.js │ │── page-res # 受访页 │ │ │── page-res.vue │ │ └── fieldsMap.js │ │── page-rule # 页面规则 │ │ └── page-rule.vue │ │── pay-order # 支付统计 │ │ │── funnel # 支付/漏斗分析 │ │ │ │── funnel.vue │ │ │ └── fieldsMap.js │ │ │── list # 支付/订单明细 │ │ │ │── list.vue │ │ │── overview # 支付/订单概况 │ │ │ │── overview.vue │ │ │ └── fieldsMap.js │ │ └── ranking # 支付/用户价值排行 │ │ └── ranking.vue │ │── scene # 场景值（小程序） │ │ │── scene.vue │ │ └── fieldsMap.js │ └── user # 用户统计 │ │── activity # 渠道/场景分析 │ │ │── activity.vue │ │ └── fieldsMap.js │ │── comparison # 平台对比 │ │ │── comparison.vue │ │ └── fieldsMap.js │ │── overview # 今日概览 │ │ │── overview.vue │ │ └── fieldsMap.js │ │── retention # 留存 │ │ │── retention.vue │ │ └── fieldsMap.js │ │── stickiness # 粘性 │ │ │── stickiness.vue │ │ └── fieldsMap.js │ └── trend # 趋势分析 │ │── trend.vue │ └── fieldsMap.js ├── static ├── store # vuex ├── uni_modules # uni_modules 插件目录 ├── windows │ │── component # 项目中使用的组件 │ │── leftWindow.vue # 左侧窗口（菜单栏） │ └── topWindow.vue # 顶部窗口（导航栏） ├── admin.config.js # 系统配置（配置导航，菜单等） ├── App.vue ├── changelog.md # 更新日志 ├── main.js ├── mainfest.json ├── package.json ├── pages.json # 页面配置 ├── postcss.config.js # postcss 配置（浏览器兼容性） ├── uni.scss └── vue.config.js # vue配置文件 

3-4，登录管理后台

我们在正式写代码前，可以先做一些简单的修改

3-5，修改项目图标

四，快速创建文章分类页面

我们这里用的是Schemea2Code来创建数据表，并根据创建的数据表来智能化的自动生成对应页面代码。

4-1，通过DB Schema创建数据表

4-2,通过schemea2code来创建页面

然后最主要的一步就是要选中uniCloud admin页面

可以看到会在pages下为我们自动创建如下几个vue页面，然点击确定。

点击确定后，记得要点击注册，这样会在Pages.json里为我们自动注册页面。

然后点击合并

这样页面就会出现在我们的项目中。

可以看到pages下就有了qcl-type目录
add.vue 添加数据的页面
edit.vue 修改数据的页面
list.vue 显示数据列表的页面

4-3，运行项目打开列表页

4-4，删除无用字段

五，新建一级和二级类目

5-1，左侧栏新建一级类目

5-2，添加二级类目

页面URL 记得填写我们的qcl-type里list.vue的路径
pages/qcl-type/list 但是记得要在路径前加一个 /

就是 /pages/qcl-type/list

提交后再次刷新页面，可以看到我们一级类型 文章管理下面就有了二级类目文章分类。

到这里我们的文章分类功能就开发好了。
有的同学可能好奇我们新建一级或者二级菜单时的序号是干什么的。

5-3，设置序号对菜单进行排序