慈溪建设网站,南宁建设厅网站,淘宝单页面网站,想建书画网站怎么做的一#xff0c;创建uniAdmin项目
打开开发者工具Hbuilder,然后点击左上角的文件#xff0c;点新建#xff0c;点项目。如下图。 选择uniadmin#xff0c;编写项目名#xff0c;然后使用vue3 记得选用阿里云服务器#xff0c;因为最便宜 点击创建#xff0c;等待项目创…一创建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替换我们的图标 然后点击保存就可以看到后台同步的替换为我们的图标了
