我目前正在尝试编写多个.vue文件,以后可以与Laravel的Blade语法一起用作模板标签。
我在app.js中写下了使用vue的必要行,注册了组件以使用文件的语法。
但是,我运行npm run dev成功且没有错误。不过,我的Vue没有呈现,&& Chrome开发者控制台没有显示错误(未检测到Vue.js)
app.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')
welcome.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>
答案 0 :(得分:0)
在解析dom之前,您的头部内部的app.js正在执行(尚无#app)。
将其移至身体底部
dplyr
或添加延迟
...
<script src="{{asset('js/app.js')}}"></script>
</body>
或在dom内容加载事件中添加vue代码
<head>
<script src="{{asset('js/app.js')}}" defer></script>
</head>