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

Question

I create a website with Laravel and Vue.js .

I has created a public page for user. And now I want to create an admin page. In the public page, I used app.js of Vue.js to manage that page. And now I want to manage admin page with Vue.js , too.

How can I do that? I think I need to create a new app.js file to manage admin page? It is right or wrong?

Answer 1

You dont need to create a new app.js for your admin page seperatly , instead you call the app.js which is the vuejs framework it self and make a new component or components for admin panel like below :

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

and here 2 components in your

resource/js/components

name them like :

admin.vue

and

public.vue

write any thing in them like this :

    <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>

and now in your admin part you would write

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

and in your public the same

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

and last dont forget to register your components so in app.js do like this :

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

Hope This Helps.

EDIT as you said in comments that u need to work with vue.router here is what you can do : simple just install vue and add it like below :

    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
    }
  ]
})

and in your component you simply add the router :

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