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

Question

我想将 Vue 介绍给现有的 ASP.NET MVC 应用程序。如果我们打算使用 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 可能会导致一些问题。

我现在想做同样的事情，我认为最好的开始方法是使用脚本标签，但我是单个文件组件的忠实粉丝

编辑：刚刚确认 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>

更新：感谢Simon 指出您可以在.cshtml 文件中使用@@click="..."！