Question

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

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

我该怎么做？我认为我需要创建一个新的 app.js 文件来管理管理页面？是对还是错？

Answer 1

您无需分别为您的管理页面创建新的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>

Answer 2

我想在下面提供一些很棒的教程：

Build a Guestbook with Laravel and Vue.js

The Ultimate Vue.js & Laravel CRUD Tutorial

振作起来自己动手！

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

2 个答案: