框架配置及介绍

技术中心大约 7 分钟

框架配置及介绍

前端

clzy-web 前端框架中使用了View UI(iView)以及基于View UI二次封装的UI组件库Next UI，拥有sso统一认证登录版本和普通版本，内置了基础业务组件。

产品功能

使用Vue Cli 3 构建
登录/注销
顶部菜单栏和侧边菜单栏（支持动态菜单和静态菜单两种模式）
布局（经典布局，响应式支持，支持大多数浏览器场景）
- 亮色/黑夜主题支持
- 置顶顶栏（可开关）
- 下滑时隐藏顶栏（可开关）
- 可折叠侧边栏
- 多页签（可开关）
- 拖拽调整页签顺序（可开关）
- 全局面包屑（可开关）
- 更多布局可在线体验（右上角菜单项可动态预览各种配置）
鉴权
- 可支持前端鉴权和动态路由模式鉴权
多语言
含有核心功能示例（动态路由、表单展示、自定义组件展示）
支持内嵌和外部打开页面
全屏
Mock 数据
日志记录和错误捕捉
持久化存储方案
支持重载当前页面

兼容性

支持 Chrome、Safari、Firefox 等现代主流浏览器。
不支持IE

初次设置

修改网站的 favicon 图标，在 public/index.html 中，将默认的
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico"> 的 favicon 图标地址 url 替换为自己项目的 favicon 地址。

开发配置

在项目 src 下，有 setting.js, setting.env.js, styleSetting.js 三个业务配置文件，可以对项目中的一些业务或属性进行配置。后续会讲到他们具体的参数

setting.env.js主要抽象了 Vue CLI 3 vue.config.js 文件的一些配置（当然，也可以直接在 vue.config.js 中配置，但建议先配置 setting.env.js 文件，如果有额外的 CLI 3 配置，再到 vue.config.js 中配置）。

各项配置说明如下：

isMock：是否使用 Mock 的数据，默认开发环境为 true，生产环境为 false。开发人员请自行调整，否则所有接口都将通过mock.js
publicPath：部署应用包时的基本 URL，默认是 /
outputDir：生产环境构建文件的目录名，默认是 dist
assetsDir：放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
lintOnSave：开发环境每次保存时 lint 代码，会将 lint 错误输出为编译警告，可选值为 true || false || error，默认为 true
iviewLoaderOptions：iView Loader 的选项，默认配置，更多配置见 iView 文档

{
    prefix: false
}

业务配置

除了 setting.env.js 配置外， clzy-web 还有另外一个配置，即 src/setting.js 配置，基本上绝大部分的配置都在这个文件里完成。
可以更改相应的配置，从而实现不同的布局效果。

详细的配置介绍如下：

基础配置

ws： 是否启用websocket，系统中配置了统一的websocket链接，链接地址为 VUE_APP_BASEURL 对应的地址，默认为 true
routeChangeCancel： 系统中默认开启了接口节流机制，当上一个请求还未返回结果，而又重新发送了一个同样的请求，那么上一个请求将会被取消。默认为 true
titleSuffix： 网页标题的后缀，配置后，每个页面的标题都会带有后缀，比如 "业务配置 - clzy-web"，为空则不显示后缀
routerMode： 路由模式，可选值为 history 或 hash，默认为 history
routerBase： 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 routerBase 就应该设为 '/app/'。默认为 /
showProgressBar： 页面切换时，是否显示模拟的进度条，默认为 true
apiBaseURL： 统一的接口请求地址，可根据当前环境配置不同的值
modalDuration： 接口请求返回错误时，弹窗的持续时间，单位：秒，默认 3
errorModalType： 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice，默认 Message
modalDuration： 接口请求返回错误时，弹窗的持续时间，单位：秒，默认 3
cookiesExpires： Cookies 默认保存时间，单位：天，默认 1

多语言配置

i18n：
- default： 默认语言，默认为简体中文，值为 zh-CN
- auto： 是否根据用户电脑配置自动设置语言（仅第一次有效），默认 false

布局配置

