Можно ли добавить компонент Vue single file в существующее приложение без использования WebPack?
Я хотел бы познакомить вю с уже существующим 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?

04.12.2018 04:01:26
Если вы хотите использовать однофайловые компоненты, то вам понадобится инструмент сборки, такой как Webpack. Проверьте руководство по развертыванию для получения дополнительной информации о том, что.
Если вы хотите включить его с тегом сценария и использовать обычный HTML и JS( без инструментов сборки-также руководство по развертыванию), то это должно работать без изменения процесса сборки. Я не проверял его с помощью шаблонов Razor (.cshtml
), и v-on
может вызвать некоторые проблемы там.
Я хочу сделать то же самое прямо сейчас, и я думаю, что лучший способ начать работу-это использовать тег script, но я большой поклонник компонентов с одним файлом
Edit: только что подтвердил, что все довольно хорошо в шаблонах Razor, за исключением v-on
shorthand, так что если вы избегаете этого, все должно быть хорошо.
В а работали следующие .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!