智加文档 | 智加文档

Javascript

name 字段最好是加上，组件的唯一标识
在定义 data 数据时，最好按照如下顺序：常量字段 - 查询条件数据字段 - 页面数据字段 - 其他数据
定义页面初始化方法时一定是以 init 方法名来进行定义
在定义 methods 方法时，最好按照如下顺序： 初始化init - 查询 - 获取列表 - 列表的增删改查 - 其他业务逻辑

javascript

export default({
    name: 'demo',
    data() {
        return {
            a: '',
            params: {
                name: ''
            },
            tableList: [],
            elseData: {}
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {},
        search() {},
        add() {},
        edit() {},
        view() {},
        delete() {},
        elseFn() {}
    }
})

API 接口注册

vue2.x底层不支持TS编译，需要进行手动编译：webstorm可运行TS编译操作以及设置TS文件修改自动编译功能；vs code可以运行tsc命令

接口注册的入口在项目的/src/api/下面的index.ts
根据接口的层级逐层注册，模块放在/src/api/modules目录下面
所有的接口类型推断全部写在/src/api/Interface.ts文件里面
每个模块的注册入口文件为 Interface.ts
异步调用

typescript

const api1 = '/v1/api/conference/create/'
const api2 = '/v1/api/conference/file/list/'

// 文件：/src/api/Interface.ts
import { AxiosPromise } from "axios"
interface Interface {
    v1: v1;
}
export interface v1 {
    api: v1_api;
}
export interface v1_api {
    conference: v1_api_conference;
}
export interface v1_api_conference {
    file: v1_api_conference_file;
    create?(data: object): AxiosPromise;
}
export interface v1_api_conference_file {
    list?(data: object): AxiosPromise;
}

// 文件：/src/api/index.ts
import Interface from "./Interface"
import conference from "./modules/conference/Interface"
export default <Interface>{
    v1: {
        api: {
            conference
        }   
    }   
}

// 文件：/src/api/modules/conference/Interface.ts
import v1_api_conference from "../../Interface"
import file from "./file";
export default <v1_api_conference>{
    file,
    create(data: object){
        return window.common.Axios({
            url:`/v1/api/conference/create/`,
            method:"post",
            data
        })
    }
}
// 文件：/src/api/modules/conference/file.ts
import v1_api_conference_file from "../../Interface"
export default <v1_api_conference_file>{
    list(data: object){
        return window.common.Axios({
            url:`/v1/api/conference/file/list/`,
            method:"get",
            data
        })
    }
}

// 使用（异步调用）
this.api.v1.api.conference.create({}).then(() => {}).catch(() => {})
this.api.v1.api.conference.file.list({}).then(() => {}).catch(() => {})

路由注册

vue2.x 的PC端的项目，路由注册是在 rd-router 库里面进行维护，根据分支进行项目区分
vue2.x 的H5端的项目，路由注册是在 /src/router/[modules-name]/routers.js 里面进行维护
路由文件的名称需要跟 components/views 中的业务模块的名称保持一致
页面的路由需按照 components/views 中的目录进行层级注册

text

eg: 系统管理/系统设置/菜单管理
views: /src/components/views/system-management/system-setting/menu-management.vue
rd-router: /system-management/routes.ts

{
    path: 'system-management',
    name: '系统管理',
    component: layout,
    children: [
        {
            path: 'system-setting',
            name: '系统设置',
            component: CommonIndex,
            children: [
                {
                    path: 'menu-management',
                    name: '菜单管理',
                    component: () => import('@/components/views/system-management/system-setting/menu-management.vue'),
                }
            ]
        }
    ]
}

组件说明

项目中使用到的组件均在 rd-ui 库里面（布局组件、图表组件、地图组件、穿梭框组件等），该库暂时没有相应的使用文档，需自行在 node_modules 查看 rd-ui 库的源码
PC端使用的UI框架为 element-ui , H5端使用的UI框架为 vant

Javascript #

API 接口注册 #

路由注册 #

组件说明 #

Javascript

API 接口注册

路由注册

组件说明