Laravel6계에 Vuetify를 넣어 본다
이번에는 내가 어려움을 겪었을 때 뭉개지는 Laravel에 대해 이야기 할 것입니다.
그건 그렇고, 저는 인프라 엔지니어입니다. 메인은.
목적
Laravel6에 Vuetify를 도입하고 싶습니다.
Laravel6 보다 Vue.js 등이 표준 라이브러리에서 벗어났기 때문에, Laravel5 이전의 기사에서는 그대로 도입을 할 수 없게 되었습니다.
매번 도입하고 있을 때 복수의 기사를 보면서, 도입하고 있으므로 비망록도 할 수 있어.
Vuetify란?
공식 HP
Vue.js의 구성 요소 모음입니다.
버튼이나 테이블 등을 그릴 때의 컴퍼넌트가 모여 있으므로,
현대적인 디자인을 쉽게 만들 수 있습니다.
환경
OS: Windows 10 Pro
PHP: 7.3.10
Composer 설치
Laravel에서 사용하는 패키지 관리에 사용합니다.
여러분 아시네요. 대부분은 말하지 않습니다.
Composer 설치 절차(Windows) 를 참고했고.
node.js 설치
node.js 자체를 서버로 사용할 수도 있지만 Laravel에서는 주로 Vue.js
빌드를 목적으로 이용합니다.
여러분 아시네요. 대부분은 말하지 않습니다.
Node.js/npm 설치(for Windows) 를 참고했고.
내 환경에서는 버전이 아래였습니다.
node --version
v12.13.0
npm --version
6.12.0
Laravel 설치
여러분 아시네요. 대부분은 말하지 않습니다.
composer create-project laravel/laravel --prefer-dist <PROJECT NAME>
이제 현재 디렉토리 아래에 PROJECT_NAME 폴더가 만들어집니다.
그 부하에 Laravel이 도입된 상태가 되고 있습니다.
Vue.js 설치
앞에서 언급했듯이 Laravel5 이전이라면이 상태에서 npm installVue.js 를 도입할 수 있었습니다만, Laravel6 이후에서는 한마디 필요합니다.
한 번의 수고가 요리를 맛있게 하는 것과 같이 한 번의 수고가 Laravel을 맛있게 합니다. (몰라
# プロジェクトフォルダへ移動
cd <PROJECT NAME>
# 必要なライブラリをインストール
composer require laravel/ui
# 私は Vue を使うねん！と宣言
php artisan ui vue
# おら！
npm install
이것으로 Vue.js 배포가 완료됩니다.
Laravel5 이전에 npm install를 두드린 상태와 같습니다.
Vuetify 설치
Vuetify는 npm (Node.js의 패키지 관리 도구)을 사용하여 설치합니다.
(아니, 그 커맨드 아까 사용하고 있었는데 지금 더 설명할까.)
# Vuetify の最新パッケージのインストール
npm install vuetify
설치가 끝나면 Laravel 측에서 Vuetify를 사용하도록 설정합니다.
resoureces/js/app.js/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
/**
* 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);
/**
* 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',
vuetify: new Vuetify(),
});
이제 Laravel에서 Vuetify를 사용할 수 있습니다.
실천
그럼, 실제로 Vuetify 를 사용한 페이지를 만들어 봅시다.
원래 준비된 샘플 파일을 다시 작성해 봅니다.
resources\js\components\ExampleComponent.vue<template>
<v-app>
<v-container>
<v-row>
<v-col>
<v-card class="mx-auto">
<v-card-text>
<p class="text--primary">
Hello Vuetify World!!
</p>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn>やったね！！</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<v-app>
<!-- これがさっき修正したファイル -->
<example-component></example-component>
</v-app>
</div>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
그런 다음 Vue.js 빌드와 Laravel을 시작합니다.
각 명령 모두 실행 상태가 계속되므로 두 개의 프롬프트로 작업을 수행하십시오.
# Laravel の起動
php artisan serve
Laravel development server started: http://127.0.0.1:8000 # これが出ればOK
# ビルドコマンドを発行。watch にしておくと変更を検知して勝手にビルドしてくれるので楽。
npm run watch
DONE Compiled successfully in XXXms # これが出ればOK
각각이 기동하면 http://localhost:8000/ 에 접속해 봅시다.
아래와 같은 페이지가 표시되어 있으면 OK입니다.
요약
Laravel6에서 비표준 Vue.js 설치까지 가면,
나중에 Laravel5와 비슷한 방식으로 Vuetify를 사용할 수 있습니다.
나는 지금까지 element-ui를 주로 사용하고 있었지만, 이번에는 Vuetify를 이용한다는 기사를 써 보았습니다.
왜 바꾸고 싶니? 질리기 때문입니다.
다만, 실제로 Vuetify를 사용해 보았던 것은 디자인 등은 매우 좋아했습니다.
테이블에 관해서도 element-ui 보다 유연하고 좋았습니다.
다만, timepicker의 디자인이 불만이었던 것과 element-ui의 datetimepicker가 진짜 신이라고 느꼈습니다.
그럼 여러분, 좋은 Vuetify 라이프를 보내주십시오.
Reference
이 문제에 관하여(Laravel6계에 Vuetify를 넣어 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ktoshi/items/5fd7a11cbc00b70c2db1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
공식 HP
Vue.js의 구성 요소 모음입니다.
버튼이나 테이블 등을 그릴 때의 컴퍼넌트가 모여 있으므로,
현대적인 디자인을 쉽게 만들 수 있습니다.
환경
OS: Windows 10 Pro
PHP: 7.3.10
Composer 설치
Laravel에서 사용하는 패키지 관리에 사용합니다.
여러분 아시네요. 대부분은 말하지 않습니다.
Composer 설치 절차(Windows) 를 참고했고.
node.js 설치
node.js 자체를 서버로 사용할 수도 있지만 Laravel에서는 주로 Vue.js
빌드를 목적으로 이용합니다.
여러분 아시네요. 대부분은 말하지 않습니다.
Node.js/npm 설치(for Windows) 를 참고했고.
내 환경에서는 버전이 아래였습니다.
node --version
v12.13.0
npm --version
6.12.0
Laravel 설치
여러분 아시네요. 대부분은 말하지 않습니다.
composer create-project laravel/laravel --prefer-dist <PROJECT NAME>
이제 현재 디렉토리 아래에 PROJECT_NAME 폴더가 만들어집니다.
그 부하에 Laravel이 도입된 상태가 되고 있습니다.
Vue.js 설치
앞에서 언급했듯이 Laravel5 이전이라면이 상태에서 npm installVue.js 를 도입할 수 있었습니다만, Laravel6 이후에서는 한마디 필요합니다.
한 번의 수고가 요리를 맛있게 하는 것과 같이 한 번의 수고가 Laravel을 맛있게 합니다. (몰라
# プロジェクトフォルダへ移動
cd <PROJECT NAME>
# 必要なライブラリをインストール
composer require laravel/ui
# 私は Vue を使うねん！と宣言
php artisan ui vue
# おら！
npm install
이것으로 Vue.js 배포가 완료됩니다.
Laravel5 이전에 npm install를 두드린 상태와 같습니다.
Vuetify 설치
Vuetify는 npm (Node.js의 패키지 관리 도구)을 사용하여 설치합니다.
(아니, 그 커맨드 아까 사용하고 있었는데 지금 더 설명할까.)
# Vuetify の最新パッケージのインストール
npm install vuetify
설치가 끝나면 Laravel 측에서 Vuetify를 사용하도록 설정합니다.
resoureces/js/app.js/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
/**
* 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);
/**
* 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',
vuetify: new Vuetify(),
});
이제 Laravel에서 Vuetify를 사용할 수 있습니다.
실천
그럼, 실제로 Vuetify 를 사용한 페이지를 만들어 봅시다.
원래 준비된 샘플 파일을 다시 작성해 봅니다.
resources\js\components\ExampleComponent.vue<template>
<v-app>
<v-container>
<v-row>
<v-col>
<v-card class="mx-auto">
<v-card-text>
<p class="text--primary">
Hello Vuetify World!!
</p>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn>やったね！！</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<v-app>
<!-- これがさっき修正したファイル -->
<example-component></example-component>
</v-app>
</div>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
그런 다음 Vue.js 빌드와 Laravel을 시작합니다.
각 명령 모두 실행 상태가 계속되므로 두 개의 프롬프트로 작업을 수행하십시오.
# Laravel の起動
php artisan serve
Laravel development server started: http://127.0.0.1:8000 # これが出ればOK
# ビルドコマンドを発行。watch にしておくと変更を検知して勝手にビルドしてくれるので楽。
npm run watch
DONE Compiled successfully in XXXms # これが出ればOK
각각이 기동하면 http://localhost:8000/ 에 접속해 봅시다.
아래와 같은 페이지가 표시되어 있으면 OK입니다.
요약
Laravel6에서 비표준 Vue.js 설치까지 가면,
나중에 Laravel5와 비슷한 방식으로 Vuetify를 사용할 수 있습니다.
나는 지금까지 element-ui를 주로 사용하고 있었지만, 이번에는 Vuetify를 이용한다는 기사를 써 보았습니다.
왜 바꾸고 싶니? 질리기 때문입니다.
다만, 실제로 Vuetify를 사용해 보았던 것은 디자인 등은 매우 좋아했습니다.
테이블에 관해서도 element-ui 보다 유연하고 좋았습니다.
다만, timepicker의 디자인이 불만이었던 것과 element-ui의 datetimepicker가 진짜 신이라고 느꼈습니다.
그럼 여러분, 좋은 Vuetify 라이프를 보내주십시오.
Reference
이 문제에 관하여(Laravel6계에 Vuetify를 넣어 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ktoshi/items/5fd7a11cbc00b70c2db1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Laravel에서 사용하는 패키지 관리에 사용합니다.
여러분 아시네요. 대부분은 말하지 않습니다.
Composer 설치 절차(Windows) 를 참고했고.
node.js 설치
node.js 자체를 서버로 사용할 수도 있지만 Laravel에서는 주로 Vue.js
빌드를 목적으로 이용합니다.
여러분 아시네요. 대부분은 말하지 않습니다.
Node.js/npm 설치(for Windows) 를 참고했고.
내 환경에서는 버전이 아래였습니다.
node --version
v12.13.0
npm --version
6.12.0
Laravel 설치
여러분 아시네요. 대부분은 말하지 않습니다.
composer create-project laravel/laravel --prefer-dist <PROJECT NAME>
이제 현재 디렉토리 아래에 PROJECT_NAME 폴더가 만들어집니다.
그 부하에 Laravel이 도입된 상태가 되고 있습니다.
Vue.js 설치
앞에서 언급했듯이 Laravel5 이전이라면이 상태에서 npm installVue.js 를 도입할 수 있었습니다만, Laravel6 이후에서는 한마디 필요합니다.
한 번의 수고가 요리를 맛있게 하는 것과 같이 한 번의 수고가 Laravel을 맛있게 합니다. (몰라
# プロジェクトフォルダへ移動
cd <PROJECT NAME>
# 必要なライブラリをインストール
composer require laravel/ui
# 私は Vue を使うねん！と宣言
php artisan ui vue
# おら！
npm install
이것으로 Vue.js 배포가 완료됩니다.
Laravel5 이전에 npm install를 두드린 상태와 같습니다.
Vuetify 설치
Vuetify는 npm (Node.js의 패키지 관리 도구)을 사용하여 설치합니다.
(아니, 그 커맨드 아까 사용하고 있었는데 지금 더 설명할까.)
# Vuetify の最新パッケージのインストール
npm install vuetify
설치가 끝나면 Laravel 측에서 Vuetify를 사용하도록 설정합니다.
resoureces/js/app.js/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
/**
* 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);
/**
* 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',
vuetify: new Vuetify(),
});
이제 Laravel에서 Vuetify를 사용할 수 있습니다.
실천
그럼, 실제로 Vuetify 를 사용한 페이지를 만들어 봅시다.
원래 준비된 샘플 파일을 다시 작성해 봅니다.
resources\js\components\ExampleComponent.vue<template>
<v-app>
<v-container>
<v-row>
<v-col>
<v-card class="mx-auto">
<v-card-text>
<p class="text--primary">
Hello Vuetify World!!
</p>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn>やったね！！</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<v-app>
<!-- これがさっき修正したファイル -->
<example-component></example-component>
</v-app>
</div>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
그런 다음 Vue.js 빌드와 Laravel을 시작합니다.
각 명령 모두 실행 상태가 계속되므로 두 개의 프롬프트로 작업을 수행하십시오.
# Laravel の起動
php artisan serve
Laravel development server started: http://127.0.0.1:8000 # これが出ればOK
# ビルドコマンドを発行。watch にしておくと変更を検知して勝手にビルドしてくれるので楽。
npm run watch
DONE Compiled successfully in XXXms # これが出ればOK
각각이 기동하면 http://localhost:8000/ 에 접속해 봅시다.
아래와 같은 페이지가 표시되어 있으면 OK입니다.
요약
Laravel6에서 비표준 Vue.js 설치까지 가면,
나중에 Laravel5와 비슷한 방식으로 Vuetify를 사용할 수 있습니다.
나는 지금까지 element-ui를 주로 사용하고 있었지만, 이번에는 Vuetify를 이용한다는 기사를 써 보았습니다.
왜 바꾸고 싶니? 질리기 때문입니다.
다만, 실제로 Vuetify를 사용해 보았던 것은 디자인 등은 매우 좋아했습니다.
테이블에 관해서도 element-ui 보다 유연하고 좋았습니다.
다만, timepicker의 디자인이 불만이었던 것과 element-ui의 datetimepicker가 진짜 신이라고 느꼈습니다.
그럼 여러분, 좋은 Vuetify 라이프를 보내주십시오.
Reference
이 문제에 관하여(Laravel6계에 Vuetify를 넣어 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ktoshi/items/5fd7a11cbc00b70c2db1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
node --version
v12.13.0
npm --version
6.12.0
여러분 아시네요. 대부분은 말하지 않습니다.
composer create-project laravel/laravel --prefer-dist <PROJECT NAME>
이제 현재 디렉토리 아래에 PROJECT_NAME 폴더가 만들어집니다.
그 부하에 Laravel이 도입된 상태가 되고 있습니다.
Vue.js 설치
앞에서 언급했듯이 Laravel5 이전이라면이 상태에서 npm installVue.js 를 도입할 수 있었습니다만, Laravel6 이후에서는 한마디 필요합니다.
한 번의 수고가 요리를 맛있게 하는 것과 같이 한 번의 수고가 Laravel을 맛있게 합니다. (몰라
# プロジェクトフォルダへ移動
cd <PROJECT NAME>
# 必要なライブラリをインストール
composer require laravel/ui
# 私は Vue を使うねん！と宣言
php artisan ui vue
# おら！
npm install
이것으로 Vue.js 배포가 완료됩니다.
Laravel5 이전에 npm install를 두드린 상태와 같습니다.
Vuetify 설치
Vuetify는 npm (Node.js의 패키지 관리 도구)을 사용하여 설치합니다.
(아니, 그 커맨드 아까 사용하고 있었는데 지금 더 설명할까.)
# Vuetify の最新パッケージのインストール
npm install vuetify
설치가 끝나면 Laravel 측에서 Vuetify를 사용하도록 설정합니다.
resoureces/js/app.js/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
/**
* 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);
/**
* 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',
vuetify: new Vuetify(),
});
이제 Laravel에서 Vuetify를 사용할 수 있습니다.
실천
그럼, 실제로 Vuetify 를 사용한 페이지를 만들어 봅시다.
원래 준비된 샘플 파일을 다시 작성해 봅니다.
resources\js\components\ExampleComponent.vue<template>
<v-app>
<v-container>
<v-row>
<v-col>
<v-card class="mx-auto">
<v-card-text>
<p class="text--primary">
Hello Vuetify World!!
</p>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn>やったね！！</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<v-app>
<!-- これがさっき修正したファイル -->
<example-component></example-component>
</v-app>
</div>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
그런 다음 Vue.js 빌드와 Laravel을 시작합니다.
각 명령 모두 실행 상태가 계속되므로 두 개의 프롬프트로 작업을 수행하십시오.
# Laravel の起動
php artisan serve
Laravel development server started: http://127.0.0.1:8000 # これが出ればOK
# ビルドコマンドを発行。watch にしておくと変更を検知して勝手にビルドしてくれるので楽。
npm run watch
DONE Compiled successfully in XXXms # これが出ればOK
각각이 기동하면 http://localhost:8000/ 에 접속해 봅시다.
아래와 같은 페이지가 표시되어 있으면 OK입니다.
요약
Laravel6에서 비표준 Vue.js 설치까지 가면,
나중에 Laravel5와 비슷한 방식으로 Vuetify를 사용할 수 있습니다.
나는 지금까지 element-ui를 주로 사용하고 있었지만, 이번에는 Vuetify를 이용한다는 기사를 써 보았습니다.
왜 바꾸고 싶니? 질리기 때문입니다.
다만, 실제로 Vuetify를 사용해 보았던 것은 디자인 등은 매우 좋아했습니다.
테이블에 관해서도 element-ui 보다 유연하고 좋았습니다.
다만, timepicker의 디자인이 불만이었던 것과 element-ui의 datetimepicker가 진짜 신이라고 느꼈습니다.
그럼 여러분, 좋은 Vuetify 라이프를 보내주십시오.
Reference
이 문제에 관하여(Laravel6계에 Vuetify를 넣어 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ktoshi/items/5fd7a11cbc00b70c2db1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
# プロジェクトフォルダへ移動
cd <PROJECT NAME>
# 必要なライブラリをインストール
composer require laravel/ui
# 私は Vue を使うねん！と宣言
php artisan ui vue
# おら！
npm install
Vuetify는 npm (Node.js의 패키지 관리 도구)을 사용하여 설치합니다.
(아니, 그 커맨드 아까 사용하고 있었는데 지금 더 설명할까.)
# Vuetify の最新パッケージのインストール
npm install vuetify
설치가 끝나면 Laravel 측에서 Vuetify를 사용하도록 설정합니다.
resoureces/js/app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
/**
* 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);
/**
* 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',
vuetify: new Vuetify(),
});
이제 Laravel에서 Vuetify를 사용할 수 있습니다.
실천
그럼, 실제로 Vuetify 를 사용한 페이지를 만들어 봅시다.
원래 준비된 샘플 파일을 다시 작성해 봅니다.
resources\js\components\ExampleComponent.vue<template>
<v-app>
<v-container>
<v-row>
<v-col>
<v-card class="mx-auto">
<v-card-text>
<p class="text--primary">
Hello Vuetify World!!
</p>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn>やったね！！</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<v-app>
<!-- これがさっき修正したファイル -->
<example-component></example-component>
</v-app>
</div>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
그런 다음 Vue.js 빌드와 Laravel을 시작합니다.
각 명령 모두 실행 상태가 계속되므로 두 개의 프롬프트로 작업을 수행하십시오.
# Laravel の起動
php artisan serve
Laravel development server started: http://127.0.0.1:8000 # これが出ればOK
# ビルドコマンドを発行。watch にしておくと変更を検知して勝手にビルドしてくれるので楽。
npm run watch
DONE Compiled successfully in XXXms # これが出ればOK
각각이 기동하면 http://localhost:8000/ 에 접속해 봅시다.
아래와 같은 페이지가 표시되어 있으면 OK입니다.
요약
Laravel6에서 비표준 Vue.js 설치까지 가면,
나중에 Laravel5와 비슷한 방식으로 Vuetify를 사용할 수 있습니다.
나는 지금까지 element-ui를 주로 사용하고 있었지만, 이번에는 Vuetify를 이용한다는 기사를 써 보았습니다.
왜 바꾸고 싶니? 질리기 때문입니다.
다만, 실제로 Vuetify를 사용해 보았던 것은 디자인 등은 매우 좋아했습니다.
테이블에 관해서도 element-ui 보다 유연하고 좋았습니다.
다만, timepicker의 디자인이 불만이었던 것과 element-ui의 datetimepicker가 진짜 신이라고 느꼈습니다.
그럼 여러분, 좋은 Vuetify 라이프를 보내주십시오.
Reference
이 문제에 관하여(Laravel6계에 Vuetify를 넣어 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ktoshi/items/5fd7a11cbc00b70c2db1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<template>
<v-app>
<v-container>
<v-row>
<v-col>
<v-card class="mx-auto">
<v-card-text>
<p class="text--primary">
Hello Vuetify World!!
</p>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn>やったね！！</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<v-app>
<!-- これがさっき修正したファイル -->
<example-component></example-component>
</v-app>
</div>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
# Laravel の起動
php artisan serve
Laravel development server started: http://127.0.0.1:8000 # これが出ればOK
# ビルドコマンドを発行。watch にしておくと変更を検知して勝手にビルドしてくれるので楽。
npm run watch
DONE Compiled successfully in XXXms # これが出ればOK
Laravel6에서 비표준 Vue.js 설치까지 가면,
나중에 Laravel5와 비슷한 방식으로 Vuetify를 사용할 수 있습니다.
나는 지금까지 element-ui를 주로 사용하고 있었지만, 이번에는 Vuetify를 이용한다는 기사를 써 보았습니다.
왜 바꾸고 싶니? 질리기 때문입니다.
다만, 실제로 Vuetify를 사용해 보았던 것은 디자인 등은 매우 좋아했습니다.
테이블에 관해서도 element-ui 보다 유연하고 좋았습니다.
다만, timepicker의 디자인이 불만이었던 것과 element-ui의 datetimepicker가 진짜 신이라고 느꼈습니다.
그럼 여러분, 좋은 Vuetify 라이프를 보내주십시오.
Reference
이 문제에 관하여(Laravel6계에 Vuetify를 넣어 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ktoshi/items/5fd7a11cbc00b70c2db1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
