Создать одностраничное приложение

Laravel 5.4 + Vue 2 + Vuetify + vue-router

Одностраничное приложение (SPA) почти все ресурсы загружаются одновременно (HTML, CSS, JS), и только те данные, которые им требуются, загружаются по запросу, что упрощает взаимодействие с пользователем.

В этом уроке я покажу вам, как легко сделать СПА.

Требования:

"композитор"
Нпм

1. Создайте новый проект Laravel.

Установка - Laravel - PHP-фреймворк для веб-мастеров
Laravel - PHP-фреймворк для веб-мастеров. laravel.com

2. От Bootstrap к Vuetify

Удалите .sass('resources/assets/sass/app.scss', 'public/css') из webpack.mix.js файла.

Удалите jquery из resources/assets/js/bootstrap.js файла.

Отредактируйте package.json и удалитеjquery и bootstrap-sass зависимости.

Запустите npm install и после npm install vuetify --save

Отредактируйте resources/assets/js/app.js и импортируйте Vuetify.

Отредактируйте resources/views/welcome.blade.php файл и замените им все содержимое.

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
        <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>
    <body>
        
        <div id="app">
            <h1>Yey!</h1>
            <v-btn primary>Material Button</v-btn>
        </div>
            
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Запустите npm run dev или npm run watch

3. Создайте компонент макета по умолчанию.

Создайте новый файл vue resources/assets/js/components/home/Index.vue

<template>
    <v-app standalone>
      <v-navigation-drawer persistent :mini-variant.sync="mini" v-model="drawer" overflow>
        <v-toolbar flat class="transparent">
          <v-list class="pa-0">
            <v-list-tile avatar tag="div">
              <v-list-tile-avatar>
                <img src="http://68.media.tumblr.com/avatar_119356c63011_128.png" />
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title>{{ user_name }}</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>
        </v-toolbar>
<v-list class="pt-0" dense>
          <v-divider></v-divider>
              <li v-for="item in items">
                {{ item }}
              </li>
        </v-list>
      </v-navigation-drawer>
<v-toolbar fixed class="blue" dark>
        <v-toolbar-side-icon @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>
        <v-toolbar-title>{{ title }}</v-toolbar-title>
        <v-spacer></v-spacer>
      </v-toolbar>
<main>
        <v-container fluid>
          <slot></slot>
        </v-container>
      </main>
    </v-app>
</template>
<script>
    export default {
        props: ['title', 'user_name', 'items'],
        data () {
          return {
            drawer: true,
            mini: false,
}
        },
    }
</script>

Componentseption: этот компонент использует компоненты vuetify!

Теперь зарегистрируйте компонент:

4. Создайте 3 классных компонента!

Создайте новый файл vue resources/assets/js/components/home/Awesome1.vue

Создайте новый файл vue resources/assets/js/components/home/Awesome2.vue

Создайте новый файл vue resources/assets/js/components/home/Awesome3.vue

<template>
    <div>
        <h3>Component 1</h3>
        <h2>This is the best component ever!</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus totam atque nemo repellat, necessitatibus ab placeat veritatis iste inventore consequuntur ratione quo aliquid fuga aperiam odit possimus temporibus sed.</p>
    </div>
</template>
<script>
    export default {
        mounted() {
            console.log('Component 1 mounted.')
        }
    }
</script>

Конечно, вы должны изменить шаблон, чтобы увидеть изменения между компонентами.

5. Настроить vue-router.

Беги npm install vue-router --save

Импортировать VueRouter:

Импортируйте все свои потрясающие композиции и создайте массив маршрутов.

vue-router нужны только path и component, но мы можем использовать этот же массив для заполнения меню в домашнем компоненте.

Удалите компоненты h1 и v-btn из welcome.blade.php и добавьте <router-view></router-view>. В этом месте будут загружены компоненты.

И измените жестко запрограммированный массив на routes.

Отредактируйте шаблон домашнего компонента и добавьте ссылку на маршрутизатор:

<router-link :to="item.path" class="list__tile" exact>
                  <v-list-tile-action>
                    <v-icon>{{ item.icon }}</v-icon>
                  </v-list-tile-action>
                  <v-list-tile-content>
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile-content>
                </router-link>

И все 🙂

Источник: https://github.com/hhfa1990/single_page_application

Как видим, создать одностраничное приложение с нуля несложно.

Конечно, у использования этой техники есть свои преимущества и недостатки, вы должны знать, когда ее использовать, а когда нет. 🤔