laravel+vue+tailwindcss

1. composer create-project --prefer-dist laravel/laravel blog

라라벨 설치

2. cd blog 

디렉터리 이동

3. cp .env.example .env

env파일복사

4. php artisan key:generate

키젠생성

5. 브라우저에서 blog.test 확인(valet 설치 시)

6. php artisan preser none

모두 제거 후 vue 설정   

php artisan preset vue

프론트엔드 프리셋 vue로 설정

7. npm install

의존성 설치

8. npm run dev

public/css/app.css 와 public/js/app/js 파일이 생성됨

9. composer require laravel-frontend-presets/tailwindcss --dev

tailwindcss 설치

참고 주소 : https://github.com/laravel-frontend-presets

10. php artisan preset tailwindcss

프론트엔드 css : tailwindcss 설정

11. npm install

패키지 의존성 설치

12. npm run dev

public/css/app.css 와 public/js/app/js 파일 빌드하기

13. blog.test 접속해보면 테일윈드로 설정되어 있는 것을 확인 할 수가 있다.

14. resources/js/components/Articles.vue 를 만들자

15. Articles.vue 테스트 코드를 작성하자

<template>

<div class="bg-teal-500">

  <div class="text-center text-white font-semibold px-4 py-2 m-2">나는 Vue 컴포넌트이다.</div>

  

</div>

</template>

16. resources/js/app/js 에 만든 컴포넌트를 등록해주자

Vue.component('articles', require('./components/Articles.vue').default);

17. resources/views/welcome.blade.php 파일을 수정하자. body태그에 직접 id="app"하면 오류된다 <div> 사용

<div class="min-h-screen flex items-center justify-center">

        <div class="flex flex-col justify-around h-full">

            <div>

                <h1 class="text-gray-600 text-center font-light tracking-wider text-5xl mb-6">

                    {{ config('app.name', 'Laravels') }}

                </h1>

                <div id="app">

                    <div>

                        <articles></articles>    

                    </div>

                </div>  

            </div>

        </div>

    </div>

</div>

<script src="{{ asset('js/app.js') }}"></script>

</body>

</html>

18. blog.test 접속해보자 vue+tailwindcss 가 적용되었다.

참고 유튜브 주소

https://www.youtube.com/watch?v=YLwy5EPYjbg&list=PLpzy7FIRqpGD0kxI48v8QEVVZd744Phi4&index=27