1. composer create-project --prefer-dist laravel/laravel vuecrud
컴포저 라라벨5.8 설치
2. cd vuecrud
라라벨 프로젝트 디렉터리 이동
3. cp .env.example .env
env파일복사
4. php artisan key:generate
키젠생성
5. 크롬브라우저 접속 vuecrud.test
6. npm install
node module 설치
7. npm install vue-router
vue-router 설치
8. npm install vue-axios
vue-axios 설치
9. npm run dev
RUN NPM
10. npm run watch
터미널에서 계속 실행되면서 모든 관련된 파일의 변경사항을 감시하다가 변경되면 다시 컴파일 함.
11. 모든 의존성 설치가 끝나면 resources/js/app.js를 수정
1 2 3 4 5 6 7 8 9 | require('./bootstrap'); window.Vue = require('vue'); Vue.component('articles', require('./components/Articles.vue').default); const app = new Vue({ el : '#app' }); | cs |
12. resources/js/components/Articles.vue 파일을 생성해준다.
1 2 3 4 5 | <template> <div> <h2>Articles</h2> </div> </template> | cs |
13. resources/views/welcome.blade.php 파일을 수정해준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!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() }}"> <script>window.Laravel = { csrfToken: '{{ csrf_token() }}'}</script> <title>Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> </head> <body> <div id="app"> <div class="container"> <articles></articles> </div> </div> <script src="{{ asset('js/app.js') }}"></script> </body> </html> | cs |
14. http://vuecrud.test/ 접속
'라라벨 > Vue(laravle)' 카테고리의 다른 글
| 02) 레이아웃 tailwindcss (0) | 2020.01.13 |
|---|---|
| 01)라라벨에 뷰 라우터 설치하기 (0) | 2020.01.13 |
| laravel+vue+tailwindcss (0) | 2019.08.24 |
| laravel vue axjos (0) | 2019.08.05 |
| 라라벨 + Vue (안됨) (0) | 2019.07.29 |