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

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

振作起来DIY！