vue.js — компонент Vue не отображается в базовом переполнении стека

Question

vue.js — компонент Vue не отображается в базовом переполнении стека

Я использую базовый PHP и пытаюсь визуализировать VUE компонент в HTML. Но это всегда показывает пустую страницу. Я не получаю никакой ошибки JS.

Я что-то упустил в коде ниже?

Моя структура каталогов, как показано ниже.

Структура каталогов. Извините, я не могу показать изображение из-за меньшего количества точек повторений.

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>

1

php vue-component vue.js

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

На вашей 3-й строке в app.js, "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>
```

Вы не можете использовать синтаксис .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: {}
});
})

3