在Vue 3项目中，实现拖拽和缩放自定义看板能够极大提升用户体验，而vue-grid-layout就是一个强大的工具，帮助我们轻松达成这一需求。

安装vue-grid-layout。在项目目录下打开终端，运行npm install vue-grid-layout --save 或者yarn add vue-grid-layout ，将其添加到项目依赖中。

接着，在Vue组件中引入并使用。在需要使用看板功能的组件中，导入相关模块：

import { defineComponent } from 'vue';
import { GridLayout } from 'vue-grid-layout';

然后，在components选项中注册组件：

export default defineComponent({
  components: {
    GridLayout
  }
});

在模板中使用该组件：

<GridLayout :layout="layout" :col-num="12" :row-height="30" :margin="[10, 10]" :is-draggable="true" :is-resizable="true">
  <div v-for="(item, index) in layout" :key="index" :x="item.x" :y="item.y" :w="item.w" :h="item.h">
    {{ item.i }}
  </div>
</GridLayout>

这里，layout是一个数组，用于定义每个看板元素的位置和大小信息。col-num表示列数，row-height定义行高，margin是元素之间的间距，is-draggable和is-resizable分别控制是否可拖拽和可缩放。

在data函数中定义layout数据：

data() {
  return {
    layout: [
      { i: '1', x: 0, y: 0, w: 4, h: 2 },
      { i: '2', x: 4, y: 0, w: 4, h: 2 }
    ]
  };
}

每个对象中的i是元素的唯一标识符，x、y表示位置，w、h表示宽度和高度。

vue-grid-layout还提供了丰富的事件钩子。例如，@layout-change事件可以在布局发生变化时触发：

<GridLayout :layout="layout" :col-num="12" :row-height="30" :margin="[10, 10]" :is-draggable="true" :is-resizable="true" @layout-change="handleLayoutChange">
  <!-- 子元素 -->
</GridLayout>

在方法中定义处理函数：

methods: {
  handleLayoutChange(layout) {
    // 处理布局变化逻辑
    console.log(layout);
  }
}

通过以上步骤，我们就利用vue-grid-layout在Vue 3中实现了可拖拽和缩放的自定义看板功能。无论是创建个性化的页面布局，还是打造灵活的可视化应用，这一方法都能发挥重要作用。不断探索其特性和配置，能为项目带来更多创新和便捷。