vue2升级vue3

1. ～@报错提示 Can't find stylesheet to import.
   解决方案：

resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~@': fileURLToPath(new URL('./src', import.meta.url)) // 这句是新增的
    },
  },

2. 文件名.vue后缀不加找不到文件。解决方案：添加.vue后缀
3. static 目录移动到public文件夹下，编译的时候static目录才会被编译到dist目录下
4. 移除Vue.config.productionTip
5. 移除Vue.extend，另一篇文章再详细写写
6. Unhandled error during execution of mounted hook,组件中用到具名插槽，要做对应修改
   vue2中写法：

<div slot="header">
  我是header
</div>

vue3中写法：

<template v-slot:content>
  <div>我是header</div>
</template>

7. ref 定义响应式变量，reactive定义对象类型变量

8. router-link的tag移除

// router-link没有移除tag的写法
<router-link class="u-normal" tag="button" :to="`/admin/editinfo?id=${item.id}`">编辑</router-link> 

// router-link移除tag后的写法
<router-link :to="`/admin/editinfo?id=${item.id}`" v-slot="{navigate}">
  <button class="u-normal" @click="navigate"> 编辑 </button>
</router-link>

9. vue2.x中this.$route, this.$router在vue3.x中的用法

import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

function test () {
  let name = route.name
  console.log(name)
  router.push('/')
}

10. keep-alive的使用
    transition 和 keep-alive 现在必须通过v-slot API 在 RouterView内部使用：

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive >
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

11. vuedraggable vue3
    Extraneous non-props attributes (data-draggable) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
    解决方案： draggable下，template内的元素用一个标签包裹起来

<vuedraggable v-model="fileList"
  @start="drag = true"
  item-key="index"
  :component-data="{name:'fade', tag:'section'}"
  @end="drag = false">
  <template #item="{element, index}">
    <!-- template内的元素用一个标签包裹起来 -->
    <div>
      <div class="item1-list g-row-flex" title="拖动排序">
        <div class="item1-list-bg g-row-flex-center">{{element.fileType}}</div>
        <div class="item1-txt-wrap">
          <input class="txt" type="text" v-model="element.fileName" maxlength="20"/>
          <div class="bar" v-if="element.progress!==0"><div :style="'width:'+ element.progress+'%;'"></div></div>
          <div class="bar1" v-else></div>
          <div class="img-wrap g-row-flex-center" @click="fileDel(index, 1)" v-if="element.progress === 0 || element.state === -1 || element.state === -2 || element.state === 3">
            <img src="~@/assets/images/delete.png" />
          </div>
          <div class="img-wrap g-row-flex-center" v-if="element.state === 1">
            <img src="~@/assets/images/success.png" />
          </div>
        </div>
      </div>
    </div>
  </template>
</vuedraggable>

12. vue2 mixins在vue3中改用组合式函数，见文章： vue3代码复用——组合式函数

13. computed的用法

<script setup>
let isAbled = computed(() => {
  let {num} = countOpenNum()
  return operateTitle.value && num
})
</script>

14. props与emit

<script setup>
const props = defineProps({
  editData: {
    default: () => {
      return {}
    },
    type: Object
  }
})

const emit = defineEmits(['cancel', 'ensure'])
...
</script>

15. watch
    watch只能监听响应式数据，ref定义的属性，reacttive定义的对象，其它数据要使用函数转换

<script setup>
  // ...
  let cityName = ref('')
  const props = defineProps({
    page: {type: Number, default: 10}
  })
 // 监听ref定义的属性
  watch(cityName, (val) => {
    // 自己的逻辑
  })
  // 监听父组件传递过来的值
  watch(() => props.page, () => {
    // 自己的逻辑
  })
</script>