laravel spa (Vuejs, vuex, SPA, vue-router) 디테일버전 laravel v6.2

laravel spa (Vuejs, vuex, SPA, vue-router) 디테일버전 laravel v6.2

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 Laravel Colored by Color Scripter 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 파일에 작성해준다.

1 2 3 4 < body > < div id = "app" > < script src = "{{ asset('js/app.js') }}" > Colored by Color Scripter 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 Hello World! export default { } 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) }); Colored by Color Scripter cs

App.vue 파일로 가서 버튼을 달아보자

1 2 3 4 5 6 Hello World! Click me Colored by Color Scripter cs

19. 브라우저에서 확인해보자.

from http://anko3899.tistory.com/373 by ccl(A) rewrite - 2020-03-31 18:25:44