Vue DevExtreme 环境搭建

---

theme: smartblue

参考

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 内容

```

```

添加成功！

其他配置

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

修改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 
    }
  },
})