開發框架DevExtreme入門級教程 - 如何使用Webpack

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

DevExtreme v21.1最新版下載

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

安裝DevExtreme

安裝DevExtreme和devextreme-angular npm包：

npm install [email protected] [email protected] --save --save-exact

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

配置Webpack加載器

打開webpack.config.js文件並配置加載器來處理CSS和字體：

webpack.config.js

...
rules: [
...
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: "url-loader?name=[name].[ext]"
}
]
...

此外，打開package.json文件並確保在devDependencies中列出了style-loader、css-loader 和 url-loader。

導入Stylesheets

打開main .ts文件並導入預定義的stylesheet（下面代碼中的 dx.light.css）。

TypeScript

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

注意：SVG-based UI組件不需要主題樣式表，如果您選擇導入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 組件：

app.component.html

<dx-button
text="Click me"
(onClick)="helloWorld()">
</dx-button>

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
helloWorld() {
alert('Hello world!');
}
}

運行應用程序

使用以下命令構建應用程序：

webpack

...並在瀏覽器中打開引用包的HTML文件（通常是 index.html）。

DevExtreme | 下載試用

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

更多DevExpress線上公開課、中文教程資訊請上中文網獲取