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


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

21.11.2018 11:51:07 Просмотров 53 Источник

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

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

У вопроса есть решение - Посмотреть?

Ответы - Можно ли добавить компонент Vue single file в существующее приложение без использования WebPack? / Can I add a Vue single file component to an existing application without using WebPack?

Josh G

04.12.2018 04:01:26

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

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

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

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

В а работали следующие .cshtmlфайл 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>

Update: спасибо Саймону за указание, что вы можете использовать @@click="..."внутри а .cshtmlфайл cshtml!

https://stackoverflow.com/questions/53420284/can-i-add-a-vue-single-file-component-to-an-existing-application-without-using-w/53613589#comment106010521_53613589
Я предполагаю, что проблема заключается в@, которое razor использует в качестве своего "слова пробуждения". Я предполагаю, что @ @ click= "" будет работать?
https://stackoverflow.com/questions/53420284/can-i-add-a-vue-single-file-component-to-an-existing-application-without-using-w/53613589#comment106020917_53613589
О, очень круто, используя @@click="..."полностью работает!
Помочь в развитии проекта:
Закрыть X