Vue 将组件从单个 .js 文件拆分到多个文件中

Question

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

如何将组件导入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 的内容。

Answer 2

这可能会有用https://vuejs.org/v2/guide/single-file-components.html

如果你想模块化项目，你可以使用js模块https://javascript.info/modules-intro