vue2升级vue3

1. 创建项目使用 npm init vue@latest,然后根据提示进行操作
2. ～@报错提示 Can't find stylesheet to import.
   解决方案：

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

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

  我是header

vue3中写法：

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

9. router-link的tag移除

// router-link没有移除tag的写法
编辑 

// router-link移除tag后的写法

   编辑 

10. 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('/')
}

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

12. 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内的元素用一个标签包裹起来

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

14. computed的用法

15. props与emit

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