1

在 上Laravel 5.8，我需要将一个项目从Vue2 翻译到 3。

我将组件调整到停止出错的阶段，并且开始显示组件。但！他们是空的。没有方法或内部属性。但是外部道具有效。终端和控制台中没有错误。为什么？如何解决？

应用程序.js：

require('./bootstrap');
/**
 * 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.
 */
import {createApp} from 'vue';

let app = createApp({})


import PrivateOffice from "./PrivateOffice";
app.component('private-office', PrivateOffice);

app.mount("#app");

私人办公室.vue：

<template>
    <div @click="consoleShow" class="myBtn">
        Hello
    </div>
</template>

<script>
    export default {
        name: "PrivateOffice",
        data() {
            return {
                click: 0
            }
        },
        methods: {
            consoleShow() {
                this.click++;
                console.log(this.click)
            }
        }
    };
</script>

<style lang="scss">
    .myBtn {
        padding: 12px;
        background-color: #cdcdcd;
        user-select: none;
        cursor: pointer;

        &:hover {
            background-color: #8A8A8A;
            color: white;
        }
    }
</style>

网络包混合：

const mix = require('laravel-mix');
const webpack = require('webpack');
const path = require('path');

const dotenv = require('dotenv')
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */


mix.override((config) => {
    delete config.watchOptions;
});

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "sass-loader",
                        options: {
                            prependData: `@import "public/scss/abstract.scss";`,
                        },
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: false,
            __VUE_PROD_DEVTOOLS__: false,
        }),
        new webpack.DefinePlugin({
            'process.env': JSON.stringify(dotenv.config().parsed) // it will automatically pick up key values from .env file
        })
    ],
});


mix.alias({
    '@': path.resolve('resources/js'),
    "@model": path.resolve("resources/js/models"),
    "@component": path.resolve("resources/js/components"),
    "@style": path.resolve("resources/js/assets/scss")
})

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

渲染组件： http: //prntscr.com/1zrqkhd

点击一个按钮，什么都没有发生。

4

1 回答 1

0

  1. 我们编写了npm u命令，现在它可以工作了。似乎存在版本冲突，或者缺少某些软件包。

  2. 如果页面上包含多个 ，也会出现类似的问题。app.js

啊哈，用谷歌搜索了我自己的答案：D

于 2021-11-16T14:52:40.880 回答