Laravel의 Quasar Framework

최근의 나는 라벨의 앞부분인 Vue를js(Vuex, Vue Router, Vuetify)로 썼습니다.
Vuetify는 구성 요소가 풍부하고 편리하지만 간혹 다른 UI 프레임워크를 사용하고 싶습니다.
찾아보니 Quasar Framework가 있습니다.
Build high-performance VueJS user interfaces in record time
https://quasar.dev/
따라서 이번에는 Laravel에서 Quasar Framework를 사용하여 UI 설치를 진행할 것입니다.
Laravel의 버전은 6.8.0입니다.

준비

$ composer create-project --prefer-dist laravel/laravel lara-quasar
$ cd lara-quasar
$ composer require laravel/ui --dev
$ php artisan ui vue --auth
$ yarn install
$ yarn add quasar --dev
$ yarn add quasar-extras --dev
$ yarn run watch

Quasar 가져오기

기본 가져오기 resources/js/bootstrap.js 를 삭제합니다.
resources/js/app.js

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);


// Quasar Framework
import Quasar from 'quasar';
import 'quasar/dist/quasar.sass';
import 'quasar-extras/material-icons';

Vue.use(Quasar);


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

뷰 변경

배치를 바꾸어 보아라.
읽기 css/app.css를 삭제합니다.
resources/views/layouts/app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSRF Token -->
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>{{ config('app.name', 'Laravel') }}</title>
  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}" defer></script>
  <!-- Fonts -->
  <link rel="dns-prefetch" href="//fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>
<body>
  <div id="app">
    <q-layout view="hHh lpr fFf" container style="height:100vh">
      <q-header elevated>
        <q-toolbar>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>

          <q-toolbar-title>Quasar Framework</q-toolbar-title>
        </q-toolbar>
      </q-header>

      <q-footer elevated>
        <q-toolbar>
          <q-toolbar-title>Footer</q-toolbar-title>
        </q-toolbar>
      </q-footer>

      <q-page-container>
        <q-page class="q-pa-md">

          @yield('content')

        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</body>
</html>

<q-layout>중<q-header>,<q-footer>,<q-page-container>의 구조가 있다.<q-layout view="hHh lpr fFf" container style="height:100vh">의 주문 같은hHh lpr fFf, 구조 구조의 정의인 것 같다.
다음 링크에서 이해하십시오...
사용자 로그인 화면의 보기는 다음과 같습니다.
그러나 데이터 귀속은 이루어지지 않았습니다.
resources/views/auth/register.blade.php

@extends('layouts.app')

@section('content')
<div class="row justify-center">
  <div class="col-4">
    <q-card>
      <q-card-section>
        <div class="text-h6">{{ __('Register') }}</div>
      </q-card-section>

      <q-separator></q-separator>

      <q-card-section>
        <q-input name="name" label="{{ __('Name') }}">
          <template v-slot:prepend>
            <q-icon name="person" />
          </template>
        </q-input>

        <q-input label="{{ __('Email') }}">
          <template v-slot:prepend>
            <q-icon name="email" />
          </template>
        </q-input>

        <q-input type="password" label="{{ __('Password') }}">
          <template v-slot:prepend>
            <q-icon name="lock" />
          </template>
        </q-input>

        <q-input type="password" label="{{ __('Confirm Password') }}">
          <template v-slot:prepend>
            <q-icon name="lock" />
          </template>
        </q-input>
      </q-card-section>

      <q-card-actions>
        <q-btn color="primary" label="{{ __('Register') }}"></q-btn>
      </q-card-actions>
    </q-card>
  </div>
</div>
@endsection

괜찮은 것 같죠?

지금 가장 고민되는 것은 구성 요소 라벨의 접두사는 q입니다. 키보드의 q를 많이 두드리기 위해 왼손의 새끼손가락은 피곤합니다

(1과tab은 분명히 힘들지 않습니다...)

참조 URL

https://quasar.dev/
https://qiita.com/SatoTakumi/items/19222f6e74f53043d6a1

Reference

이 문제에 관하여(Laravel의 Quasar Framework), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kiyc/items/29a5cd866dfb936e9dd4

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다