vue.js - Laravel 8 和 Vue Js 页面 vue 模板不显示
问题描述
我安装了新的 Laravel 8 和 Vue js。安装npm
and后Vue
,它安装得很好。现在我的问题是当我运行npm run watch
然后加载时,页面是空白的,似乎Vue
没有加载。
我的testapp.vue
:
<template>
<div>
<h1>Hello world! asasasaas</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
我的views/testpage.blade.php
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testpage</title>
</head>
<body>
<div id="app">
<main-app></main-app>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
</html>
我的js/app.js
:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('main-app', require('./components/TestApp.vue').default);
const app = new Vue({
el: '#app'
});
我的webpack.mix.js
:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
// require('postcss-import'),
// require('tailwindcss'),
// require('autoprefixer'),
])
.vue();
我的route/web.php
:
Route::get('/test', [TestController::class, 'index']);
有人可以帮我弄清楚这件事吗?
解决方案
推荐阅读
- wordpress - 可以替换 WP 包含目录吗?
- python - 本地主机在使用瓶子 python 时不工作
- dynamics-crm - 无法将关系添加到解决方案
- microsoft-graph-api - 如何限制应用哪些应用程序权限的用户?
- c# - 为什么默认 Asp.Net Core 引用“cdnjs.cloudflare.com”?
- python - 如果没有输入,哪些 Django 模型字段不会引发 IntegrityError?
- java - Java keytool importcert:非法选项
- angular - Angular Material Sort Header 不会将空值排序到最后
- robotframework - 如何从列表中获取所有项目
- unix - 解析具有多行的文件并用管道替换每个第一次出现