VueJS：未捕获类型错误：vue__WEBPACK_IMPORTED_MODULE_4__.default 不是构造函数

Question

我参考https://youtu.be/5lVQgZzLMHc?t=800来构建我的第一个Vuex应用程序。这是 2018 年的教程，所以我的main.js看起来有点不同。我正在使用Vue 3.0.2（如Vue开发者工具所示）。

这就是我的main.js样子：

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

createApp(App).mount('#app')

因此，我对此文件进行了更改以匹配教程中的内容：

import Vue from 'vue';
import App from './App.vue'

new Vue({
    render: h => h(App)
}).$mount("#app");

但这给了我以下控制台错误：

Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor

我忽略了它并继续教程。根据教程，我store/index.js使用以下内容创建了文件：

import Vuex from 'vuex';
import Vue from 'vue';
import todos from './modules/todos';

// Load Vuex
Vue.use(Vuex);

// Create the store
export default new Vuex.Store({
    modules: {
        todos
    }
});

我还在目录todos.js中创建了文件store/modules，如下所示：

const state = {
    todos: [
        {
            id: 1,
            title: 'Learn Vuex'
        },
        {
            id: 2,
            title: 'Resolve errors'
        }
    ]
};

const getters = {
    allTodos: (state) => state.todos
};

const actions = {};

const mutations = {};

export default {
    state,
    getters,
    actions,
    mutations
}

然后我main.js这样修改：

import Vue from 'vue';
import App from './App.vue'
import todos from './store'

new Vue({
    store,
    render: h => h(App)
}).$mount("#app");

现在错误变成了这样：

index.js?4360:6 Uncaught TypeError: Cannot read property 'use' of undefined

我只是 Vue 的早期学习者。无法弄清楚如何解决这些问题，特别是在语法和文件模式发生变化的情况下main.js。

更新
如果我理解正确的话，样板文件（vue create .）没有webpack在项目中添加任何依赖项。

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

createApp(App).mount('#app')

从这里看来，Webpack依赖关系并不是强制性的。但我无法继续下去，因为我不知道该怎么办。