Change Vuexy Admin to fit your needs. To configure Vuexy Admin we will use theme.config.js file, which have all Vuexy Admin configurations listed with their options.
更改Vuexy Admin主题以适合您的需求。 要配置Vuexy Admin,我们将使用theme.config.js文件,该文件列出了所有Vuexy Admin配置及其选项。

Changing Colors 更改颜色

You can change Vuexy Admin’s main colors by changing provided color properties’ e.g. primary, success etc. value to your faviourite color. You can pass RGB and Hex values only.
您可以通过更改颜色属性来更改Vuexy Admin的主颜色。 如:primary, success 等。 您只能传入RGBHex值。

If you don’t pass any property or remove colors object, Vuexy Admin will use default colors provided by Vuesax Framework.
After removing colors object, There’s no colors object in themeConfig.js file. So, you have to remove 3 lines line from themeConfig.js file as it sets main colors for Vuexy Admin using colors object. These 3 lines are listed below:
如果您不传递任何属性或删除colors对象,那么Vuexy Admin将使用Vuesax Framework提供的默认颜色。
删除colors对象后,themeConfig.js文件中没有colors对象。 因此,您必须从themeConfig.js文件中删除3行内容,因为它使用colors对象为Vuexy Admin设置了主颜色。 下面列出了这3行:

  1. import Vue from 'vue'
  2. import Vuesax from 'vuesax'
  3. Vue.use(Vuesax, { theme: { colors } });

WARNING If you are using customizer then primary color(property) is required to be set in colors object. 如果使用自定义颜色,则必须要在colors对象中设置primary(属性)。

You can find detailed documentation on customizing colors, here.
您可以在这里找到有关自定义颜色的详细文档。

WARNING disableThemeTour options will be auto-disable in smaller devices in provided package. Tour steps includes element which are not present in DOM in smaller devices. So, it will be disabled in smaller devices. If you have elements which will be always present in DOM even in the smaller devices then disableThemeTour选项将在提供的软件包中的较小设备中自动禁用。 游览步骤包括较小设备中DOM中不存在的元素。 因此,它将在较小的设备中禁用。 如果您的元素即使在较小的设备中也始终存在于DOM中

Theme Tour

disableThemeTour options will be auto-disable in smaller devices & in horizontal layout in provided package. This is because Tour steps includes element which are not present in DOM in smaller devices and in horizontal layout. So, it will be disabled in smaller devices.
If you have elements which will be always present in DOM even in the smaller devices then you can remove below code to enable theme tour even in smaller devices.
disableThemeTour选项将在较小的设备和提供的软件包中的水平布局中自动禁用。 这是因为Tour步骤包含的元素在较小的设备和水平布局中不存在于DOM中。 因此,它将在较小的设备中禁用。
如果您的元素即使在较小的设备中也始终存在于DOM中,则可以删除以下代码以即使在较小的设备中也可以进行主题浏览。

  1. // File: Main.vue - src/layouts/main/Main.vue
  2. this.disableThemeTour = true; // Remove this line

API

Name Type Parameters Description default
disableCustomizer Boolean true, false Toggle display of theme customizer
切换主题定制器显示
false
disableThemeTour Boolean true, false Enable/Disable app tour in Vuexy Admin false
footerType String static, sticky or hidden Change how footer is displayed
改变页脚显示模式
static
hideScrollToTop Boolean true, false Toggle display of scroll to top button
切换回到顶部按钮显示or隐藏
false
mainLayoutType String horizontal/ vertical Layout Type
视图模式
vertical
navbarColor String Hex, rgb, rgba or valid HTML Color Change color of navbar using this property
改变导航栏颜色
navbarType String floating, static, sticky or hidden Change how navbar is displayed
改变导航栏显示模式
floating
routerTransition String zoom-fade, slide-fade, fade-bottom, fade, zoom-out, none This property is used to change the router animation.
改变路由切换时动画效果
zoom-fade
sidebarCollapsed Boolean true, false Create collapsed sidebar by setting this property to true.
通过将此属性设置为true,可以创建折叠的侧边栏。
false
theme String light, dark, semi-dark Set between light theme, dark theme & semi-dark theme.
主题
light
rtl Boolean true, false Enable/Disable RTL
开启/关闭 RTL
false