DevExtreme v21.2最新版下載

配置主題

切換主題

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

metadata.base.json

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

運(yùn)行以下命令來(lái)重建主題：

npm run build-themes

創(chuàng)建自定義主題

您可以使用根據(jù)預(yù)定義的主題創(chuàng)建自定義主題。 請(qǐng)按照以下步驟操作：

1. 將 src\themes\metadata.base.json 或 src\themes\metadata.additional.json 導(dǎo)入 ThemeBuilder。
2. 自定義主題。
3. 將主題元數(shù)據(jù)導(dǎo)出到初始文件。

運(yùn)行以下命令來(lái)重建主題：

npm run build-themes

應(yīng)用顏色樣本

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

在DevExtreme Vue Template中，顏色樣本應(yīng)用于導(dǎo)航菜單并在 src\themes\metadata.additional.json 文件中進(jìn)行配置。 要將此顏色樣本應(yīng)用于元素，請(qǐng)向該元素添加 dx-swatch-additional 類：

HTML

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

將主題變量應(yīng)用于自定義元素

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

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

SCSS

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

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

驗(yàn)證

DevExtreme Vue 應(yīng)用程序包括身份驗(yàn)證 UI 和 API，配置客戶端路由，以便未經(jīng)身份驗(yàn)證的用戶只能導(dǎo)航到身份驗(yàn)證頁(yè)面，這些頁(yè)面允許用戶登錄、創(chuàng)建新帳戶或重置密碼。

重要提示：不要依賴客戶端路由來(lái)保護(hù)您的應(yīng)用程序免受未經(jīng)授權(quán)的訪問(wèn)，始終在后端驗(yàn)證用戶憑據(jù)。

與后端集成

后端請(qǐng)求的 Stub 身份驗(yàn)證函數(shù)位于 src\auth.js 文件中，更新這些函數(shù)來(lái)向您的后端發(fā)出實(shí)際請(qǐng)求。

每個(gè)函數(shù)都返回一個(gè)包含以下字段的對(duì)象：

獲取用戶信息

用戶信息存儲(chǔ)在同一個(gè) src\auth.js 模塊中，您可以使用它的 getUser() 方法來(lái)訪問(wèn)此信息：

JavaScript

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

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

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

創(chuàng)建一個(gè)空應(yīng)用程序

要生成沒(méi)有視圖和導(dǎo)航菜單的應(yīng)用程序，請(qǐng)使用 --empty 標(biāo)志：

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

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開(kāi)發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群5：742234706      歡迎一起進(jìn)群討論