Vue组件未在基本php中呈现答案

【问题标题】：Vue component not rendering in basic phpVue组件未在基本php中呈现
【发布时间】：2019-01-20 01:00:41
【问题描述】：

我正在使用基本的 php 并尝试在 html 中呈现 vue 组件。但它总是显示空白页。我没有收到任何 js 错误。

我是否遗漏了以下代码中的任何内容？

我的目录结构如下。

Directory Structure. I am sorry, unable to show image due to less rep points.

app.js 位于公共文件夹中。下面是代码

Vue.component("login", ("loginComponent.vue"));
var app = new Vue({
    el: "app",
    data: {

    },
    mounted: function() {
        console.log("Mounted");
    },
    methods: {

    }
});

组件代码存在于 loginComponent.vue 文件中

<template>
    <div>
        <form role="form" class="row">
            <label for="Email Address" class="control-label">UserName</label>
            <input type="text" name="Email Address" class="form-control">

            <label for="Password" class="control-label">Password</label>
            <input type="password" name="Password" class="form-control">

            <button type="button" class="btn btn-primary" >
                Login
            </button>
        </form>
    </div>
</template>

loginView.php 文件代码如下。

<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>        
        <script src="./public/js/app.js"></script>
    </head>
    <body>
        <div id="app"> 
            <login></login>
        </div>
    </body>
</html>

【问题讨论】：

loginComponent.vue 或 login.vue ?
对不起，让我解释一下目录结构。共有3个文件。 1. loginComponent.vue 2. loginView.php 和 app.js
我读到了。您在第一个代码中注册Vue.component("login", ("./components/Auth/login.vue"));，在第二个代码中您谈论loginComponent.vue？！
对不起，我输入了错误的路径。我现在已经更正了路径。
您不应键入代码，而应粘贴您现有的代码。无论如何，由于您的app.js 位于public/js 并且您的组件位于根目录中，您是否尝试过Vue.component("login", ("../../loginComponent.vue"));？

标签： php vue.js vue-component

【解决方案1】：

在 app.js 的第 3 行，"app" 不是有效的选择器，请尝试使用 "#app"。

编辑：有 3 件事需要解决。

你没有加载 loginComponent.vue loginComponent.vue 未加载到您的浏览器中。你需要在loginView.php中添加一个脚本标签。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="loginComponent.vue"></script>
<script src="app.js"></script>

你不能在没有 webpack 的情况下使用 .vue 语法。你的loginComponent.vue 作为 javascript 运行，这意味着 <template> 标签不可用，您必须将模板设置为字符串。

var loginComponent = { 
template: `
  <div>
    <form role="form" class="row">
      <label for="Email Address" class="control-label">UserName Or EmailAddress</label>
      <input type="text" name="Email Address" class="form-control">

      <label for="Password" class="control-label">Password</label>
      <input type="password" name="Password" class="form-control">

      <button type="button" class="btn btn-primary" >
        Login
      </button>
    </form>
  </div>
`,

您必须等待 DOMContentLoaded 才能安装应用程序。在 app.js 中，

Vue.component("login", loginComponent);
document.addEventListener('DOMContentLoaded', function () {
    var app = new Vue({
        el: "#app",
        data: {},
        mounted: function () {
            console.log("Mounted");
        },
        methods: {}
    });
})

【讨论】：

对不起，它仍然没有从组件渲染html。
你能试试上面有问题的文件吗？如果这对你有用？
您的控制台上是否有任何错误或警告？当我尝试时，我得到了[Vue warn]: Invalid Component definition: loginComponent.vue
应用上述代码后出现错误：截图如下：i.stack.imgur.com/VxT1R.png
抱歉，我误解了您的设置。如果没有像 webpack 这样的构建工具，你就不能使用单个文件组件（.vue 文件）。