Как создать новый App.js из Vue js в Laravel?

Question

Я создаю сайт с Laravel и Vue.js.

Я создал публичную страницу для пользователя.И теперь я хочу создать страницу администратора.На общедоступной странице я использовал app.js из Vue.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);

Надеюсь, это поможет.

EDIT как вы сказали в комментариях, что вам нужно работать с 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>