Могу ли я добавить отдельный компонент Vue в существующее приложение без использования WebPack?

Question

Я хотел бы представить Vue существующему приложению ASP.NET MVC.Если мы намереваемся использовать отдельные файловые компоненты Vue, нужно ли нам добавлять WebPack в процесс сборки?

В настоящее время наше приложение использует пакеты ASP.NET, но не выполняет дополнительную компиляцию / обработку Javascript или CSS.Я пытаюсь понять, как добавление Vue (или любой интерфейсной среды Javascript) повлияет на процесс сборки.

Answer 1

Если вы хотите использовать Single File Components , вам понадобится инструмент для сборки, такой как Webpack.Посмотрите руководство по развертыванию для получения дополнительной информации об этом.

Если вы хотите включить его в тег сценария и использовать обычный HTML и JS ( без инструментов сборки -также руководство по развертыванию), то это должно работать без изменения процесса сборки.Я не проверял его с помощью шаблонов Razor (.cshtml), и сокращение v-on может вызвать некоторые проблемы.

Я собираюсь сделать то же самое правильносейчас, и я думаю, что лучший способ начать это с тега script, но я большой поклонник отдельных файловых компонентов

Edit: Просто подтвердил, что вседовольно хорошо в шаблонах Razor, за исключением сокращения v-on, поэтому, если вы этого не сделаете, все будет в порядке.

В файле .cshtml сработало следующее:

<!-- Don't do `@click`! Use `v-on:click` instead -->
<div id="vueApp" v-on:click="alert(message)">
  {{ message }}
  <ul>
    <li :title="item" v-for="item in itemList">{{ item }}</li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  let vueApp = new Vue({
    el: '#vueApp',
    data: {
      message: 'Hello!',
      itemList: ['1', '2', '3']
    },
    methods: {
      alert (msg) {
        // got an error using `alert` in the template, but this was fine
        window.alert(msg)
      }
    }
  })
</script>