一，创建uniAdmin项目
打开开发者工具Hbuilder,然后点击左上角的文件，点新建，点项目。如下图。
选择uniadmin，编写项目名，然后使用vue3
记得选用阿里云服务器，因为最便宜
点击创建，等待项目创建
二，关联云服务空间并部署项目
2-1，新建云服务空间
项目创建好以后，会自动弹起下图所示的弹窗
这里用来关联我们的服务空间。我们这里建议大家点击新建，去开通新的服务空间。
新建我们使用阿里云的服务，因为是最便宜的，基本上够我们使用了。
支付后等待创建，创建大改10分钟左右。创建好以后如红色框里，就是我们新建的服务空间。
2-2，关联云服务空间
我们上面创建好以后，回到项目，点击一下刷新，然后选中我们新建的云服务空间
再点击下一步，全部勾选，然后点击开始部署
弹出的提示框也是点击替换
然后就是等待安装一些依赖
可以看到我们项目所需的一些东西，都是自动的帮我们安装
安装依赖可能比较慢，我们耐心等待即可。初始化完成如下
三，运行uniAdmin项目
3-1，运行项目
点击最上面工具栏的运行，然后运行到浏览器，选择自己电脑上的浏览器即可。
然后等待项目编译
编译完成后，会自动在浏览器里为我们打开uniadmin，如果没有自动打开，就点击箭头所示的Local,就是本地测试网址。
打开后如下
3-2，注册管理员账号
官方给的提示是：进入创建管理员页面（仅允许注册一次管理员账号）
首次使用，可以通过登录页面底部链接创建一个超级管理员（仅允许创建一次），该接口会判断系统里如果有 admin 角色的用户，就不再允许添加新的超级管理员。
所以注册的时候，一定要记好自己的账号和密码，建议大家和石头哥保持一致。 账号密码都用admin123
注册成功后就可以登录admin了
登录后的页面如下
接下来我们就可以去修改uniadmin的代码来实现我们自己个性化的管理后台了
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，登录管理后台
我们登录后如下
上图的页面，其实就是我们常用的管理后台的窗体, 窗体分为三个部分，topWindow 顶部窗口（导航栏），leftwindow 左侧窗口（菜单栏），右侧的内容主窗体。这就是我们的经典布局。
我们在正式写代码前，可以先做一些简单的修改
3-5，修改项目图标
可以看到我们的项目图标是默认的，我们可以去修改下我们的图标
顶部导航的图标是在admin.config.js文件进行配置
我们可以在static里上传我们自己的图标，如qcl.png
然后在admin.config.js替换我们的图标
然后点击保存，就可以看到后台同步的替换为我们的图标了
