和 Trae 一起开发可视化拖拽编辑项目(1) ：迈出第一步

最近想尝试做一个简单的可视化拖拽项目，Trae 近来也蛮火的，刚好用一个完整的项目来磨合一下。

预期实现的功能如下：

使用 vue3、vite、element plus 、unocss 搭建项目
拖拽物料包括：文本、图片、视频、音频等常用元素
可修改元素的属性，包括：尺寸、颜色、src等常用属性
实时预览页面

Vue3 基础项目搭建

新建一个文件夹 simple-paint，让 Trea 从这里开始帮我们搭建项目

Trae 有条不紊一步一步的安装依赖，配置 vite.config.ts，同时把 element-plus 按需导入也配置好了

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Unocss from 'unocss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    Unocss()
  ],
})

但是，它没有把 unocss 完全配置好，没有生成uno.config.ts，也没有在入口增加 unocss，所以这一步自己手动配一下：

javascript 复制代码

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

arduino 复制代码

import 'virtual:uno.css'

接下来，安装 pinia 和拖拽插件，拖拽插件选择了 vue-drag-resize github.com/kirillmuras...，除了拖拽还有缩放功能，一步到位。

我：帮我配置pinia和适配 vue3 版本的vue-drag-resize

这一步 Trae 帮我安装了 pinia 并配置在项目中，但是 vue-drag-resize 的版本没有安装对，实际上还是vue2的版本

json 复制代码

"vue-drag-resize": "^1.5.4"

所以继续人工处理，删掉错误的依赖，安装适用 vue3 的依赖版本

css 复制代码

npm remove vue-drag-resize
npm install vue-drag-resize@next

OK，现在是正确的依赖版本了

json 复制代码

"vue-drag-resize": "^2.0.3"

建立画布，实现元素拖拽

我：建立一个画布，可以调节画布尺寸。画布左侧放置文本、图片、音频、视频四个元素，可以通过拖拽加入画布内，画布内的元素可以缩放

通过 Trae 的一番努力，实现了对话中的需求，雏形初备，还是很棒的！

它帮我新增了两个 store 文件，在 App.vue 完成了主要页面代码

继续完善需求

我：画布内元素增加删除功能。画布右侧增加功能区域，可以实时修改画布内当前当前选择元素的尺寸、颜色、src 等元素相关属性。

等待 Trae 所有操作执行完成之后，2 个地方出错了：

使用了computed，但是没有引入
多了一个 div 结束标签

手动改了下，运行代码，emm，怎么有点不对劲

算了，这里自己调整一下。可能我应该在一开始就把页面整体布局讲清楚，再来一步步加功能

手动修改布局后，发现元素可以被拖出画布区域，为了管理方便，还是不要让元素超出画布范围吧。这个需求就懒得找 Trae 了， vue-drag-resize 自带属性可以设置

parentLimitation 限制元素超出画布区域

ini 复制代码

<vue-drag-resize :parentLimitation="true">

大概花了一个小时，我们迈出了很重要的一步，完成了基础的画布元素拖放功能和基础属性的设置，但实际还是一个非常粗糙的状态。接下来在继续完善功能的同时，还要优化项目结构优化代码质量，使项目达到可用阶段。

今天使用 Trae 的感受还是不错的，明显提升了开发效率，虽然也会有一些错误，但它确实可以作为一个强大的辅助工具，不过最终的开发效果还是依赖于开发者自身的知识、经验和对工具的合理运用。

未完待续，欢迎交流～有任何问题或者兴趣也可以在公众号：自由前端之路找到我。