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

Question

我正在构建一个Web应用程序(它是Core 2 MVC ASP.NET 但它在这里不应该有任何区别)，它不是一个单页应用程序。我非常高兴地使用 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

能够以类似 SFC 的方式编写 vue 组件是可以通过使用 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

Answer 2

我没有示例代码，因为我实际上只开发 SPA。但是您可以尝试安装vue-cli(旧的 2.x 版本，而不是新的 3.x)，然后初始化一个空的 webpack 模板

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install

然后，您可以在src子文件夹中创建 SFC，然后编辑src/main.js

import component1 from './component1.vue'
import component2 from './component2.vue'

然后运行npm run build这将创建一个带有app.js和一些 CSS 的dist子文件夹。我在这里从理论上推测，因为我以不同的方式使用 Webpack - 它应该可以工作。