Как добавить Vue в существующий проект Webpack

Question

У меня есть проект Webpack, и я хочу использовать в нем Vue.Я импортирую Vue в мой файл JavaScript следующим образом:

import "../../node_modules/vue/dist/vue.min.js";

Я вижу vue.min.js в своем комплекте, но когда я пытаюсь создать экземпляр Vue в моем HTML-файле или файле JavaScript, например:

var app = new Vue({
  el: ‘#app’,
  data: {
    message: ‘Hello Vue!’
  }
})

Я получаю эту ошибку в консоли:

Uncaught ReferenceError: Vue is not defined
    at eval (ins.js?be14:2)
    at Object../src/scripts/ins.js (app.js:485)
    at __webpack_require__ (app.js:79)
    at eval (index.js?48f5:1)
    at Module../src/scripts/index.js (app.js:474)
    at __webpack_require__ (app.js:79)
    at Object.0 (app.js:530)
    at __webpack_require__ (app.js:79)
    at checkDeferredModules (app.js:46)
    at app.js:152

Я попытался добавить vue.min.js непосредственно в мой HTML через CDN, и все работает нормально.Есть ли проблема с упорядочением при загрузке?Как мне решить эту проблему?

Answer 1

Вы должны импортировать Vue в переменную следующим образом:

import Vue from 'vue'; // or import Vue from '../../node_modules/vue/dist/vue.min.js';

Затем он должен работать с вашим примером:

import Vue from 'vue';

var app = new Vue({
  el: ‘#app’,
  data: {
    message: ‘Hello Vue!’
  }
})