Vue-cli-3集成jQWidgets

发表于 | 评论数： | 阅读次数：

jQWidgets是一个软件框架，包含小部件，主题，输入验证，拖放插件，数据适配器，内置WAI-ARIA可访问性，国际化和MVVM支持。它建立在开放标准和技术HTML5，CSS，JavaScript和jQuery之上。该库用于开发响应式Web和移动应用程序。下面介绍在Vuejs中集成jQWidgets。

安装环境

  • node.js: v10.16.0
  • npm: 6.9.0
  • vue: 2.6.10
  • cesium: 1.45.0
  • vue-cli: 3.9.2
  • webpack: 4.28.4

安装步骤

  • 安装vue-cli
1
npm install -g @vue/cli
  • 创建应用
1
vue create jqwidgets-vue-cli-app   //Choose the default preset
  • 导航到应用
1
cd jqwidgets-vue-cli-app
  • 安装jQWidgets依赖
1
npm install jqwidgets-scripts --save--dev

  • 从node_modules/jqwidgets-scripts/jqwidgets复制styles文件夹到public文件夹。

  • 在index.html链接 jqx.base.css 文件。

1
<link rel="stylesheet" type="text/css" href="./styles/jqx.base.css" />
  • 修改App.vue如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
    <JqxBarGauge ref="barGaugeReference"
        :width="600" :height="600" 
        :values="values" :formatFunction="formatFunction" 
    />
</template>
 
<script>
    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
    export default {
        components: {
            JqxBarGauge
        },
        data: function () {
            return {
                values: [10, 20, 30, 40, 50]
            }
        },
        methods: {
            formatFunction: function (value, index, color) {
                return color;
            }
        }
    }
</script>
  • 运行Vue Cli开发服务器
1
npm run serve
  • 在浏览器中输入 localhost:8080 查看结果。

参考链接

  1. Vue CLI with jQWidgets,by jQWidgets.