注意：本教程旨在與最新版本的使用Ionic一起使用，不保證與早期版本的兼容性。

DevExtreme v21.1最新版下載

安裝DevExtreme

安裝devextreme和devextreme-angular npm包：

npm install devextreme@21.1 devextreme-angular@21.1 --save --save-exact

注意：建議保存DevExtreme的確切版本以避免意外更新，因為DevExtreme不使用語義版本控制。在我們的版本系統中，第一個和中間的數字表示可能包含操作更改的主要版本。

導入Stylesheets

打開 src 文件夾中的 global.scss 文件，并導入預定義的stylesheet（下面代碼中的dx.light.css）。

global.scss

@import '~devextreme/dist/css/dx.light.css';

注意：基于SVG的UI組件不需要stylesheets，如果您選擇導入stylesheets，UI 組件將應用與其匹配的外觀。

導入DevExtreme模塊

跳轉到您將在其中使用的DevExtreme UI組件的 NgModule，并導入所需的DevExtreme模塊。請注意，如果在您的應用程序中配置了tree shaking，可以從devextreme-angular導入模塊，否則，您應該從特定文件中導入它們。

app.module.ts

// ...
import { DxButtonModule } from 'devextreme-angular';
// or if tree shaking is not configured
// import { DxButtonModule } from 'devextreme-angular/ui/button';

@NgModule({
imports: [
// ...
DxButtonModule
],
// ...
})
export class AppModule { }

現在可以在您的應用程序中使用 DevExtreme UI 組件：

注冊第三方依賴項

DataGrid UI 組件和 Globalize 本地化需要額外的庫。

運行應用程序

使用以下命令運行應用程序：

ionic serve

打開 //localhost:8100/ 瀏覽應用程序。

DevExtreme | 下載試用

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

DevExpress技術交流群4：715863792      歡迎一起進群討論