라라벨 Laravel8에서 뷰3 vue3 설치

라라벨 Laravel8에서 뷰3 vue3 설치

1단계 : 라라벨 프로젝트 디렉토리에서 Vue3 설치

라라벨 프로젝트 디렉토리에 진입하여 아래의 코드를 실행합니다.

npm install --save vue@next && npm install --save-dev vue-loader@next

2단계 : webpack 믹스 설정 ( webpack.mix.js 설정)

라라벨 프로젝트 디렉토리 하단 경로에 webpack.mix.js파일이 있습니다. 파일을 열어서 .vue()를 추가해 줍니다.

만약, 오류가 발생이 된다면 라라벨 믹스 버전이 6 이상인지 확인하시길 바랍니다.

mix.js('resources/js/app.js', 'public/js') .vue() .postCss('resources/css/app.css', 'public/css', [ // ]);

3단계 : 작동 확인을 위한 테스트 컴포넌트 작성

[라라벨 프로젝트 경로]/resources/js/components/Test.vue 컴포넌트 파일을 생성하여 아래코드를 참조하여 작성합니다.

{{ hello }} export default { setup: () => ({ hello: '안녕하세요~!' }) }

[라라벨 프로젝트 경로]/resources/js/app.js파일을 아래처럼 수정합니다.

import { createApp } from 'vue' import HelloWorld from './components/Test.vue'; const app = createApp({}); app.component('hello-world', HelloWorld) .mount('#app'); require('./bootstrap');

[라라벨 프로젝트 경로]/resources/welcome.blade.php파일을 아래처럼 수정합니다.

4단계 : 리소스 컴파일

변경된 파일을 감지하여 리소스 파일을 컴파일합니다.

npm run watch

from http://lifefun.tistory.com/11 by ccl(A) rewrite - 2021-12-18 18:01:05