如何从 Vue 2 无痛升级到 Vue 3，一文搞定！

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

const vm = new Vue({
  // options
});
vm.$mount('#app');

const app = createApp({
  // options
});
app.mount('#app');

const vm = new Vue();
vm.$on('event', () => {
  // handle event
});

import mitt from 'mitt';
const emitter = mitt();
emitter.on('event', () => {
  // handle event
});

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});

const app = createApp(App);
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});
app.mount('#app');

export default {
  beforeDestroy() {
    console.log('Component is about to be destroyed');
  },
  destroyed() {
    console.log('Component has been destroyed');
  }
};

export default {
  beforeUnmount() {
    console.log('Component is about to be unmounted');
  },
  unmounted() {
    console.log('Component has been unmounted');
  }
};

import { ref, reactive, onMounted } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      message: 'Hello, Vue 3!'
    });
    function increment() {
      count.value++;
    }
    onMounted(() => {
      console.log('Component has been mounted');
    });
    return {
      count,
      state,
      increment
    };
  }
};

<template>
  <div>
    <teleport to="#modals">
      <div class="modal">
        <p>This is a modal</p>
      </div>
    </teleport>
  </div>
</template>

<template>
  <div>
    <header>Header Content</header>
    <main>Main Content</main>
    <footer>Footer Content</footer>
  </div>
</template>

import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';
describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = mount(HelloWorld, {
      props: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

describe('My First Test', () => {
  it('Visits the app root url', () => {
    cy.visit('/');
    cy.contains('h1', 'Welcome to Your Vue.js App');
  });
});