智加文档 | 智加文档

框架目录说明

|-- framework
|    |-- build-release // 打包发布库
|    |    |-- tmp
|    |    |    |-- package.json // 发布测试包的版本
|    |    |-- config.ts // 打包发布的git配置文件
|    |    |-- package.json // 依赖库管理
|    |    |-- release.ts // 打包发布的入口文件
|    |    |-- terminalOutInput.ts // 输出控制台配置文件
|    |    |-- tsconfig.json // ts配置文件
|    |-- iconfonts // 字体库
|    |    ｜-- index.ts // 入口文件
|    |    ｜-- package.json // 依赖库管理
|    |-- menu-util // 菜单导出库【用于把项目中注册的路由导出JSON，提供给后端】
|    |    ｜-- index.ts // 入口文件
|    |    ｜-- menus.json // 导出的菜单JSON文件，用于提供给后端
|    |    ｜-- package.json // 依赖库管理
|    |    ｜-- tsconfig.json // ts配置文件
|    |-- public // 全局静态资源
|    |    ｜-- style // 全局样式
|    |    ｜    ｜-- loading.css // 页面加载进度条样式
|    |    ｜-- favicon.ico // 页面图标
|    |-- src // 项目入口
|    |    ｜-- api // 接口注册管理
|    |    ｜    ｜-- index.ts // 入口文件
|    |    ｜    ｜-- typing.ts // 接口注册数据通用类型
|    |    ｜-- assets // 项目静态资源
|    |    ｜    ｜-- images // 图片资源
|    |    ｜    ｜-- less // 全局样式
|    |    ｜    ｜    ｜-- index.less // 样式引入及通用样式
|    |    ｜    ｜    ｜-- overrides.less // 定义root样式变量
|    |    ｜    ｜    ｜-- transition.less // 页面切换动画库
|    |    ｜-- components // 全局组件管理
|    |    ｜    |-- common // 框架层通用组件
|    |    ｜    |-- layout // 框架层布局组件
|    |    ｜    |    ｜-- actions // 顶部导航右边操作按钮
|    |    ｜    |    ｜-- avatar // 顶部导航右边用户信息
|    |    ｜    |    ｜-- breadcrumb // 顶部导航面包屑
|    |    ｜    |    ｜-- footer // 主页面底部信息
|    |    ｜    |    ｜-- humburger // 顶部导航左边边操作按钮【控制左侧菜单收缩】
|    |    ｜    |    ｜-- logo // 顶部导航左边logo及平台信息
|    |    ｜    |    ｜-- navbar // 顶部导航栏
|    |    ｜    |    ｜-- side-bar // 左侧菜单导航栏
|    |    ｜    |    ｜-- svg-icon // 通用svg、iconfont显示组件
|    |    ｜    |    ｜-- tabbar // 标签页导航
|    |    ｜-- config // 项目配置中心
|    |    ｜    |-- typings // 类型定义
|    |    ｜    |-- base.ts // 项目基础配置
|    |    ｜    |-- config.ts // 项目交互配置
|    |    ｜    |-- config-hooks.ts // 项目路由、接口请求等配置文件
|    |    ｜    |-- setting.ts // 项目主题配置
|    |    ｜-- icons // 字体库
|    |    ｜    ｜-- iconfont // 阿里字体静态资源
|    |    ｜    ｜-- menus // 左侧菜单图标管理
|    |    ｜    ｜-- svgs // 阿里字体svg格式资源【会生成两套资源，默认fill属性及去掉原生fill属性】
|    |    ｜-- router // 路由管理
|    |    ｜-- store // 状态管理器
|    |    ｜    ｜-- modules
|    |    ｜    ｜    |-- app-config.ts // 项目全局主题、交互状态
|    |    ｜    ｜    |-- main.ts // 项目全局数据【用户信息等】
|    |    ｜    ｜    |-- side-routes.ts // 左侧菜单数据管理
|    |    ｜    ｜    |-- tabbar.ts // 标签页菜单数据管理
|    |    ｜    ｜-- index.ts // 入口文件
|    |    ｜-- typings // 全局ts类型定义
|    |    ｜-- utils // 工具库
|    |    ｜-- views // 页面管理
|    |    ｜-- app.vue // 入口组件
|    |    ｜-- global.ts // 全局方法配置
|    |    ｜-- main.ts // 入口文件
|    |-- .env.development // 开发环境变量配置   
|    |-- .env.production // 生产环境变量配置   
|    |-- .env.test // 测试环境变量配置【非部署的测试环境】   
|    |-- .eslint.js // eslint的配置文件   
|    |-- .gitignore // git忽略配置文件   
|    |-- .prettierignore // prettier忽略配置文件   
|    |-- .prettierrc.json // prettier配置文件   
|    |-- auto-imports.d.ts // 自动引入vue相关依赖的类型声明文件   
|    |-- commitlint.config.js // git commit 配置文件   
|    |-- components.d.ts // 全局组件的类型声明文件      
|    |-- index.html // 页面入口      
|    |-- package.json // 依赖库管理      
|    |-- README.md // 项目说明文件      
|    |-- tsconfig.json // ts配置文件      
|    |-- vite.config.ts // vite配置文件

