단일 페이지 애플리케이션을 구축하지 않을 때 Vue.js의 단일 파일 구성 요소를 구축하고 Import하려면 어떻게 해야 합니까?

단일 페이지 애플리케이션을 구축하지 않을 때 Vue.js의 단일 파일 구성 요소를 구축하고 Import하려면 어떻게 해야 합니까?

웹 어플리케이션(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를 사용하여 번들된 웹 팩 구성을 사용하여 SPA가 아닌 라이브러리를 구축하는 방법을 알아냈습니다만, 이 방법에서는UMD또는CommonJSbundle file과 그것을 어떻게 사용하는지 모르겠어요!

웹팩에 익숙하지 않지만 배우고 싶습니다.저는 현재 이 프로젝트에서 Gulp을 다른 용도로 사용하고 있기 때문에 Gulp을 계속 사용할 수 있다면 좋겠지만, 만약 웹 팩으로 전환할 필요가 있다면 그렇게 하겠습니다.

Vue 컴포넌트를 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>

상세한 것에 대하여는, 다음의 URL 를 참조해 주세요.

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

실제로는 SPA만 개발하고 있기 때문에 코드 예는 없습니다.하지만 설치는 시도해 볼 수 있습니다.vue-cli(새로운 3.x가 아닌 오래된 2.x)를 사용하여 빈 웹 팩템플릿을 초기화합니다.

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

다음으로 에 SFC를 작성할 수 있습니다.src서브폴더, 다음으로 편집src/main.js

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

그리고 나서 달려라npm run build그 결과,dist서브폴더app.jsCSS도 있습니다.웹 팩을 사용하는 방법이 다르기 때문에 이론적으로 추측하고 있습니다.아마 작동했을 겁니다.

언급URL : https://stackoverflow.com/questions/51382358/how-do-you-build-vue-js-single-file-components-and-import-them-when-youre-not-b