Fox3.0前端框架-工程目录结构

目录结构

fox
├── README.md  #工程说明
├── babel.config.js #语法检查
├── config # 配置
│ ├── dev.config.js #开发配置
│ └── prod.config.js #生产配置
├── dist #编译结果目录
├── mock #mock挡板数据
│ ├── index.js
│ └── service
├── scripts #编译脚本
│ ├── webpack.base.js
│ ├── webpack.debug.js #调试脚本
│ ├── webpack.dev.js #开发版本编译脚本
│ ├── webpack.module-main.js #主工程编译脚本
│ ├── webpack.module-micro.js #子工程编译脚本
│ └── webpack.prod.js #生产版本编译脚本
├── src #源代码目录
│ ├── App.vue #入门vue组件
│ ├── api #公共通信API
│ ├── assets #编译资源
│ ├── components #公共组件
│ ├── i18n #国际化
│ ├── index.html #index html
│ ├── main.js # 主入口
│ ├── native #native接口
│ ├── page #页面目录
│ ├── router #路由
│ └── utils #公共方法与工具类
├── static #静态资源
├── tests #测试目录
├── tsconfig.json #ts配置
└── package.json #工程依赖配置信息

config目录

config目录下为放置开发和生产环境的配置

• dev.config.js 开发环境配置
• prod.config.js 生产环境配置

配置说明

// 设置配置
const config = {
    // APP名称
    app: 'fox_base',
    // 请求URL
    url: '127.0.0.1:9705',
    // 是否启用SSL
    ssl: false,
    // debug请求URL
    // debug_url:"192.144.128.218:9292",
    // 是否启用debug SSL
    // debug_ssl:false,
    // web socket 通信方式
    webSocketType: 'get',
    // 录制模式
    recorderModel: false,
    // 录制范围
    recorderScope: ['fox.service', 'fox.device', 'fox.file', 'fox.native', 'fox.splash'],
    // 调试模式
    debugModel: !(os.android || os.ios),
    // debugModel:true,
    // 调试范围
    debugScope: ['fox.service', 'fox.device', 'fox.file', 'fox.native', 'fox.splash', 'fox.screen', 'fox.trace'],
}

// 导出配置
module.exports = config

mock

mock (opens new window)挡板，能生成随机数据，拦截 Ajax 请求。 通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则。 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.

基本语法 Mock.mock('地址',{ "dataname|rule":{"对应的值"} })

说明：地址就是我们通过ajax获取数据时候填写的地址，这里填写的地址可以是任意不存在的地址，第二个参数是我们要模拟的数据，以及相应的规则。

scripts

编译脚本集合，使用webpack对工程资源进行编译打包

• webpack.debug.js 打开本地web服务进行调试
• webpack.dev.js 打包开发版本，带源代码映射，方便跟踪错误，当时编译包会非常大
• webpack.prod.js 打包生产版本，进行代码压缩

src/api

公共通信API，原则上如果某个服务请求会给不同的页面重复使用，则可以考虑把该服务封装在api目录下

导出API说明

api下定义的公共api，导出方法：

在api/index.js注册到fox.api空间名下

let foxAPI = {

    /**
     * 安装
     */
    install(fox, foxUI) {
        if (typeof fox.api !== 'object') {
            fox.api = {}
        }

        // 安装api
        Object.assign(fox.api, {
            // 获取select items
            getSelectItems: getSelectItems,
            // 获取table数据
            getTablePageData: getTablePageData,
            // 获取cascader items
            getCascaderItems: getCascaderItems,
            // ui setting
            uiSetting: uiSetting,
            // 获取微应用列表
            getMicroApps,
            // 获取token
            getToken,
        })

        // 安装api plugin
        keyboard.install(fox.api, foxUI)
        RequestRule.install(fox.api)
    },
}

使用

let token = await fox.api.getToken()

src/api/model目录下的是table、select等UI组件获取后端数据源适配接口，目的是适配不同的后端数据源接口，我们在对接不同的后端时候，需要进行适配。

src/components

公共组件封装目录，需要在src/components/index.js中进行注册。

业务组件的命名规范为

业务组件以fox-x为前缀，例如： fox-x-table fox-x-search

src/main.js

入口文件，引用UI组件库，初始化router、service配置，plugin等

src/assets/themes

主题目录，themes下的每个文件夹为一个主题，主题的样式需要在main.js中导入

// 尊贵版
import './assets/themes/noble-gold/index.css'
import './assets/themes/noble-gold/custom.css'
// 科技版
import './assets/themes/technology-blue/index.css'
import './assets/themes/technology-blue/custom.css'
// 时尚版
import './assets/themes/fashion-purple/index.css'
import './assets/themes/fashion-purple/custom.css'

src/native

访问原生接口定义目录，如拍照、外设服务等。在src/native/idnex.js导出接口

src/page

页面代码目录，有如下规范为： page下的第一层为模块或者业务组，一个模块对应一个route文件，业务组是模块的集合

模块和路由关系

page/example模块 route/route-example.js为模块exmaple对应的路由 exmaple下的vue页面都必须注册到route-example里面

业务组

比如业务组account对应的目录,下面有teller和business两个模块 page/account/teller page/accrout/business

那么路由对应的目录结构为 route/account/route-teller.js route/account/route-business.js

页面

模块目录下面就是页面，如: page/example/text

text目录是页面内容的目录，入口文件必须为index.vue 如page/example/text/index.vue。 如果页面有私有的组件，那么必须放在页面目录下的components目录下，如 page/example/text/components 私有组件目录

src/utils/commons

公共方法与工具类目录

commons
├── auth-config.js #权限控制
├── controller #流程控制
├── micro-app.js #微前端控制
├── route-config.js #路由配置
├── route-table.js #路由配置表
├── service-filter.js #服务请求过滤器
├── service.ts #服务配置
└── validator.js #校验器配置

src/utils/custom

自定义公共方法目录，定义的方法需要在custom/index.js上注册导出

static

静态资源目录，该目录下的资源不参与编译

模块划分

模块以工程/src/page下面的第一层目录为模块或业务组，如

模块

模块页面 page/模块名/页面A/index.vue page/模块名/页面B/index.vue page/模块名/页面C/index.vue 模块路由 router/route-模块名.js

模块是一个编译单元，单独编译成一个js文件，按需加载

├── page
│ ├── common  #common模块
│ │ ├── frame
│ │ │ ├── components
│ │ │ │ ├── Content.vue
│ │ │ │ ├── Footer.vue
│ │ │ │ ├── Header.vue
│ │ │ │ ├── Sidebar.vue
│ │ │ │ └── Tags.vue
│ │ │ └── index.vue
│ │ └── login
│ │     └── index.vue
│ ├── example #example模块
│ │ ├── date-item
│ │ │ └── index.vue
│ │ ├── group
│ │ │ └── index.vue
│ │ ├── money-item
│ │ │ └── index.vue
│ │ ├── select-item
│ │ │ └── index.vue
│ │ ├── table-item
│ │ │ └── index.vue
│ │ ├── text-item
│ │ │ └── index.vue
│ │ └── time-item
│ │     └── index.vue
│ └── template #template模块
│     ├── data-import
│     ├── excel-import
│     │ └── index.vue
│     └── result-show
├── router
│ ├── route-common.js   #common对于的路由
│ ├── route-example.js  #example对于的路由
│ └── route-template.js #template对于的路由

一个路由就是一个编译单位，生成一个JS

业务组+模块

业务组+模块页面

page/业务组/模块名/页面A/index.vue page/业务组/模块名/页面B/index.vue page/业务组/模块名/页面C/index.vue 模块路由 router/业务组/route-模块名.js