使用 Vue.js 的 Laravel 6.6 项目中未显示模板

Question

I made the basic installation from Vue.JS in my Laravel project, this is my 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",
        "cross-env": "^5.1",
        "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": "7.*",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

So I run this code that everyone does after installation npm run install && npm run dev for the mix from Laravel generate the files, every tutorial say that I must put this in the footer from my main file

<script src="{{ asset('js/app.js') }}"></script>

And always say that the file doesn't exist, it is true because when I run this command from mix above, this simple make a js and a css folder in a new public folder, this is the right approach? because I don't see any tutorial that this command makes a public folder, see the image below:

So when I explicitly put this path:

<script src="{{ asset('public/js/app.js') }}"></script>

My Vue.js is loaded and I see the default text from Vue.js in console, but when I put the template from this file TesteFood.vue

<template>
    <h1>Testando VUE</h1>
</template>

Is not showing and I make this command too npm run watch no success.

Answer 1

尝试mix助手功能：

<script src="{{ mix('js/app.js') }}"></script>

Answer 2

I simply reinstall all my Laravel and install Vue.js and don't move the public folder and all is working fine.

Thank you all!

Answer 3

when you install the laravel 6, then run this command composer require laravel/ui --dev for integrating all vue js dependencies, then create your component and register that in app.js file like this :

Vue.component('teste-food', require('./components/TesteFood.vue')); and then run npm run dev for compiling once the codes or npm run watch for compiling anythime you add some vue.js file or sass in your porject. In this steps you should see your component.