javascript - Vue 模板未呈现(控制台中没有错误)
问题描述
我目前正在尝试编写多个 .vue 文件,以后可以将其用作 Laravel 刀片语法的模板标签。
我写下了在我的 app.js 中使用 vue 的必要行,注册了我的组件以使用我的文件的语法。
但是,我运行 npm run dev 成功且没有错误。尽管如此,我的 Vue 没有呈现 && Chrome 开发控制台没有显示错误(未检测到 Vue.js)
应用程序.js
require('./bootstrap');
// import Vue from 'vue'
// import VueRouter from 'vue-router'
// import TriviaGame from './components/TriviaGame.vue'
// import Dashboard from './components/Dashboard.vue';
Window.vue = require('vue');
// Vue.use(VueRouter)
// Vue.config.productionTip = false
Vue.component('trivia-game', require('./components/TriviaGame.vue')).default;
Vue.component('dashboard', require('./components/Dashboard.vue')).default;
const app = new Vue({
el:'#app'
})
// const routes = [
// { path: '/', component: Dashboard },
// { path: '/trivia', component: TriviaGame }
// ]
// const router = new VueRouter({
// mode: 'history',
// routes
// })
// new Vue({
// router,
// render: h => h(Dashboard)
// }).$mount('#app')
欢迎.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src="{{asset('js/app.js')}}"></script>
<title>Vue SPA</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<p>This is just an example</p>
<div id="app">
<trivia-game></trivia-game>
</div>
</body>
</html>
解决方案
在解析 dom 之前,你在 head 中的 app.js 正在执行(还没有#app)。
要么把它移到身体的底部
...
<script src="{{asset('js/app.js')}}"></script>
</body>
或添加延迟
<head>
<script src="{{asset('js/app.js')}}" defer></script>
</head>
或者在 dom 内容加载事件中添加 vue 代码
window.addEventListener("load", function(event) {
new Vue({...})
});
推荐阅读
- python-3.x - 来自 PIL 方法的 stat.stddev 是计算图像整体对比度的正确方法吗?
- c# - 是否可以有一个自动填充组合框(在 datagridview 中),它还提供列中所有数据库项的下拉列表?
- c++ - 在 C++14 中计算一年中的小数天
- python-3.7 - Pygame:附加到列表的顺序搞砸了
- java - java.net.SocketException:尝试将对象从客户端传递到服务器时连接重置
- java - Shell 排序比较和交换计数
- c - 如何使用 execle() 为 /bin/login 传递环境变量?
- java - 在 Android 应用程序包名称中使用特殊字符
- php - Git Branch结帐后未将Laravel 5.8会话写入cookie
- json - json-xcode/swift 遇到问题