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.