當您不構建單頁應用程序時，如何構建 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

能夠以類似 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 - 它應該可以工作。