vue3+ts+vue-grid-layout 实现组件拖拽效果以及解决Vue3使用 vue-grid-layout的问题

1、安装（vue3安装此版本）

npm add [email protected]

2、在main.ts里面引入并use

import { createApp, Directive } from 'vue'
import App from './App.vue'
import router from './router'
import { store, key } from './store'


import VueGridLayout from 'vue-grid-layout'//引入layout
app
  .use(router)
  .use(store, key)
  .use(VueGridLayout)

 3、ts需要在shims-vue.d.ts中声明

declare module 'vue-grid-layout'{
  import VueGridLayout from 'vue-grid-layout'

  
  export default VueGridLayout
}

4、使用--在页面文件中

import { GridLayout, GridItem } from "vue-grid-layout"
export default {
    components: {
        GridLayout,
        GridItem
    },

 5、参考官网实例以及相关属性介绍

01 - 基本 | Vue Grid Layout -️ 适用Vue.js的栅格布局系统

注意：vue3版本需要按照以上步骤使用，否则会报错：external_commonjs_vue_commonjs2_vue_root_Vue_default.a is not a constructor

效果：