DevExtreme v21.2最新版下載

配置主題

切換主題

DevExtreme Vue Template為視圖內容使用一個主主題，為導航菜單使用一個附加主題（顏色樣本）。 要切換到另一個主題，請打開 src\themes\metadata.base.json 或 src\themes\metadata.additional.json 文件并將主題名稱分配給 baseTheme 字段：

metadata.base.json

{
// ...
"baseTheme": "material.blue.light",
// ...
}

運行以下命令來重建主題：

npm run build-themes

創建自定義主題

您可以使用根據預定義的主題創建自定義主題。 請按照以下步驟操作：

1. 將 src\themes\metadata.base.json 或 src\themes\metadata.additional.json 導入 ThemeBuilder。
2. 自定義主題。
3. 將主題元數據導出到初始文件。

運行以下命令來重建主題：

npm run build-themes

應用顏色樣本

顏色樣本是與主配色方案一起使用的輔助配色方案。

在DevExtreme Vue Template中，顏色樣本應用于導航菜單并在 src\themes\metadata.additional.json 文件中進行配置。 要將此顏色樣本應用于元素，請向該元素添加 dx-swatch-additional 類：

HTML

<div class="dx-swatch-additional">
<!-- Your content here -->
</div>

將主題變量應用于自定義元素

主題變量在 src\themes\generated\variables.base.scss 和 src\themes\generated\variables.additional.scss 文件中定義，將它們應用于自定義元素，使元素與應用程序的其余部分具有統一的外觀。

以下代碼應用 $base-accent 變量作為 my-element 的背景顏色：

SCSS

// Your SCSS file
@import "../../../themes/generated/variables.base.scss";

#my-element {
background-color: $base-accent;
}

驗證

DevExtreme Vue 應用程序包括身份驗證 UI 和 API，配置客戶端路由，以便未經身份驗證的用戶只能導航到身份驗證頁面，這些頁面允許用戶登錄、創建新帳戶或重置密碼。

重要提示：不要依賴客戶端路由來保護您的應用程序免受未經授權的訪問，始終在后端驗證用戶憑據。

與后端集成

 后端請求的 Stub 身份驗證函數位于 src\auth.js 文件中，更新這些函數來向您的后端發出實際請求。

每個函數都返回一個包含以下字段的對象：

獲取用戶信息

用戶信息存儲在同一個 src\auth.js 模塊中，您可以使用它的 getUser() 方法來訪問此信息：

JavaScript

<template>
<!-- ... -->
</template>

<script>
import auth from '../auth';

export default {
created() {
auth.getUser().then((e) => {
if (e.data) {
// User is authenticated
...
}
});
},
// ...
}
</script>

創建一個空應用程序

要生成沒有視圖和導航菜單的應用程序，請使用 --empty 標志：

npx devextreme-cli new vue-app app-name --empty

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExpress技術交流群5：742234706      歡迎一起進群討論