Использование Vue. js с Webpack - PullRequest
Новая
       7

Использование Vue. js с Webpack

1 голос
/ 16 июня 2020

Я использую Vue. js впервые и не могу заставить работать простейший фрагмент кода. В настоящее время я добавляю его в существующий проект с помощью Webpack, и вот как выглядит код в моем js файле: 

import Vue from 'vue'
import 'bootstrap';
...

var app = new Vue({
  el: '#toto',
  data: {
    message: 'Hello Vue!'
  }
});

И мой HTML довольно длинный, но это то, что я m пытается сделать: 

<div id="main">
  <div class="container">
    <div id="toto">{{ message }}</div>
    <h2 class="title">Search results</h2>
  </div>
</div>

Итак, когда я запускаю код js выше, div «toto» пуст. У меня нет ошибок компиляции в Webpack и консоли Chrome.

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 16 июня 2020

Я нашел решение здесь: Vue заменяет HTML комментарием при компиляции с помощью webpack

Следующий код, добавленный в файл конфигурации Webpack, помог: 

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
0 голосов
/ 16 июня 2020

Когда вы используете Webpack, Vue обычно ожидает однофайловых компонентов (*.vue) - вы не можете поместить шаблон в свой publi c HTML файл. Итак, вам нужно сделать что-то вроде этого: 

var app = new Vue({
  el: '#toto',
  template: '{{ message }}',
  data: {
    message: 'Hello Vue!'
  }
});
...