Laravel 上带有内联模板的 Vue 2 到 Vue 3

Question

我现在正在尝试从 Vue 2 迁移到 Vue 3 3 天，但我很绝望。 对于我所有的项目，我都使用了这样的内联模板和混合 vue 和 laravel 的刀片，在我的 login.blade.php 视图中使用它：

<div id="app">
<login inline-template>
<div class="container">
    <div class="row justify-content-between">
        <div class="col-md-6 border border border-login">
            <h3 class="text-center mt-3">Přihlášení</h3>
                <div class="text-center">Ještě nemáte účet?</div>
                <div class="text-center"><a href="{{route('vstup-do-akademie.index')}}" class="fw-bolder">Chcete vstoupit do akademie?</a></div>

                <div class="alert alert-success" role="alert" v-if="successlogin">
                    Přihlášení proběhlo úspěšně
                </div>

               

            <div class="mt-3 mb-3">                
                <br><label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" placeholder="Vyplňte Váš email" v-model="email" :class="[error.email ? {'is-invalid': true} : null]">
                <div class="alert alert-danger mt-1" role="alert" v-if="error.email">@{{error.email[0]}}</div>
            </div>
            
                
            <div class="mb-3">
                <label for="password" class="form-label">Heslo</label>
                <input type="password" class="form-control" id="password" placeholder="Vyplňte Vaše heslo" v-model="password" :class="[error.password ? {'is-invalid': true} : null]" v-on:keydown.enter="signin">
                <div class="alert alert-danger mt-1" role="alert" v-if="error.password">@{{error.password[0]}}</div>                
            </div>

            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="rememberme" v-model="remember">
                    <label class="form-check-label" for="rememberme">
                      Zapamatovat si mě
                    </label>
                  </div>                
            </div>
            
            <div class="d-grid gap-2 col-6 mx-auto">                
                <button type="button" class="btn btn-primary" v-on:click="signin"><span v-if="loggining == false">Přihlásit se</span><span v-if="loggining">Probíhá přihlášení, chviličku...</span></button>
            </div>
            <div class="py-2 pb-3 text-center"><a href="/zapomenute-heslo">Zapomenuté heslo?</a></div>
            
        </div>

        <div class="col-md-6">
            <div class="row justify-content-center py-5">
            <h3 class="text-center">Vítejte zpět</h3>
            <span class="text-center">Je skvělé Vás vidět zpět.</span>
            <span class="text-center">Pojďte se s námi vypravit do světa budoucnosti.</span>            
            </div>
            <div class="d-flex justify-content-center"><img src="{{asset('images/website/technologie-budoucnosti-programovani.svg')}}" alt="Technologie budoucnosti - programování" width="350px"></div>
        </div>
       
    </div>
</div>
</login>

并且有这样的 app.js：

require('./bootstrap');

window.Vue = require('vue').default;



Vue.component('registration', require('./components/registration.vue').default);
Vue.component('login', require('./components/login.vue').default);


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

效果非常好，我喜欢这种可以混合使用 VUE + Blade 的访问方式。

现在我升级到 VUE，这是我的 package.json：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.25",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^3.2.33",
        "vue-loader": "^17.0",
        "vue-template-compiler": "^2.6.14"
    },
    "dependencies": {
        "bs5-lightbox": "^1.7.11",
        "vuedraggable": "^4.1.0"
    }
}

还有我的新 app.js：

require('./bootstrap');
import { createApp } from 'vue';
let app=createApp({})
app.component('registration', require('./components/registration.vue').default);
app.component('login', require('./components/login.vue').default);
app.mount("#app")

问题是我在 VUE2 中注册了组件并且刚刚

像这样在组件内部。 这些所有脚本都像地狱一样工作，但是当我升级到 VUE3 时，我注意到它们删除了内联模板，我现在无法让它工作。 OFC 我可以在组件上以某种方式使用，但这对我不利。 有什么方法可以像我以前用它作为内联模板一样使用 VUE？ 我找到了这个解决方案： [https://v3-migration.vuejs.org/break-changes/inline-template-attribute.html][1] 但我不知道如何使用选项，放在哪里： 常量 MyComp = { 模板：'#my-comp-template' // ... } 或者如何使用插槽来实现我正在寻找的东西。 我很困惑，并试图获得 3 天的解决方案，但没有运气。 谁能帮我？多谢 [1]：https://v3-migration.vuejs.org/break-changes/inline-template-attribute.html

Answer 1

你解决了吗？面临同样的问题