工作日志：vue3+ts

1、写组件时，关于引入子组件的报错。

哦！很愚蠢！组件文件忘了写后缀.vue。

2、明明地址写对了，但报错找不到模块。

3、算是警告吧，ESlint的格式问题。
解决：传输的参数要用连字符，不能用驼峰式写法。

<ModelDialog :isShow="isShow" />  //错误写法
<ModelDialog :is-show="isShow" /> //正确写法

4、Vue 3 中的拖拽排序功能实现。
完整代码如下：

<el-row>
  <el-col v-for="(item, index) in models" :key="index" :span="4" draggable="true"
    @dragstart="dragStart(index)"
    @dragover="allowDrop"
    @drop="drop(index)"
    class="draggable-item">
    <div class="flexClum">
      <img :src="item.imgurl" />
      <span>{{ item.title }}</span>
    </div>
  </el-col>
</el-row>

<script setup lang="ts">
const models = reactive([
  { imgurl: '@/assets/images/model1.png', title: '生成1码' },
  { imgurl: '@/assets/images/model2.png', title: '生成2码' },
  { imgurl: '@/assets/images/model3.png', title: '生成3码' },
  { imgurl: '@/assets/images/model4.png', title: '生成4码' },
  { imgurl: '@/assets/images/model5.png', title: '生成5码' },
  { imgurl: '@/assets/images/model6.png', title: '生成6码' }
]);

const draggingIndex = ref(-1); // 被拖拽元素的索引
const dragStart = (index) => {
  draggingIndex.value = index;
};

const allowDrop = (e) => {
  e.preventDefault();
};

const drop = (index) => {
  const draggedItem = models.splice(draggingIndex.value, 1)[0];
  models.splice(index, 0, draggedItem);
  draggingIndex.value = -1;
};
</script>

参考文章https://blog.youkuaiyun.com/jieyucx/article/details/140636857

好的，虽然代码写得不多，但任务完成量可以了！哈哈哈！

5、 图片加载不出来。
查来查去，解决了。

//使用vite的话，推荐这种方案

imgurl: new URL('@/assets/images/model1.png', import.meta.url).href