javascript - Vue 将单个 .js 文件中的组件拆分为多个文件

Question

我在我的 index.js 中创建了一个组件(我的主要 Vue 代码在其中)。现在我想模块化该项目并将组件放入单独的文件中。我不知道该怎么做，因为如果我创建例如opticalapm.js 主 index.js 返回一个错误，指出它无法找到我包含的 vue 组件 opticalapm 。

如何将组件导入到 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,
    }

});

Answer 1

您应该使用Single File Components ，如文档中所述。在它旁边，阅读此 useful blog post关于使用 SFC。