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

Posted 2023-02-23

【中文标题】不构建单页应用程序时，如何构建 Vue.js 单文件组件并导入它们？

【英文标题】：How do you build Vue.js single file components and import them when you're not building a single page application?

【发布时间】：2018-12-25 05:07:14

【问题描述】：

我正在构建一个 不是 单页应用程序的 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 SFC 由Vue-template-compiler 预处理，所以为了使用它们，我建议创建一个简单的main.js 文件，该文件导入所有需要的SFC，然后将Webpack 指向这个main.js .它将生成一个捆绑包 - 将其命名为 components.js，然后将其作为普通 SCRIPT 标记包含在所有相关页面上。在每个页面上，您都需要为每个组件实例化一个或多个 Vue 实例——就像您在示例中所做的那样。也可以看github.com/ckhrysze/multipage-vue

谢谢，您能否提供一个示例来实现这一目标？我整个下午都在尝试掌握 webpack，但它......很难：-|

【参考方案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

【讨论】：

这看起来是一个很有前途的插件！我一定会试一试的。

【参考方案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 - 它应该可以工作。