Vuejs2 Vue.js的正确方式是什么；扩展；用法？

在试用Vue.js 2时，我做了一个小项目并尝试导入一个组件，但浏览器中有一个空页面。我想使用“扩展”来尝试以下示例：

因此，我的main.js如下所示：

import Vue from 'vue'
import WorkZone from './components/WorkZone.vue'
import App from './App.vue'

var vm = new Vue({
    el: '#app',
    components: {
      'work-zone': WorkZone,
      'app': App
    }
});

My App.vue文件：

<template>
  <div id="app">
    <work-zone></work-zone>
  </div>
</template>

<script>
    import WorkZone from './components/WorkZone.vue';
    export default {
        name: 'app',
        components: {
            'work-zone': WorkZone
        },
        data() {
          return {}
        },
        methods: {}
    };
</script>

var WorkZone = Vue.extend({
    template: `
    <div id="work-zone">
        <div id="wrapper"></div>
    </div>`,
    data() {
        return {
            tabItems: [{
                title: 'Главная страница',
                project: 'Текст главная страница',
                done: false,
            }],
        };
    },
    methods: {
        createTab: function(newTab) {
            this.tabItems.push(newTab);
        }
    }
});

从“./components/WorkZone.vue”导入工作区；
导出默认值{
名称：“应用程序”，
组成部分：{
“工作区”：工作区
},
数据（）{
返回{}
},
方法：{}
};

My WorkZone.vue文件：

<template>
  <div id="app">
    <work-zone></work-zone>
  </div>
</template>

<script>
    import WorkZone from './components/WorkZone.vue';
    export default {
        name: 'app',
        components: {
            'work-zone': WorkZone
        },
        data() {
          return {}
        },
        methods: {}
    };
</script>

var WorkZone = Vue.extend({
    template: `
    <div id="work-zone">
        <div id="wrapper"></div>
    </div>`,
    data() {
        return {
            tabItems: [{
                title: 'Главная страница',
                project: 'Текст главная страница',
                done: false,
            }],
        };
    },
    methods: {
        createTab: function(newTab) {
            this.tabItems.push(newTab);
        }
    }
});

var WorkZone=Vue.extend({
模板：`
`,
数据（）{
返回{
选项卡项目：[{
标题：“Гаааааааааааааа，
项目：“ааааааааааааа”项目，
完成：错误，
}],
};
},
方法：{
createTab:函数（newTab）{
此.tabItems.push（newTab）；
}
}
});

其想法是，稍后将有一个带有按钮的侧边栏。每个按钮将在工作区或页面上的任何其他组件中添加一个元素。我希望这个函数（例如“function addElem（）”）可以在任何组件中访问

main.js

 var WorkZone = Vue.extend({
        template: `
        <div id="work-zone">
            <div id="wrapper">
            <ul v-for="item in tabItems">
            <li>{{ item.title }}</li>
            </ul>
            <button @click="createTab({title: 'Hello', project: 'World', done: false})">Create Tab</button>
            </div>
        </div>`,
        data() {
            return {
                tabItems: [{
                    title: 'Главная страница',
                    project: 'Текст главная страница',
                    done: false,
                }],
            };
        },
        methods: {
            createTab: function(newTab) {
                this.tabItems.push(newTab);
            }
        }
    });

    var vm = new Vue({
        el: '#app',
        components: {
          'work-zone': WorkZone
        }
    });

var WorkZone=Vue.extend({
模板：`

{{item.title}

创建选项卡
`,
数据（）{
返回{
选项卡项目：[{
标题：“Гаааааааааааааа，
项目：“ааааааааааааа”项目，
完成：错误，
}],
};
},
方法：{
createTab:函数（newTab）{
此.tabItems.push（newTab）；
}
}
});
var vm=新的Vue({
el:“#应用程序”，
组成部分：{
“工作区”：工作区
}
});

您的html文件：

<div id="app">
   <work-zone></work-zone>
</div>

页面main.js runs on上是否存在id为

app

的元素？出现id为=“app”的根组件。它是空的。现在我尝试添加Vue.component（'work-zone'，WorkZone）；将main.js更改为var bizon=new vue（{el:'#app'，模板：''，组件：{app'，work zone'：WorkZone}，}）；出现工作区，但装载组件失败，错误：未定义模板或呈现函数。能否显示页面的HTML？其次，在这种情况下，不需要

Vue.extend

。您的WorkZone.vue文件应该看起来像您的App.vue文件，带有模板和脚本部分。屏幕截图：我认为您试图将vue组件附加到App.vue中的元素，这是错误的，无法工作。main.js文件应该位于包含元素（id=app）的父文件中。你根本不需要应用程序组件，它是无关的。