1. 라라벨 설치하기 (v6.2)
1 | composer create-project --prefer-dist laravel/laravel laravelspa | cs |
2. laravel/ui 패키지 설치 (예 : php artisan ui bootstrap 설치할 수 있는 프론트 엔트 스캐폴딩을 설치하게 해준다.)
1 | cd laravelspa | cs |
1 | composer require laravel/ui | cs |
3. Vue설치
1 | php artisan ui vue | cs |
4. npm설치(노드 패키지관리자)
1 | npm install | cs |
5. SASS파일을 일반 CSS로 컴파일 할 수 있음(npm run dev wwbpack.mix.js public/css)
1 | npm run dev | cs |
6. respirces/views/welcome.blade.php 파일을 열어서 style, div 삭제
7. 컴파일된 app.js, app.css 를 임포트해준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> <!-- Styles --> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> </head> <body> <script src="{{ asset('js/app.js') }}"></script> </body> </html> | cs |
8. resources/sass/app.scss 열어서 안의 내용을 삭제해준다.(필요없음)
9. resources/js/bootstrap.js 파일삭제
resources/components/ExampleComponent.vue 파일삭제
10. resources/js/app.js 파일을 열어 아래와 같이 수정한다.
1 2 3 4 5 | import Vue from 'vue'; new Vue({ el: '#app', }); | cs |
11. resources/views/welcome.blade.php 파일에 <div id="app"></div> 작성해준다.
1 2 3 4 | <body> <div id="app"></div> <script src="{{ asset('js/app.js') }}"></script> </body> | cs |
12. 빌드 감시를 해준다.
1 | npm run watch | cs |
13. 브라우저로 가보자(난 발렛을 설치했으니 laravelspa.test 로 접속하면된다.
vue 컴포넌트 검사창을 가보면 Root 컴포넌트가 있는걸 확인 할 수 있다.
14. component를 만들어보자(위치: resources/js/App.vue) 주의! components폴더가 아니다 그 상위이다.
15. App.vue 구조만들기 (플러그인이 설치되어 있어야함)
Hello World!를 작성해주자(아무거나)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template> <main> <h3>Hello World!</h3> </main> </template> <script> export default { } </script> <style> </style> | cs |
16. app.js 파일로가서 방금 작성한 component를 import해준다.
1 2 3 4 5 6 7 | import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) }); | cs |
17. 브라우저로 가보면 변경된 것을 확인 할 수 있다.
18. 부트스트랩을 import해준다.
경로는 node_modules에 있는 부트스트랩이다.
부트스트램 프레임웍을 사용할 수 있게 해준다.
1 2 3 4 5 6 7 8 9 | import Vue from 'vue'; import App from './App.vue'; import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap'; new Vue({ el: '#app', render: h => h(App) }); | cs |
App.vue 파일로 가서 버튼을 달아보자
1 2 3 4 5 6 | <template> <main> <h3>Hello World!</h3> <button class="btn btn-primary">Click me</button> </main> </template> | cs |
19. 브라우저에서 확인해보자.
'라라벨 > laravel Vue SPA' 카테고리의 다른 글
| laravel vue spa CRUD Part1 (0) | 2020.02.25 |
|---|---|
| laravel databases, vuex (0) | 2020.02.23 |
| laravel spa vue-router, welcome.vue (0) | 2020.02.23 |
| laravel spa 부트스트랩 템플릿 적용, fontawesome적용 (0) | 2020.02.23 |