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

Question

I am building a web application (it's ASP.NET Core 2 MVC but it shouldn't really make any difference here) that is NOT a single page application. I am using Vue.js quite happily to provide functionality on the front end via an Vue instance. It's got to the point where I need to extract stuff into reusable components, which I can do along side the Vue instance like this:

<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>

I would love to be able to define my component as one of Vue's single file components (with a .vue extension) instead of declaring them like this but all the docs and tutorials I can find focus on single page applications and I am not sure how to modify that information to work for me.

I have had a go with the Vue CLI and worked out how to tell it to build a library rather than a SPA using it's bundled webpack config, but that builds a single UMD or CommonJS bundle file and I do not know how to make use of it!

I am unfamiliar with webpack, but I am willing to learn. I am currently using Gulp for other stuff in this project, so if I can get away with sticking with Gulp then great, but if I need to switch to webpack I will.

Answer 1

Being able to write your vue components in an SFC-like way is something that can be achieved by using Vue blocks. It allows you to write your multiple components in HTML as follows, without requiring build tools:

<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>

More info can be found at:

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

Answer 2

I have no example code because I actually develop SPAs only. But you could try to install vue-cli (the old 2.x one, not the new 3.x) and then initialize an empty webpack template

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

Then you can create your SFCs in the src subfolder, then edit src/main.js

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

and then run npm run build which will create a dist subfolder with app.js and some CSS. I am speculating theoretically here as I am using Webpack in different way - it should supposedly work.