layout： 布局配置，如下：
- headerStick： 顶栏是否置顶，开启后顶栏会覆盖在侧边栏之上，建议在有顶级菜单时使用。默认 false
- headerFix： 是否固定侧边栏，默认 true
- headerHide： 是否在下滑时隐藏顶栏，默认 false
- tabs： 是否开启多 Tabs 页签，默认 true
- tabsFix： 是否固定多 Tabs 多页签，开启 tabs 时有效，默认 true
- showTabsIcon： 多 Tabs 页签是否显示图标，开启 tabs 时有效，默认 false
- tabsReload： 再次点击 Tabs 当前页签时，是否重载当前页面，默认 true
- tabsOrder： 页签是否支持拖拽排序，默认 true
- headerMenu： 是否显示顶部菜单栏，一般来说，侧边的菜单栏足以满足大部分业务，如需动态切换侧边栏，可开启此选项，会将菜单中的第一层级菜单当作顶部菜单，此时侧边栏将作为二级菜单，默认 false
- menuAccordion： 侧边菜单栏是否开启手风琴模式，默认 true
- showSiderCollapse： 是否显示折叠侧边栏按钮，移动端下会自动强制开启，默认 true
- menuCollapse： 侧边菜单栏是否默认折起，默认 false
- menuSiderReload： 再次点击当前侧边菜单时，是否重载当前页面，默认 true
- menuHeaderReload： 再次点击当前顶部菜单时，是否重载当前页面，默认 true
- menuFirstLevel： 是否直接展示所有的菜单（为 false 的时候只有一个菜单的时候不展示一级菜单），默认 false
- showCollapseMenuTitle： 侧边菜单折起时，是否在子菜单前显示父级菜单名称，默认 false
- showReload： 是否显示重载按钮，默认 true
- showSearch： 是否显示搜索，默认 false
- showNotice： 是否显示通知组件，默认 true
- showFullscreen： 是否显示全屏，默认 true
- showMobileLogo： 在手机访问时，是否在顶部显示小尺寸 logo，默认 true
- showBreadcrumb： 否显示全局面包屑，开启 headerMenu 时不可用，默认 true
- showBreadcrumbIcon： 全局面包屑是否显示图标，开启 showBreadcrumb 时有效，默认 false
- showLog： 是否显示日志入口，开启与否，不影响日志记录，如不希望用户看到可关闭，默认 true
- showI18n： 是否显示多语言，默认 true
- enableSetting： 是否支持动态修改布局配置，移动端下会自动强制关闭，默认 true
- logoutConfirm： 退出登录时，是否二次确认，默认 true

多页 Tabs

page： 配置如下：

opened： 默认打开的页签，默认 []，该配置只会在首次生效，之后会被用户的打开/关闭页签数据覆盖，示例：

page: {
    // 默认打开的页签
    opened: [{
        fullPath: '/dashboard/console',
        name: 'dashboard-console',
        meta: {
            title: '主控台',
            closable: false
        }
    },
    {
        fullPath: '/dashboard/monitor',
        name: 'dashboard-monitor',
        meta: {
            title: '监控页'
        }
    }]
}

功能配置

sameRouteForceUpdate： 相同路由，不同参数间进行切换，是否强力更新，默认为 false。
说明：由于 vue-router 限制，相同路由，不同参数，进行切换时，组件并不是重新加载，而是共享，这会导致切换时，数据状态并没有重置。开启该选项后，在两个相同路由，不同参数间切换时，页面会重载。
说明：使用该功能，该页面在路由配置时，必须设置 name 字段。
dynamicSiderMenu： 是否使用动态侧边菜单，默认为 true。
说明：框架默认是在 main.js 中获取本地侧边菜单的，开启该选项，则认为是从服务端动态获取侧边菜单，系统将不再主动获取本地菜单，而相关菜单获取逻辑，详见文档路由与菜单章节。

框架配置及介绍

# 框架配置及介绍

# 前端

# 产品功能

# 兼容性

# 初次设置

# 开发配置

# 业务配置

# 基础配置

# 多语言配置

# 布局配置

# 多页 Tabs

# 功能配置

框架配置及介绍

前端

产品功能

兼容性

初次设置

开发配置

业务配置

基础配置

多语言配置

布局配置

多页 Tabs

功能配置