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"中添加样式引用
<link href="assets/css/dx.common.css" rel="stylesheet">
<link href="assets/css/dx.light.css" rel="stylesheet">
到目前为止,Devextreme库已经添加完成,接下来就是添加一些组件到项目的页面了。组件的代码可以参照官网Demo。
运行
ionic serve