# jepaas-project-frontend

**Repository Path**: ketr/jepaas-project-frontend

## Basic Information

- **Project Name**: jepaas-project-frontend
- **Description**: JEPaas前端项目，主要包括IM模块，登录模块，首页模块，Demo模块，可以快速基于JEPaaS开发各种自定义模块
- **Primary Language**: JavaScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: http://jepaas.com
- **GVP Project**: No

## Statistics

- **Stars**: 198
- **Forks**: 162
- **Created**: 2019-08-27
- **Last Updated**: 2025-01-11

## Categories & Tags

**Categories**: backend

**Tags**: None

## README

JEPAAS-FRONTEND 7.0.0
======================

## 项目简介
[**JEPAAS低代码开发平台**](https://gitee.com/jepaas/jepaas-opensource) 让软件开发人员和业务用户通过直观的可视化界面来构建应用程序 ，而不是传统的编写代码方式。 用户可以在开发平台灵活各个图形化控件，以构建业务流程、逻辑和数据模型等所需的功能，必要时还可以添加自己的代码。

**JEPAAS-FRONTEND前端开发项目** 用于前端人员开发个性化页面，并方便进行代码调试，打包，部署

## 开源插件
- [IM 即时通讯 1.0.0](docs/plugin/im/README.md)
- [首页展板 1.0.0](docs/plugin/home/README.md)
- [登录页 1.0.0](docs/plugin/login/README.md)


## 环境依赖
- node v8.11 以上

## 安装部署
- [安装node运行环境](http://nodejs.cn/download/)
- 项目部署命令
```
    1. npm install              // 安装node运行环境
    2. config-app/config.json   // 配置手机的开发环境
    3. config-pc/config         // 配置PC的配置文件
    4. npm run dev              // 启动APP开发环境
       npm run dev:pc           // 启动PC的开发环境
       npm run watch            // 启动监听环境，没有服务，手机使用
    5. npm run build            // 构建APP项目
    6. npm run build:pc         // 构建PC项目
```
- npm淘宝镜像
```
    npm install -g cnpm --registry=https://registry.npm.taobao.org
```

  功能菜单：开发->核心引擎->系统变量
      ![](docs/assets/images/PROJECT_URL_HASHMAP.png)
## 目录结构

```
注： 标*的文件不加入git管理
├── README.MD // help
├── *dist              // 发布目录
├── config-app // APP的打包程序配置目录
│   ├── config.js
│   ├── *config.json // 项目配置文件，<<<修改后不可提交!>>>
│   ├── pro
│   ├── server
│   │   └── dev.js // APP开发服务文件
│   ├── template  //模板页
│   │   ├── index.html
│   │   └── template.html
│   └── webpack
├── config-pc    // 打包pc程序配置目录
│   ├── config   // 项目配置文件
│   │   └── jepaas.js // 配置文件
│   ├── config.js // 基础配置文件
|   ├── *config.json  // 个性化配置文件
│   ├── package  // 打包配置文件
│   │   ├── gulp // gulp打包
│   │   ├── tpl // webpack打包模板页
│   │   └── webpack  // webpack打包vue
│   ├── resourse  // 项目资源文件
│   │   └── project
│   │       └── jepaas
│   └── server
│       └── dev.js  // express服务文件
├── gulpfile.js
├── index.html // 插件入口文件
├── manifest.json // app打包的相关配置
├── package.json // node配置文件，通过 npm install 安装所有插件
├── src
│   ├── app //app业务源码
│   └── pc // pc业务源码

```
#### 开发标准 --- APP

```
    1. 所有插件放在：src/app/views/插件目录 中开发
    2. 插件开发使用多页面结构，每个页面下都以index.js为页面入口。
       插件目录结构说明：
        ├── index.js                    // 入口文件，每个插件必须有，打包后会在每个插件根目录生成index.html入口页面
        ├── config.json                 // 可以配置页面所需要的js，css等,如果没有特殊，可以不创建
        ├── pages                       // 多页面目录，
        |      └── page1                // 页面目录，建议两级页面就够了
        |      |    ├── index.js        // 页面入口
        |      |    ├── config.json     // 页面配置，参考上面
        |      |    └── file...         // 其他资源
        |      └── page2...             // 其他页面
        └── index.vue   file...                // node配置文件，通过 npm install 安装所有插件

    2. 插件页面/config.json说明
        {
            title:"插件标题"
            include:["vue","mui","je"]   //需要依赖的插件，有依赖的先后顺序。如果需要别的，请参考static/ux/*,以目录名为准。
            files:{    //外部文件
              js:[],
              css:[]
            },
            "pluginName": "{name}", // 升级相关的脚本  插件名称，
            "pluginCode": "JE-PLUGIN-{name}", // 插件code 必须与平台中新建的插件code一致 否则上传不成功
            "describe": "升级描述", // 升级描述信息
            "version": "1" // 版本  注意，版本必须比平台中的版本号大才可以正常打包
        }
        static/ux：je(JE工具类),mui,picker(mui选择器),previewimage(mui图片预览),pulltorefresh(mui下来刷新),indexedlist(mui索引列表),enterfocus(回车确认),inject(沉浸式头),flexible(重置样式，vue插件需要),vue(默认会加入),jquery
    3. config/config.json说明
        {
            entry:['app']       //配置插件目录:src/views/app,作为打包入口
            socket:true|false   //测试时是否使用socket
            username:''         //测试用户名
            password:''         //测试密码
        }
    4. index.html说明
        主要用于跳转使用，里面的config配置可以自行修改，但是不要提交
```

#### 开发标准 --- APP(h5)
[H5版本开发文档](./README-H5.MD "标题")
#### 开发标准 --- PC

    - config-pc说明
  >config/**jepaas**.js和resourse/**jepaas**里的**jepaas**要跟package.json里scripts里的PROJECT=**jepaas**保持一致。
  这样做是为了多项目开发准备

  > config.json 是用于个性化配置使用，可以防止config.json被错误提交，影响他人使用

  >如果想替换资源文件，请参考resourse/jepaas里的文件

  >在config/jepaas.js里提供了登录页的配置信息，可以自行修改，也可以直接修改登录源码，重新打包

  > 本项目提供了 首页(home)，登录页(login)的源码，如果想修改，可自行打包，在config/jepaas.js中配置entry入口信息：entry:['home','logo']

## 开发说明
- config说明
  >config/**jepaas**.js和resourse/**jepaas**里的**jepaas**要跟package.json里scripts里的PROJECT=**jepaas**保持一致。
  这样做是为了多项目开发准备

  > config.json 是用于个性化配置使用，可以防止config.js被错误提交，影响他人使用

  >如果想替换资源文件，请参考resourse/jepaas里的文件

  >在config/jepaas.js里提供了登录页的配置信息，可以自行修改，也可以直接修改登录源码，重新打包

  > 本项目提供了 IM(im)，登录页(login)，首页(home)的源码，如果想修改，可自行打包，在config/jepaas.js中有默认配置entry入口信息，如果新增模块，可以在config/config.json中增加配置信息：entry:['model']，
  这个entry是增量的，不会覆盖默认entry配置

- vue业务组件开发说明：
  > 平台已经全局引入：Vue，Element-ui，EChart，不需要再import

  > 模块的打包的入口文件为：index.js

  > html标签名跟模块名一致,支持驼峰

  > 每个组件都要以 **pro-vue-模块名** 作为ROOT样式，避免污染其他组件样式

  > View.js组件接收参数vueInfo，参考View.js说明

## 授权协议声明

1. 由于平台战略规划，平台开源部分代码，对于已开源的代码，授权协议采用AGPL3.0协议。
2. 您可以免费使用、修改和衍生代码，但不允许修改后和衍生的代码作为闭源软件发布。
3. 在修改和衍生的代码中需要带有原来代码的协议、版权声明和其它原作者规定需要包含的说明。
4. 如果要提供修改给官方库，请提交PR，我们会审核并测试相关PR，通过后我们会合并至主分支。
5. 您可以用于商业软件，但是需要遵循AGPL3.0协议及上述条款。

关于快捷生成项目目录结构：
mac 的安装：
1）使用Homebrew 安装tree
brew install tree
2) tree -l node_modules> tree.text

## 联系我们

- 公司：北京凯特伟业科技有限公司
- 电话：010-82809807 / 400-0999-235
- QQ群：462151894

![](docs/assets/images/jepaas-qrcode.png)