Question

我想向现有的ASP.NET MVC应用程序介绍Vue。如果我们打算使用Vue的单个文件组件，是否需要在构建过程中添加WebPack？

当前，我们的应用程序使用ASP.NET捆绑包，但不进行其他Javascript或CSS的编译/处理。我试图了解添加Vue（或任何前端Javascript框架）如何影响构建过程。

Answer 1

如果要使用Single File Components，则需要Webpack之类的构建工具。查看deployment guide以获得更多信息。

如果您想将其包含在脚本标签中，并使用普通的HTML和JS（without build tools-也是部署指南），那么它应该可以工作而无需更改构建过程。我尚未使用Razor模板（.cshtml）进行过测试，而v-on shorthand可能会在此处引起一些问题。

我现在打算做完全相同的事情，并且我认为最好的入门方法是使用script标签，但是我非常喜欢单个文件组件

编辑：刚刚确认，除了v-on速记外，Razor模板中的所有内容都还不错，所以如果避免的话，应该没问题。

以下内容在.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>

是否可以在不使用WebPack的情况下将Vue单个文件组件添加到现有应用程序？

1 个答案: