Vue2引用 jqwidgets框架

一、创建vue2前端项目：

1. 使用vue cli创建vue2项目：

vue create 项目文件夹名称

选择Vue版本号为 [Vue 2]

2.进入创建好的vue2项目文件夹中：

cd 项目文件夹名称

二、引入 jqwidgets：

jqwidgets官方vue文档：https://www.jqwidgets.com/vue-components-documentation/

1.安装 jqwidgets-scripts

与vue2对应的jqwidgets-scripts版本是14版，如果使用最新版会出现错误

npm install jqwidgets-scripts@14 --save--dev

2.引用jqwidgets的css样式

1、先将 node_modules中的jqwidgets-scripts文件夹下的jqwidgets文件夹整个复制到index.html的同级文件夹中；

2、在index.html中使用link引入jqx.base.css

<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />

3.创建一个页面测试一下是否生效

以下创建一个dockingLayout

<template>
  <div>
    <JqxDockingLayout ref="dockinglayout" @pin="onPin()" :width="'100%'" :height="'100%'" :layout="layout">
      <!--The panel content divs can have a flat structure-->
      <!--documentGroup-->
      <div data-container="Document1Panel">
        Document 1 content
        dasdas
        dadsadad
        dadsagsdfg
        dasdsadas
      </div>
      <div data-container="Document2Panel">
        Document 2 content
      </div>
      <!--bottom tabbedGroup-->
      <div data-container="ErrorListPanel">
        List of errors
      </div>
      <div data-container="OutputPanel">
        Output
      </div>
      <!--right tabbedGroup-->
      <div data-container="SolutionExplorerPanel">
        Solution structure
      </div>
      <div data-container="PropertiesPanel">
        List of properties
      </div>
    </JqxDockingLayout>
  </div>
</template>

<script>
import JqxDockingLayout from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdockinglayout.vue"

export default {
  name: "docking-layout-page",
  props: {},
  components: {JqxDockingLayout},
  data () {
    return {
      layout: [{
        type: 'layoutGroup',
        orientation: 'horizontal',
        items: [{
          type: 'layoutGroup',
          orientation: 'vertical',
          width: '60%',
          items: [{
            type: 'documentGroup',
            height: '50%',
            minHeight: '25%',
            items: [{
              type: 'documentPanel',
              title: 'Document 1111',
              contentContainer: 'Document1Panel'
            }, {
              type: 'documentPanel',
              title: 'Document 2',
              contentContainer: 'Document2Panel'
            }]
          }, {
            type: 'tabbedGroup',
            height: '50%',
            pinnedHeight: '10%',
            items: [{
              type: 'layoutPanel',
              title: 'Error List',
              contentContainer: 'ErrorListPanel'
            }, {
              type: 'layoutPanel',
              title: 'Output',
              contentContainer: 'OutputPanel',
              selected: true
            }]
          }]
        }, {
          type: 'tabbedGroup',
          width: '40%',
          items: [{
            type: 'layoutPanel',
            title: 'Solution Explorer',
            contentContainer: 'SolutionExplorerPanel'
          }, {
            type: 'layoutPanel',
            title: 'Properties',
            contentContainer: 'PropertiesPanel'
          }]
        }]
      }]
    }
  },
  methods: {
    onPin: function () {
      // Do something...
      this.$refs.dockinglayout.refresh()
    }
  }
}

</script>

<style scoped>

</style>