Question

使用Laravel Homestead和Vagrant，我刚刚产生了一个新的laravel项目。在使用npm install和Laravel附带的所有其他默认前端库的新vue期间，我收到以下警告：

npm WARN弃用了gulp-util@3.0.8：gulp-util已被弃用 - 替换它遵循以下指南 https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

最初我没有想到这个警告，但在快速设置默认的脚手架Vue示例环境后，Laravel在浏览器中附带并运行应用程序，我收到以下控制台错误：

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <ExampleComponent>
       <Root>

HTML

<!doctype html>
<html class="en" lang="{{ app()->getLocale() }}">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>{{ config('app.name', 'Laravel') }}</title>
      <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  </head>
  <body>
    <div id="app">
        <example-component></example-component>
    </div>
  </body>
   <script src="{{ mix('js/app.js') }}"></script>
</html>

APP.JS

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

的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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "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.18",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
    }
}

Laravel-Mix JS

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

似乎是什么问题？

Answer 1

好的，所以我继续安装了新的副本。我得到了同样的错误（除了我没有得到gulp弃用通知，所以这必须是你可能全局安装的东西）。

根据this answer我在app.js中的require语句之后添加了.default并开始工作：

...
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
...

由于require(..)是ES6之前的版本，我建议改为使用ES6语法：

import Vue from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

window.Vue = Vue;

Vue.component('example-component', ExampleComponent);

const app = new Vue({
    el: '#app'
});

使用Vue和Laravel的神秘问题？

1 个答案: