我正在构建一个 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,我会的。
最佳答案
使用 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>
更多信息可以在以下位置找到:
关于javascript - 当您不构建单页面应用程序时,如何构建 Vue.js 单文件组件并导入它们?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51382358/