将 Vue 2 迁移到 Vue 3，typeError: Vue is not a constructor

Question

如何将我的 Vue 2 语法迁移到 Vue 3，因为我收到以下错误：

TypeError: Vue 不是构造函数。

现在我正在使用 Vue 3：

let app;

firebase.auth().onAuthStateChanged(user => {
  console.log("user", user);
  if (!app) {
    app = new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");
  }
});

到

import { createApp } from "vue";

const app = createApp({
});

app.mount("#app");

Answer 1

您在 Vue 3、Vuex 4、Vue Router 4 中的代码相当于：

import { createApp } from 'vue'
import store from './store'
import router from './router'
import App from './App.vue'

let app;

firebase.auth().onAuthStateChanged(user => {
  console.log("user", user);
  app = createApp(App);
  app.use(store);
  app.use(router);
  app.mount("#app");
});

store.js中的store语法略有不同：

import { createStore } from 'vuex'

// now uses `createStore`
export default createStore({ 
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

router.js中的路由器：

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;