# mulanbay-ui-vue
**Repository Path**: qmlist/mulanbay-ui-vue
## Basic Information
- **Project Name**: mulanbay-ui-vue
- **Description**: 木兰湾的PC端Vue版本，技术栈：Vue、Element UI、Echarts
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 40
- **Created**: 2023-07-06
- **Last Updated**: 2023-07-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 项目介绍
木兰湾是用于管理个人消费、锻炼、音乐、阅读、健康、饮食、人生经历等各个衣食住行信息的系统，通过提醒、计划模块利用调度系统来统计分析执行情况。
并通过积分和评分体系来综合评估个人的总体状态。
该系统是前后端分离的项目，当前项目mulanbay-ui-vue为前端PC版本，需要结合后端项目才能完整访问。
木兰湾后端项目：
* 服务器端[mulanbay-server](https://gitee.com/mulanbay/mulanbay-server)
木兰湾前端项目：
VUE版本
* 基于Vue的前端(PC端)[mulanbay-ui-vue](https://gitee.com/mulanbay/mulanbay-ui-vue)
* 基于Vue的前端(移动端)[mulanbay-mobile-vue](https://gitee.com/mulanbay/mulanbay-mobile-vue)
Jquery版本(V3.0版本后不再维护，以VUE版本为主)
* 基于Jquery的前端(PC端)[mulanbay-ui-jquery](https://gitee.com/mulanbay/mulanbay-ui-jquery)
* 基于Jquery的前端(移动端)[mulanbay-mobile-jquery](https://gitee.com/mulanbay/mulanbay-mobile-jquery)
[木兰湾项目说明](https://gitee.com/mulanbay)
## 开发说明
### 所用技术
Vue、Element UI、Echarts
### 软件要求
| 软件 | 版本 |
| ---------------------- | ------------- |
| Node | v10.19.0 |
| Nginx | 1.17+ |
### 文档地址
木兰湾文档[https://www.yuque.com/mulanbay/rgvt6k/uy08n4](https://www.yuque.com/mulanbay/rgvt6k/uy08n4)
### 开发环境
```bash
# 克隆项目
# 进入项目目录
cd mulanbay-ui-vue
# 配置api地址
在vue.config.js中配置api服务器的地址（已配置好后端默认地址localhost:8080/api）
# 安装依赖
npm install
# 如果安装比较慢，可以选择以下指定源。
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
#
# 启动服务
npm run dev
```
浏览器访问 http://localhost:9527
（前后端可以联动访问，开发模式运行主要是修改代码后直接热部署看到实时修改的效果）
### 正式环境
```bash
# 构建测试环境
git clone https://gitee.com/mulanbay/mulanbay-ui-vue.git
# 构建生产环境
npm run build:prod
# 配置nginx
构建成功后会在工程的dist输出打包好的文件，然后需要再在nginx配置代理，配置方法参加上面的木兰湾文档。
```
## 运行说明
由于木兰湾是前后端分离项目，通常以nginx作为代理配置，方法参见文档
```
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
# 头像地址
location /20 {
root /mulanbay/server/mulanbayServer/avatar;
try_files $uri $uri/ /index.html;
index index.html index.htm;
charset utf-8;
}
# 后端api地址
location /api {
root html;
index index.html index.htm;
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# Vue的PC端地址(默认)
location / {
root /mulanbay/server/mulanbayServer/ui/vue;
charset utf-8;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
}
```
## 项目截图
### 基于Vue的PC端
### 基于Vue的移动端
### 微信公众号消息推送
