4. 公共布局

主题配置

项目默认开启了主题配置功能如果您不需要，可以去 config/settings.js 进行如下配置

themeBar: false, //是否开启主题配置按钮

项目默认开启了纵向布局功能如果您需要配置横向布局，可以去 config/settings.js 进行如下配置

layout: "horizontal", //横纵布局 horizontal vertical

多标签页配置

项目默认开启了多标签页功能如果您不需要，可以去 config/settings.js 进行如下配置

tagsBar: false, //是否显示多标签页

如何将公共布局 zx-layouts 本地化（新版本废弃）

• 第 1 步：安装依赖后打开选择 node_modules 文件夹，搜索 zx-layouts，搜索完成后将此文件夹拷贝到src/layouts/components文件夹下
• 第 2 步：修改src/layouts/components/index.js中的内容，把每一个zx-layouts前面加上./，示例代码如下：

export { default as Logo } from "./zx-layouts/Logo";
export { default as Avatar } from "./zx-layouts/Avatar";
export { default as Ad } from "./Ad";
export { default as AppMain } from "./zx-layouts/AppMain";
export { default as TagsBar } from "./zx-layouts/TagsBar";
export { default as SideBar } from "./zx-layouts/SideBar";
export { default as Breadcrumb } from "./zx-layouts/Breadcrumb";
export { default as FullScreenBar } from "./zx-layouts/FullScreenBar";
export { default as ErrorLog } from "./zx-layouts/ErrorLog";
export { default as ThemeBar } from "./zx-layouts/ThemeBar";
export { default as TopBar } from "./zx-layouts/TopBar";
export { default as NavBar } from "./zx-layouts/NavBar";

针对使用新版的开源版 vip 用户

• 第 1 步：直接修改src/layouts/export.js下的代码如下即可，zx-layouts变更为./zx-layouts
• 第 2 步：直接将 node_modules 中的zx-layouts拷贝到与src/layouts/export.js同级目录即可

/**
 * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
 * @description 公共布局自动导出
 */

import Vue from "vue";

const requireComponents = require.context("./components", true, /\.vue$/);
requireComponents.keys().forEach((fileName) => {
  const componentConfig = requireComponents(fileName);
  const componentName = componentConfig.default.name;
  Vue.component(componentName, componentConfig.default || componentConfig);
});

const requireZxLayouts = require.context("./zx-layouts", true, /\.vue$/);
requireZxLayouts.keys().forEach((fileName) => {
  const componentConfig = requireZxLayouts(fileName);
  const componentName = componentConfig.default.name;
  Vue.component(componentName, componentConfig.default || componentConfig);
})``;