动态组件元素在 Vue.js 中不起作用答案

【问题标题】：Dynamic Component Element Not Works in Vue.js动态组件元素在 Vue.js 中不起作用
【发布时间】：2015-10-18 23:22:14
【问题描述】：

我遇到了一个让我发疯的问题。我尝试制作一个动态组件但它不起作用。 Vue 检测到我的第一个和第二个组件，但它没有检测到其他组件。

这是我的索引 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kamuran Vue Test</title>
</head>
<body>
    <app-header>
</app-header>
test
    app-header

    <app-header></app-header>

    <component is="{{view}}"></component>


    <app-footer></app-footer>


    <app-form form="login"></app-form>

</body>
<script src="build.js"></script>
</html>

也是我的 main.js

var $    = require('jquery')
var page = require('page')
var Vue = require('vue')

var vue = new Vue({
  el: 'html', 
  data: {
    view: 'home'
  },
  components: {
    'app-footer'   :   require('./components/footer'),
    'app-header'   :   require('./components/header'),
    'app-form'     :   require('./components/form'),
    'home'         :   require('./views/home'),
    'login'        :   require('./views/logins'),
    'contact'      :   require('./views/contact')
  } 
});

page("*", function(ctx){
  if(ctx.path != "/"){
    vue.view = ctx.path.substr(1);
  } else {
    vue.view = "home"
  }

  console.log(vue.view)

});
page();

在构建 build.js 或控制台时，我看不到任何关于 js 的错误警告。

元素不起作用，即使我将其值设置为 app-header。

app-header 和 app-footer 完美地使用它们作为元素，但其他组件不起作用。是否有其他软件包可以使用它们？

出了什么问题，我不明白。

【问题讨论】：

标签： javascript components vue.js

【解决方案1】：

终于，我找到了答案。当我构建“build.js”时，我使用了 browserify。它导致了问题。清除我所有的节点模块并使用 webpack 重新安装它们，然后我重新构建 js 文件并解决问题。

【讨论】：