翻譯|使用教程|編輯:龔雪|2021-12-27 10:40:42.287|閱讀 620 次
概述:本文主要介紹如何將DevExtreme添加到Vue應用程序中,歡迎下載最新版體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
您可以使用作為 DevExtreme CLI 一部分的單個 npx 命令安裝和配置 DevExtreme 及其依賴項:
npx -p devextreme-cli devextreme add devextreme-vue
運行該命令后,您可以跳過以下文章,直接繼續導入DevExtreme組件。如果該命令因任何原因不可用或者您需要舊版本,請按照以下說明進行手動設置。
安裝 devextreme 和 devextreme-vue npm 包:
npm install devextreme@21.2 devextreme-vue@21.2 --save --save-exact
注意:我們建議保存 DevExtreme 的確切版本以避免意外更新,因為 DevExtreme 不使用語義版本控制。 在我們的版本系統中,第一個和中間的數字表示可能包含操作更改的主要版本。
打開主應用程序文件 (main.js) 并導入預定義的主題樣式表(下面代碼中的 dx.light.css)。 或者您可以導入使用 DevExtreme UI 組件的樣式表,語法是一樣的。
然后跳轉到public文件夾,打開index.html文件,并將dx-viewport類添加到 <body> 標記,這可確保將主題顏色和排版設置應用于所有頁面元素(而不僅僅是 DevExtreme UI 組件)。
注意:SVG-based UI組件不需要主題樣式表,如果您選擇導入樣式表,UI 組件將應用與其匹配的外觀。
從特定模塊導入您要使用的DevExtreme組件。 在以下代碼中,導入了DxButton組件:
還應導入嵌套的DevExtreme組件(以下代碼中的DxArgumentAxis、DxSeries和DxLegend):
全球化注冊
如果要使用Globalize進行本地化,請安裝它和devextreme-cldr-data擴展:
npm install --save-dev devextreme-cldr-data globalize
然后如果您使用 Vue CLI 創建應用程序,請在 vue.config.js 文件中指定 Globalize 和 CLDR 別名,否則在 webpack.config.js 文件中指定:
vue.config.js
注意:如果您使用 Vue CLI 創建應用程序,請跳過此步驟。
打開 webpack.config.js 文件并配置loaders來處理CSS和字體:
此外,打開package.json文件并確保在devDependencies中列出了 style-loader、css-loader 和 url-loader。
使用以下命令運行應用程序:
npm run serve
打開 //localhost:8080 瀏覽應用程序。
DevExtreme擁有高性能的HTML5 / JavaScript小部件集合,使您可以利用現代Web開發堆棧(包括React,Angular,ASP.NET Core,jQuery,Knockout等)構建交互式的Web應用程序。從Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和響應式UI小部件集合,可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。
DevExpress技術交流群5:742234706 歡迎一起進群討論
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都網