Vue Grid DevExtreme

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

 npm install devextreme@21.2 devextreme-vue@21.2 --save --save-exact

 npm install devextreme-aspnet-data-nojquery

 main.js

import 'devextreme/dist/css/dx.light.css';

语言包

安装 globalize 和 devextreme-cldr-data
https://github.com/globalizejs/globalize#globalize

Using Intl - DevExtreme Localization: Vue Components by DevExpress

npm install --save globalize
npm install --save globalize globalize/message
npm install --save-dev devextreme-cldr-data globalize
npm install --save-dev style-loader

npm install

确保 package.json 中的 devDependencies 项配置中有 style-loader, css-loader, url-loader

 App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import zhMessages from "devextreme/localization/messages/zh.json";
import { locale, loadMessages } from "devextreme/localization";

export default {
  name: 'App',
  created() {
      loadMessages(zhMessages)
      locale(navigator.language)
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

webpack.base.config.js

const path = require("path");
module.exports = {
  ...
  resolve: {
    alias: {
      globalize$: 'globalize/dist/globalize.js',
      globalize: 'globalize/dist/globalize',
      cldr$: 'cldrjs/dist/cldr.js',
      cldr: 'cldrjs/dist/cldr'
    },
    ...
  },
  ...
}