php - Vue 组件在 laravel 6.18.16 中未显示或起床
问题描述
我的 vue 组件没有出现,我看不到哪里出错了,我更改了我的 include app.js 脚本,但仍然是同样的问题。我正在运行 npm run dev 并且我已经清除了我的缓存。
我的 app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('all-product', require('./components/allProduct.vue'));
const app = new Vue({
el: '#app'
});
我的选择vue文件allProduct.vue
<template>
<h1>hello</h1>
</template>
我应该显示 vue 的页面
<div id="app">
<all-product></all-product>
</div>
我的 app.blade.php 文件我在其中包含 js 和 css 文件
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{config('app.name','LSAPP')}}</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}"></script>
<style>
</style>
</head>
<body>
@include('inc.navbar')
@yield('content')
</body>
</html>
得到控制台错误
app.js:38203 [Vue warn]: Cannot find element: #app
warn @ app.js:38203
app.js:38203 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <AllProduct>
<Root
我的 package.json 文件
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"font-awesome": "^4.7.0"
}
}
解决方案
你能把这个添加到刀片文件中吗
<script src="{{ mix('dist/js/app.js') }}"></script>
推荐阅读
- c# - MVVM Combobox 绑定:从/向更多源设置和获取数据
- jquery - Jquery:如何自动将 window.location.hash 应用为与按钮 ID 相同的数字?
- r - r中的散点图具有巨大的独特观察
- datatables - 输入类型搜索清除按钮 Microsoft Edge 无法与数据表一起正常工作
- matlab - 在 Simulink 中以特定时间速率测量信号
- python - 如何打破python中的while循环?
- ruby-on-rails - Rails 5.2,Capybara 推出 Puma 服务器不设置会话 cookie
- firebase - 如何在flutter中从firebase获取数据
- php - 如何在 PHP 中严格设置变量的大小?
- tensorflow - Keras 展平图层输入形状