[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"中添加样式引用

<link href="assets/css/dx.common.css" rel="stylesheet">

<link href="assets/css/dx.light.css" rel="stylesheet">

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

运行

ionic serve


效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,305评论 0 21
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,288评论 19 139
  • 1. 新建一个文件夹,命名为 webpack-cli , webpack-cli 就是你的项目名,项目名建议使用小...
    鲁大师666阅读 1,553评论 1 3
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 3,370评论 0 5
  • 一年前的这个时候,我的生活经历了一个巨大的动荡,整个三观被刷新了一波。一年后的今天,我的整个世界被千万头草泥马,不...
    王下邀月熊阅读 458评论 0 0