[Ionic]在Ionic3项目中添加Devextreme库

Deveextreme的UI库在做复杂图表方面比较强大，配合Ionic来做企业数据分析，后台管理等应用得心应手。加上官方支持非常及时，提问一般在1-2小时就得到回复，大家可以了解一下。Devextreme详细功能我在这里就不详细介绍了，如果不了解的同学可以直接前往官网查看Demo. 

官网机票✈️：https://js.devexpress.com/ 

首先当然少不了Ionic项目，这里先创建一个空白项目

$ ionic start PorjectName blank

项目创建好以后，安装依赖包

$ npm install --save devextreme devextreme-angular

接着需要关联样式，可以通过下面两种方法进行关联：

    1. 手动复制。复制"node-modules\devextreme\dist\css"文件夹和里面的样式文件到项目的"www\assets\css"文件夹内。

    2. 项目编译的时候自动复制。在项目根目录创建一个名为"copy.config.js"的JavaScript文件。复制下面代码到文件里面。

var copy = require('@ionic/app-scripts/config/copy.config.js');

copy.copyStyleSheets = {

src: ['{{ROOT}}/node_modules/devextreme/dist/css/**/*'],

dest: '{{WWW}}/assets/css'

};

module.exports = copy;

在“package.json”中添加一块代码，指向刚刚创建的文件。

"config" : { "ionic_copy": "./copy.config.js" },

然后再项目的"src\index.html"中添加样式引用

到目前为止，Devextreme库已经添加完成，接下来就是添加一些组件到项目的页面了。组件的代码可以参照官网Demo。

运行

ionic serve

效果