javascript - 当您不构建单页面应用程序时，如何构建 Vue.js 单文件组件并导入它们？

Question

我正在构建一个 Web 应用程序(它是 ASP.NET Core 2 MVC，但它在这里应该没有任何区别)，它不是单页应用程序。我非常高兴地使用 Vue.js 通过 Vue 实例在前端提供功能。现在我需要将内容提取到可重用组件中，我可以在 Vue 实例旁边执行此操作，如下所示:

<script type="text/javascript" src="/js/dev/vue.js"></script>

<div id='app'>
    <my-component message="Hi there!" />
</div>

<script>
    Vue.component('my-component', {
        template: '<p>{{ message }}</p>',
        props: { message: String }
    });

    var app = new Vue({ el: '#app' });
</script>

我希望能够将我的组件定义为 Vue 的单文件组件之一(带有 .vue 扩展名)，而不是像这样声明它们，但我可以找到焦点的所有文档和教程在单页应用程序上，我不确定如何修改该信息以适合我。

我尝试过 Vue CLI，并弄清楚如何告诉它使用捆绑的 webpack 配置构建一个库而不是 SPA，但这会构建一个 UMD 或 CommonJS 捆绑文件，但我不知道如何使用它!

我对webpack不太熟悉，但是我愿意学习。我目前在这个项目中使用 Gulp 来做其他事情，所以如果我能坚持使用 Gulp 那就太好了，但如果我需要切换到 webpack，我会的。

Answer 1

使用 Vue block 可以以类似 SFC 的方式编写 vue 组件。它允许您按如下方式用 HTML 编写多个组件，而无需构建工具:

<template component="component-name">
    <div>
        <!-- HTML Template here -->
    </div>
    <style scoped>
        /* Scoped styles here */
    </style>
    <script>
        // Vue component definition like in Single File Components.
        export default {
            data() {   
            },
            mounted() {
            },
            methods: {
             
            }
        }
    </script>
</template>

更多信息可以在以下位置找到:

• 文档:https://fluxfx.nl/vue-blocks/examples/index.html
• Github:https://github.com/j-angnoe/vue-blocks