Javascript

采用带 setup 的方式开发
script 标签需要加上 lang="ts" 属性
定义数据时尽量加上类型限定
一个模块的代码尽量写在一起方便后期维护不要出现该模块的数据定义在上面动态修改该数据的方法在下面
import 相关代码全部写在最顶层

typescript

import {ref} from "@vue/reactivity";

const userInfo = ref<{
    name: string,
    age?: number
}>({
    name: 'test'
})

const setUserInfo = () => {
    userInfo.value.age = 20
}

API 接口注册

接口注册入口在项目的/src/api/ 下面的index.ts
每个模块的注册入口文件为 index.ts
异步调用

typescript

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

// 文件：/src/api/index.ts
import conference from './conference'
export const api = {
    v1: {
        api: {
            conference
        }
    }
}

// 文件：/src/api/conference/index.ts
import file from './file'
export default {
    file,
    create(data: object) {
        return request({
            url: '/v1/api/conference/create/',
            method: 'post',
            data
        })
    }
}

// 文件：/src/api/conference/file.ts
export default {
    list(data: object) {
        return request({
            url: '/v1/api/conference/file/list/',
            method: 'get',
            data
        })
    }
}

// 使用（异步调用）
let fn = async() => {
    await window.api.v1.api.conference.create({})
    await window.api.v1.api.conference.file.list({})
}

API接口注册【vitejs-plugin-api-auto-import】

使用 vitejs-plugin-api-auto-import 该组件库，可自动按照文件层级引入生成 API 之间的层级关系，具体的使用参考脚手架的 src/api/apis/test/index.ts 文件
src/api/apis/index.ts 这个自动引入文件会自动生成且实时更新，只需要把具体的业务接口放在 apis 该文件夹下即可，按照接口的层级逐层进行注册
该组件不仅仅可以用在接口注册，也适于其他需要自动导出的功能需求上，具体的功能实现，可查看该插件的源码
使用如下

window.$apis.test.index.xxx() // 严格按照 src/api/apis 该文件夹下的文件层级及名称进行调用

message

全局注册了 naive-ui 的 message 事件，具体使用如下

window.$message.error('this is test message');
window.$message.warning('this is test message');

路由注册

路由注册是在 /src/router/modules 下面
注册路由前需要把脚手架中测试路由、测试页面等均需删除再注册
路由文件的名称需要跟 views 中的业务模块的名称保持一致
页面的路由需按照 views 中的目录进行层级注册
如果需要创建某个页面的子页面，则需要在该路由的 children 字段下去进行路由注册，并且设置该路由的 meta.hidden = true
路由的 name 字段需要采用大驼峰写法
每个路由文件只能注册某个顶级模块的路由，多个顶级模块路由需要创建多个路由文件，即每个路由文件的 routes.length = 1
在路由文件的名称前面加上数字及半角符号（-）可对路由模块进行排序

text

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

{
    path: 'system-management',
    name: 'SystemManagement',
    meta: {
        title: '系统管理',
    },
    component: RouterView,
    children: [
        {
            path: 'system-setting',
            name: 'SystemSetting',
            meta: {
                title: '系统设置',
            },
            component: RouterView,
            children: [
                {
                    path: 'menu-management',
                    name: 'MenuManagement',
                    meta: {
                        title: '菜单管理',
                    },
                    component: () => import('@/views/system-management/system-setting/menu-management.vue'),
                    children: [
                        {
                            path: 'menu-management-child',
                            name: 'MenuManagementChild',
                            meta: {
                                title: '菜单管理-子页面',
                                hidden: true
                            },
                            component: () => import('@/views/system-management/system-setting/menu-management-child.vue'),
                        }
                    ]
                }
            ]
        }
    ]
}

