하나의 .js 파일에서 컴포넌트를 여러 파일로 분할합니다.

하나의 .js 파일에서 컴포넌트를 여러 파일로 분할합니다.

내부 컴포넌트를 작성했습니다.index.js(메인 Vue 코드가 있는 곳).이제 프로젝트를 모듈화하여 컴포넌트를 별도의 파일로 만들고 싶습니다.예를 들어, 예를 들어 제가 만든다면 어떻게 해야 할지 모르겠습니다. optionalapm.js메인index.jsvue 구성 요소를 찾을 수 없다는 오류를 반환합니다.optionalapm내가 포함시켰어

컴포넌트를 로 Import하려면 어떻게 해야 합니까?index.js?

컴포넌트 코드는 다음과 같습니다.

var optionalapm=Vue.component('optionalapm', {
props:['value'],
template:   `<div class="col-l-12 col-m-12 col-s-12 col-xs-emphased" style="background-color: #f9f9f9"">
                <p class="hidden-xl hidden-l hidden-m"></p>
                <p class="hidden-xl hidden-l hidden-m"></p> 
                <h3 style="text-align: center">APM</h3>
                <p>&nbsp;</p>
                <div class="col-l-4">
                    <p style="text-align: center">Number of nodes</p>
                    <div class="form-input-set">
                        <select v-bind:value='value' v-on:input="$emit('input', $event.target.value)" v-on:change="$emit('calcapmprice')" class="form-select" style="background: white">
                            <option value="apmnodes0">
                                <p style="text-align: center">0</p>
                            </option>                                            
                            <option value="apmnodes1">
                                <p style="text-align: center">1</p>
                            </option>
                            <option value="apmnodes2">
                                <p style="text-align: center">2</p>
                            </option>
                            <option value="apmnodes3">
                                <p style="text-align: center">3</p>
                            </option>  
                        </select>
                    </div> 
                </div>
              </div>`,       
})                               

그리고 그게 그 안에 있는 관련 코드야index.js:

var ececontent = new Vue({
    el:'#ece-content',
    data: {
        ...
    },
    methods: {
        ...
    },
    components: {
        optionalapm: optionalapm,
    }

});

설명서에 설명된 대로 단일 파일 구성 요소를 사용해야 합니다.그 옆에 있는 SFC 사용에 관한 이 유용한 블로그 포스트를 읽어보십시오.

이것이 도움이 될 수도 있습니다.https://vuejs.org/v2/guide/single-file-components.html

또한 프로젝트를 모듈화하고 싶다면 js modules https://javascript.info/modules-intro 를 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/60337365/vue-split-components-from-a-single-js-file-in-multiple-files