参考

Add DevExtreme to a Vue Application: DevExtreme - JavaScript UI Components for Angular, React, Vue and jQuery by DevExpress

实现

创建一个Vite项目

依赖下载

npm install devextreme devextreme-vue --save --save-exact

导入样式表

在main.js中添加import 'devextreme/dist/css/dx.light.css';

为标签添加类

在index.html中的body中添加 class="dx-viewport"

测试

修改 HelloWorld.vue 内容

<template>
  <DxChart
      :data-source="data">
      <DxArgumentAxis :tick-interval="10" />
      <DxSeries type="bar" />
      <DxLegend :visible="false" />
  </DxChart>
</template>

<script setup>
import DxChart, {
  DxArgumentAxis,
  DxSeries,
  DxLegend
} from 'devextreme-vue/chart';

const data = [{
  arg: 1990,
  val: 5320816667
}, {
  arg: 2000,
  val: 6127700428
}, {
  arg: 2010,
  val: 6916183482
}];
</script>

添加成功！

其他配置

若要避免生产版本中出现错误，请执行下列操作：

修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
      alias: {
          "devextreme/ui": 'devextreme/esm/ui'
      }
  },
  build: {
    rollupOptions: {
        treeshake:  false 
    }
  },
})