Javascript VueJS:Uncaught TypeError:vue\u网页包\u导入的\u模块\u 4\u。默认值不是构造函数

我指的是构建我的第一个

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

我忽略了它，继续学习教程。根据教程，我用以下contnet创建了

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
    }
});

我还在

store/modules

目录中创建了

todos.js

文件，如下所示：

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
}

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

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

然后我修改了我的

main.js

，如下所示：

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
}

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

依赖项

"dependencies": {
    "axios": "^0.21.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },

---

看起来具有

Webpack

依赖项不是必需的。但我不能再进一步了，因为我不知道该怎么办。

该教程使用了以前的Vue版本。您正在使用Vue 3。这些正是Vue 3中改变的东西。考虑使用另一个新的教程或使用VUE：“^ 2.6”，并在你有更多的经验之后升级。谢谢你的快速回复。也许我不应该要求这样做，但请你帮我指出一个关于Vue 3的教程好吗？例如，你可以试试。非常感谢！我将遵循这一点。该教程使用以前的Vue版本。您正在使用Vue 3。这些正是Vue 3中改变的东西。考虑使用另一个新的教程或使用VUE：“^ 2.6”，并在你有更多的经验之后升级。谢谢你的快速回复。也许我不应该要求这样做，但请你帮我指出一个关于Vue 3的教程好吗？例如，你可以试试。非常感谢！我将遵循这一点。