字体图标

统一使用阿里字体图标库，需要加入到公司的统一项目库中 没有账号的需要去创建账号，找上级领导去加入项目中
通用脚手架中会不定时去下载阿里字体的所有图标，在开发过程中，如遇到缺少图标的需要及时跟负责该项目的UI沟通，进行添加，项目也需要及时更新下字体库
更新字体库操作如下：
- 在 /iconfonts 目录中，安装依赖
- 在该目录下运行 npm run clone:iconfonts 即可
- 运行完成之后会在 /src/icons 目录中更新最新的字体图标
使用字体图标
- 默认使用阿里字体图标，如果有特殊情况，则可以使用脚手架自带的 @vicons/ionicons5 图标
- 菜单中定义 icon 方法如下：
  - 方式：icon: 'menus-menu'
  - 规则：menus: /src/icons/menus 最后一级目录名称
  - 规则：menu: /src/icons/menus/menu.svg svg 的名称
  - 因为左侧菜单的图标不会放在阿里字体上进行维护，所以每个项目的菜单图标不一样，如果需要，则需UI在项目的蓝湖中再额外去添加 icon 资源，然后手动下载 svg 资源到 /src/icons/menus 该目录下
- 页面中使用方法如下：

vue

<!-- 
    通过 iconfont 方式使用 
    该方式会把图标颜色进行固定，多彩图标也会变成单色
    name规则：icon-fenxiang：阿里字体上的 font class 名称
 -->
<SvgIcon prefix="iconfont" name="icon-fenxiang" :size="50" />

<!-- 
    通过 svg 方式使用 
    该方式会把图标颜色变成单色
    可以随着主题色而动态变化
    name规则：svgs: /src/icons/svgs 最后一级目录名称
             gaoliang：阿里字体上的 class 名称： icon-gaoliang 去掉 icon-
 -->
<SvgIcon name="svgs-gaoliang" :size="40" />

<!-- 
    通过 svg 方式使用 使用 fill 后缀
    使用默认的图标颜色，黑色 path 部分会随着主题色变化
    name规则：svgs: /src/icons/svgs 最后一级目录名称
             gaoliang：阿里字体上的 class 名称： icon-gaoliang 去掉 icon- 并在后面加上 -fill 后缀
 -->
<SvgIcon name="svgs-gaoliang-fill" :size="40" />

如果需要做菜单权限，则需要向后端提供整个项目的菜单数据
使用方式如下：
- 进入到 menu-util 目录中，安装依赖
- 在该目录下运行 npm run build 命令
- 运行完成之后会跟新该目录下的 menus-json 文件，把该文件发给后端即可

build-release

项目的打包发布模块，具体的使用规则查看代码仓库-项目部署(WEB)

文件下载

// 接口注册
export default {
  exportExcel() {
    return request({
      url: `/api/xxx/test`,
      method: 'get',
      responseType: 'blob' // 配置返回的数据为文件流格式
    });
  }
}

// 具体使用
const res = await window.$apis.exportExcel();
window.common.download(res, 'xxx.xls')

// 接口注册
export default {
  exportExcel() {
    return request({
      url: `/api/xxx/test`,
      method: 'get',
      responseType: 'blob', // 配置返回的数据为文件流格式
      raw: true // 返回整个请求响应及配置信息
    });
  }
}

// 具体使用
const res = await window.$apis.exportExcel();
window.common.download(res.data, 'xxx.xls')

组件说明

UI组件库：
- VUE2项目：wisdom-plus、element-ui/plus
- VUE3项目：wisdom-naive
- H5项目：vant ui
图表实现：
- vue-echarts
3D图表实现：
- highcharts
工具库：
- vueuse
- loadsh
- wp-utils

框架目录说明 #

Javascript #

API 接口注册 #

API接口注册【vitejs-plugin-api-auto-import】 #

message #

路由注册 #

字体图标 #

menu-util #

build-release #

文件下载 #

组件说明 #

框架目录说明

Javascript

API 接口注册

API接口注册【vitejs-plugin-api-auto-import】

message

路由注册

字体图标

menu-util

build-release

文件下载

组件说明