用Devextreme构建网络应用

作为一个网络开发者，从头开始构建网络应用程序可能是痛苦和耗时的。作为Web开发者，我们希望建立快速和响应的Web应用程序。我们总是在每个项目中实现相同的UI组件（例如：认证、页眉、用户菜单、页脚、导航等），所以为什么要反复开始。

Devextreme是DevExpress组件之一。它包括一系列高性能和响应性的UI部件，可用于构建移动和网络应用。

DevExtreme主要与JavaScript框架一起工作。Angular, React, jQuery, 和Vue。它也可以用于ASP.NET MVC、Knockout和ASP.NET Core等技术。因为它有现成的响应式UI组件，所以使用起来很快速和方便。

这些组件包括互动图表、数据编辑器、下拉框等等。DevExtreme也可以被添加到现有的应用程序中。

前提条件

要跟上这篇文章，需要有以下的基本知识。

JavaScript框架（React，Angular，Vue，或jQuery）。
应用程序模板化。
Visual Studio Code/Visual Studio（推荐）。

什么时候使用Devextreme

当建立一个CRM系统或强大的应用程序时，建议使用DevExtreme。否则，在构建简单的网站或应用程序时，由于捆绑的模板尺寸过大，它不是一个好的选择。

DevExtreme的UI组件

DevExtreme有几个现成的、交互式的UI组件，可以让你轻松建立你的下一个应用程序。这些组件包括数据表、图表、数据报告工具、自动完成、文件管理器、文件上传器按钮、方框、手风琴等。

有了所有这些现成的组件，使用DevExtreme构建应用程序是非常简单、快速和有趣的。

我建议你尝试将DevExtreme与你最喜欢的Javascript框架一起使用，这样你就可以利用这些很棒的反应式组件了。

下载DexExpress

为了使用Devextreme，你必须下载DevExpress，因为它是Devexpress的一个组件。

DevExpress不是免费的，但是为了开始使用，你可以使用免费试用版。

对DevExtreme的要求

Node.js v12.6.0或更高版本
npm v6.2.0或更高版本

DevExtreme CLI的安装

在你的终端上运行命令。

运行npm i -g devextreme-cli （注意：这个命令会在全球范围内安装 CLI。或者与npx一起执行此命令，以调用CLI命令而不进行全局安装）。

创建一个DevExtreme应用程序

根据我们使用的JavaScript框架（React.js、Angular或Vue.js），我们创建Devextreme应用程序的方式是非常不同的。

为了完全理解这一课，你必须熟悉你要使用的框架的基本概念和模式。对于初学者，我建议你先使用免费试用版，这样你就能熟悉DevExteme和它的组件了。

对于React应用程序

npx -p devextreme-cli devextreme new react-app application-name
cd application-name
npm run start

对于Angular应用程序

npx -p devextreme-cli devextreme new angular-app application-name
cd application-name
npm run start

适用于Vue应用程序

npx -p devextreme-cli devextreme new vue-app application-name
cd application-name
npm run start

建立一个Angular DevExtreme应用程序

为了演示，我将使用我最喜欢的JS框架Angular创建一个DevExtreme应用程序。

要创建我的Angular应用程序，首先我必须运行。

npx -p devextreme-cli devextreme new angular-app my-extreme-app

安装完成后，我必须cd到项目中。

cd my-extreme-app

来启动我的应用程序。

npm run start

要查看你的DevExtreme模板，DevExtreme运行的默认端口是4200，对应的网址是：http://localhost:4200。运行应用程序后，在你喜欢的浏览器上访问该网址。在启动应用程序之前，一定要记得查看`ReadMe` 文件，以防有任何变化或更新。

DevExtreme应用程序模板带有抽屉、数据网格和表单组件。

默认的模板视图

default-template-view

DevExtreme ThemeBuilder

操纵DevExtreme真的很容易。使用ThemeBuilder，你可以在DevExtreme默认主题的基础上定制主题。使用ThemeBuilder的链接可以在这里找到。

要配置模板主题，请打开src\themes\metadata.additional.json 和src\themes\metadata.base.json 。在模板中，编辑 JSON 文件中的主题名称。默认情况下，主题是橙色的，你可以在上面的图片中看到。在改变主题颜色后，运行npm run build-themes 或yarn build-themes ，改变就会生效。我在这两个JSON文件中把我的改为蓝色。

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

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

}

下面是上述改变的结果。

blue-theme

总结

DevExtreme是DevExpress的组件之一，它与Javascript框架（React、Angular、Vue和jQuery）一起工作，以构建快速响应的网络或移动应用程序。它有很多现成的UI组件和其他很棒的功能。DevExtreme很容易使用，而且有很好的文档。

如何用Devextreme构建网络应用程序