如何从 laravel 刀片加载 vuejs 组件？

Posted 2023-02-16

【中文标题】如何从 laravel 刀片加载 vuejs 组件？

【英文标题】：how to load vuejs component from laravel blade?

【发布时间】：2020-03-28 14:34:11

【问题描述】：

我有多个 auth laravel 仪表板。当我登录默认页面时，会将我重定向到客户端仪表板刀片。当我在客户端刀片中写一些东西时。它没有显示任何东西。我正在使用 vuejs 路由器。一切都很完美。我试图在那个刀片中调用组件，但它仍然显示空白。我想重定向到仪表板组件。

控制器： 我尝试使用返回 url('url here') 但仍然不适合我。

public function index()
    
        return view('client');
    

客户端刀片：

@extends('layouts.master')
@section('content')

    <template>
        <div class="container-fluid">
            <client_details></client_details>
        </div>
    </template>

    <script>

        import clientdetails_header from "./clientdetails_header.vue";

        export default 

            data() 

                return 
                
            ,
            components: 
                'client_details': clientdetails_header
            ,

            mounted() 
                console.log('Component mounted.')
            
        
    </script>

@endsection

大师之刃：

<ul>
  <li>
        <router-link to="/clientdashboard" title="dashboard">
         <span class="nav-link-text"><iclass="fal fa-user"></i>DashBoard</span>
        </router-link>
  </li>
</ul>
<div class="page-wrapper" id="app">
    <div class="page-content">
         <router-view>
         </router-view>
    </div>
</div>

App.js

let routes = [
    path: '/clientdashboard', component: require('./components/clientdashboard.vue').default,
]

const app = new Vue(
    el: '#app',
    router,

);

const router = new VueRouter(
    mode: "history",
    routes 
)

客户端标头：

<template>
        <div class="row">
            <div class="col-xl-12">
                <!-- Collapse -->
                <div id="panel-6" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            Client Details
                        </h2>
                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <div class="row">
                                <div class="col-md-2">
                                    <span><b>Company name:</b></span> <br>
                                    <span><b>Company ABN:</b></span> <br>
                                    <span><b>Company address:</b></span> <br>
                                    <span><b>Company phone:</b></span> <br>
                                    <span><b>Company email:</b></span> <br>
                                </div>
                                <div class="col-md-10">
                                    <ul style="list-style: none;" class="list-group list-group-flush">
                                        <li style="text-decoration: none" v-for="todo in clientData">todo</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
    export default 

        data() 
            return 
                user_id: this.$userId,
                clientData: 
            
        ,
        methods: 
            getClientDetails() 

                axios.post(this.$path + 'api/getClientDetails', null,
                    
                        params: 
                            'client_id': this.user_id,
                        
                    )
                    .then(data => (
                        this.clientData = data.data));
            
        ,
        mounted() 
            this.getClientDetails();
            console.log('Component mounted.')
        
    
</script>

【问题讨论】：

hmmm 你能添加你如何安装 Vue 的代码吗？

@Eli 好的，我已经添加了组件。

hmmmm... 我所说的实例化的意思是你在哪里创建新的 Vue 实例。你在任何时候都有new Vue 实例化吗？

在 App.js 文件中

` el: '#app',` 你的应用元素在哪里？

【参考方案1】：

我认为将 Vue 代码直接放在刀片中并不是一个好主意。

我建议您创建一个Client.vue 并将您的代码放入其中。在 app.js 的路由中注册它。

...
path: '/client', component: require('./components/Client.vue'),

然后您可以在客户端刀片中使用该组件。

<client></client>

我相信这将是解决此问题的第一步。

【参考方案2】：

在你的blade.php的<head>部分加载你的app.js

<script src=" asset('js/app.js') " async></script>\

还在那里创建一个 id 为 app 的 div。

<body>
    <div id="app"></div>
</body>

创建 App.vue

<template>
  <div>
    <router-view />
  </div>
</template>

<style scoped lang="scss">
</style>

进入 resources/js/app.js 文件，你会看到 laravel 已经在里面放了实例化 vue 的代码。注册您的路线等。

但对我来说，我创建了一个新文件夹 resources/js/vue，将所有与 vue 相关的文件（组件、路由、过滤器、vuex、mixins、指令）放在那里，创建 index.js 并移动代码以在里面启动 vue index.js。

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import components from './components'
import directives from './directives'
import mixins from './mixins'
import filters from './filters'

Vue.use(router)
Vue.use(store)
Vue.use(components)
Vue.use(directives)
Vue.use(mixins)
Vue.use(filters)

new Vue( router, store, render: h => h(App) ).$mount('#app')

export default 

资源/js/app.js

require('./vue')
// I also initiate service-worker, firebase, and other non vue related
// javascripts in this file