Vue DevExtreme 安装与背景颜色的更换

• Vue DevExtreme 安装与背景颜色的更换
  • 环境准备
  • 安装DevExtreme
  • 更换主题背景
    • metadata.base.json
    • metadata.additional.json

环境准备

安装DevExtreme

// Vue 2 应用
npx -p devextreme-cli devextreme new vue-app app-convert
//  Vue 3 应用(我这里使用的是Vue3的应用)
npx -p devextreme-cli devextreme new vue-app app-convert --version=3
cd app-name
// 可以通过npm进行启动
npm run serve
// 我这里用的Vue的应用界面
vue ui

更换主题背景

安装完成后的最后一张图片，其实已经被更改过主题了

• metadata.base.json可以修改页面背景主题
• metadata.additional.json可以修改侧边栏背景主题

metadata.base.json

将背景主题baseTheme字段修改为material.teal.light

{
  "items": [],
  "baseTheme": "material.teal.light",
  "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
  "outputColorScheme": "base",
  "base": true
}

metadata.additional.json

将侧边栏背景主题baseTheme字段修改为material.teal.dark

{
  "items": [],
  "baseTheme": "material.teal.dark",
  "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
  "outputColorScheme": "additional",
  "makeSwatch": true,
  "base": true,
  "widgets": [
    "treeview",
    "navbar"
  ]
}

npm run build-themes