Vuejs 组件未显示在我的 laravel 刀片中
Posted
技术标签:
【中文标题】Vuejs 组件未显示在我的 laravel 刀片中【英文标题】：Vuejs component not showing in my laravel blade 【发布时间】：2019-10-14 11:16:40 【问题描述】：我正在使用 laravel 和 vue，它无法将组件加载到刀片页面中。它显示为空。
我尝试了很多解决方案，但都不起作用。
welcome.blade
<!doctype html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content=" csrf_token() ">
<script>
window.Laravel = csrfToken: ' csrf_token() '
</script>
<title>App</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css? family=Nunito:200,600" rel="stylesheet">
</head>
<body>
<script type="text/javascripts" src="js/app.js"></script>
<div id ="app">
<div class="container">
<articles></articles>
</div>
</div>
</body>
</html>
Articles.vue
<template>
<div>
<h2>Articles</h2>
</div>
</template>
App.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
import articles from './components/Articles'
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
*/
Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('articles', require('./components/Articles.vue'));
const app = new Vue(
el: '#app',
);
composer.json
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": [
"framework",
"laravel"
],
"license": "MIT",
"require":
"php": "^7.1.3",
"fideloper/proxy": "^4.0",
"laravel/framework": "5.8.*",
"laravel/tinker": "^1.0"
,
"require-dev":
"beyondcode/laravel-dump-server": "^1.0",
"filp/whoops": "^2.0",
"fzaninotto/faker": "^1.4",
"mockery/mockery": "^1.0",
"nunomaduro/collision": "^3.0",
"phpunit/phpunit": "^7.5"
,
"config":
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
,
"extra":
"laravel":
"dont-discover": []
,
"autoload":
"psr-4":
"App\\": "app/"
,
"classmap": [
"database/seeds",
"database/factories"
]
,
"autoload-dev":
"psr-4":
"Tests\\": "tests/"
,
"minimum-stability": "dev",
"prefer-stable": true,
"scripts":
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-root-package-install": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
我希望看到文章为 h2，但它什么也没显示，当我检查元素时，我看到了这个错误
“未捕获的 TypeError：Vue.components 不是函数”。
任何帮助将不胜感激。
【问题讨论】：
【参考方案1】：npm install vuejs 包必须这样显示
然后，在你的 app.js 中
Vue.component('articles', require('./components/Articles.vue').default);
const app =
init()
this.setupVue();
,
setupVue()
new Vue(
el: '#app',
);
;
app.init()
【讨论】：
解决了错误“Uncaught TypeError: Vue.components is not a function”，但没有显示文章@Glenn Carlo Baquero 是的，但仍然没有显示任何内容@Glenn Carlo Baquero 试试这个......在你的主人放这个 在 div #app 的末尾并删除 是的，我仍然什么也没看到，在我的“welcome.blade”中， 显示为红色（在 Visual Studio 中）。 尝试将它运行到你的终端 yarn upgrade laravel-mix 或 npm upgrade laravel-mix 或阅读此laravel-mix.com/docs/4.0/upgrade【参考方案2】：在 laravel 7 项目上从 laravel-mix 5.0.9 更新到 laravel-mix 6.0.11 后，它开始在 vue 编译视图上看到此错误。我改调用Vue包：
使用
import Vue from 'vue'而不是window.Vue = require("vue");为我工作。
Vue.component is not a function 告诉我我没有进行正确的VueJs 调用，这就是为什么找不到component 函数。这个新的导入解决了这个问题。
【讨论】：
以上是关于Vuejs 组件未显示在我的 laravel 刀片中的主要内容，如果未能解决你的问题，请参考以下文章