时间戳

首页 > 解决方案 > 如何在 Laravel 中新建 Vue js 的 App.js？

laravel - 如何在 Laravel 中新建 Vue js 的 App.js？

问题描述

Laravel我用和创建了一个网站Vue.js。

我为用户创建了一个公共页面。现在我想创建一个管理页面。在公共页面中，我使用了app.js来Vue.js管理该页面。现在我也想用 管理管理页面Vue.js。

我怎样才能做到这一点？我想我需要创建一个新的app.js文件来管理管理页面？这是对还是错？

标签： laravelvue.js

解决方案

您不需要为您的管理页面单独创建一个新的 app.js，而是调用 app.js，它是它自己的 vuejs 框架，并为管理面板创建一个或多个新组件，如下所示：

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

这里有 2 个组件

resource/js/components

将它们命名为：

admin.vue

和

public.vue

像这样在其中写任何东西：

    <template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    <script>
        export default {
            mounted() {
                console.log('Component mounted.')
            }
        }
    </script>

现在在你的管理部分你会写

<admin></admin> // this will call the admin.vue component

在你的公众中也是一样

<public></public> //this will call the public.vue component

最后不要忘记注册你的组件，所以在 app.js 中这样做：

Vue.component('admin', require('./components/admin.vue').default);
Vue.component('public', require('./components/public.vue').default);

希望这可以帮助。

编辑 正如你在评论中所说的你需要使用 vue.router 这是你可以做的：简单，只需安装 vue 并添加它，如下所示：

    import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/admin'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'admin',
      component: admin
    }
  ]
})

在您的组件中，您只需添加路由器：

    <router-link :to="{ name: 'Hello' }">Home</router-link>

推荐阅读