一,下载安装
源码下载
jeecg-uniapp: JEECG BOOT APP 移动解决方案,采用uniapp框架,一份代码多终端适配,同时支持APP、小程序、H5!实现了与JeecgBoot平台完美对接的移动解决方案!目前已经实现登录、用户信息、通讯录、公告、移动首页、九宫格等基础功能。 (gitee.com)
https://gitee.com/jeecg/jeecg-uniapp?_from=gitee_search
运行指令 拉去代码后运行指令 也可以参考上边的安装文档
拉取项目代码
git clone https://gitee.com/jeecg/ant-design-vue-jeecg
cd ant-design-vue-jeecg
安装node.js
# 出现相应npm版本即可
npm -v
# 出现相应node版本即可
node -v
安装yarn
# 全局安装yarn
npm i -g yarn
# 验证
yarn -v # 出现对应版本号即代表安装成功
切换到ant-design-vue-jeecg文件夹下
# 下载依赖
yarn install
# 启动
yarn run serve
# 编译项目
yarn run build
二,修改端口
端口 报错
![](https://i-blog.csdnimg.cn/blog_migrate/3f65d452dae5ad34c3e51ae867946820.jpeg)
(1)要是没有env 需要创建一个替换成后端接口
![](https://i-blog.csdnimg.cn/blog_migrate/a1df6fc4a064acc773c4f8710c47bc3f.jpeg)
(2)因为他封装了 先找到http请求位置 一级一级找 然后进行接口修改 都改完运行即可
![](https://i-blog.csdnimg.cn/blog_migrate/c702859bbe9021bbc5c9749aa7f25398.jpeg)
接口地址配置 .env.development
NODE_ENV=development
VUE_APP_API_BASE_URL=http://localhost:8080/jeecg-boot
![](https://i-blog.csdnimg.cn/blog_migrate/4369558a7619b6fcd492415e10d72d01.jpeg)
三,修改tabBar
1.方法一
(1)在geecg-uniapp中 底部导航是在index封装的所以我们需要先进行注销
![](https://i-blog.csdnimg.cn/blog_migrate/de1d422f98abfef0a2a9321f1b8f4d12.jpeg)
(2)我们打开pages.json 添加底部导航
"tabBar": {
"list": [{
"iconPath": "/static/shouye.png",
"selectedIconPath": "/static/shouye_1.png",
"pagePath": "pages/home/home",
"text": "首页"
},
{
"iconPath": "/static/tongxunlu_1.png",
"selectedIconPath": "/static/tongxunlu.png",
"pagePath": "pages/annotation/annotationList",
"text": "通讯录"
},
{
"iconPath": "/static/31wode.png",
"selectedIconPath": "/static/my.png",
"pagePath": "pages/user/people",
"text": "我的"
}
]
},
2.方法二
(1) 或者在index里边直接进行修改 先创建页面,路由都配置好 然后在index引入
index.vue页面
<template>
<view>
<home :cur="PageCur" v-if="PageCur=='home'" :key="commponent1Key"></home>
<people v-if="PageCur=='people'" :key="commponent2Key"></people>
<profile :cur="PageCur" v-if="PageCur=='profile'" :key="commponent3Key"></profile>
<view class="cu-bar tabbar bg-white shadow foot">
<view :class="PageCur=='home'?'action text-green':'action text-gray'" @click="NavChange" data-cur="home">
<view class='cuIcon-homefill'></view>主页
</view>
<view :class="PageCur=='profile'?'action text-green':'action text-gray'" @click="NavChange" data-cur="profile">
<view class='cuIcon-profile'></view>发起
</view>
<view :class="PageCur=='people'?'action text-green':'action text-gray'" @click="NavChange" data-cur="people">
<view class='cuIcon-people'></view>个人
</view>
</view>
</view>
</template>
<script>
import profile from '../common/profile.vue'
export default {
components:{
profile
},
data() {
return {
PageCur: 'home',
commponent1Key: 0,
commponent2Key: 0,
commponent3Key:0
}
},
onLoad:function(){
this.PageCur='home'
++this.commponent1Key
++this.commponent2Key
++this.commponent3Key
},
methods: {
NavChange: function(e) {
this.PageCur = e.currentTarget.dataset.cur
}
}
}
</script>
<style>
</style>
profile.vue 页面
<template>
<view>
sdfs asd dsafsa
</view>
</template>
<script>
export default {
name: 'profile',
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
展示
四,修改展示数据
(1)我们以home的常用服务 为例 我们修改 usList 数据
![](https://i-blog.csdnimg.cn/blog_migrate/8b35eefa068edf61bc5d2a2cc5e410c4.jpeg)
(2)查找对应路径
![](https://i-blog.csdnimg.cn/blog_migrate/5c9a331531f467c939aa16cfc0e3897a.jpeg)