Laravel 8에 Bootstrap 5 및 Vue 3을 설치하는 방법

이 튜토리얼에서는 Laravel에 booststrap 5와 Vue.js 3를 설치하는 방법을 보여줍니다.

Bootstrap은 세계에서 가장 인기 있는 Css 프레임워크이며 Vue 3은 빠르고 파일 크기가 작으며 TypeScript를 잘 지원합니다.

1단계: 라라벨 프로젝트 생성

laravel new Project_name

2단계 : Laravel/UI 설치

Laravel UI는 미리 정의된 UI 구성 요소와 함께 제공되는 공식 라이브러리입니다.
Laravel/UI를 설치하려면 다음 명령을 실행하십시오.

composer require laravel/ui

3단계: 라라벨에 부트스트랩 5 설치

이 단계에서 동일한 순서의 명령을 따르고 아래 나열된 명령을 건너뛰지 마십시오.

php artisan ui bootstrap

이 명령이 Bootstrap 4를 설치한다는 것을 알 수 있습니다. 이 명령을 실행해야 하는 이유는 부트스트랩 5를 직접 설치하는 것과 비교하여 직접 수행할 필요가 없도록 많은 것을 설정하기 때문입니다.

이제 이 명령을 사용하여 Bootstrap 버전을 Bootstrap 5로 전환합니다.

Note that you should run both this commands on the same order so you wont get any issues.

npm install [email protected] @popperjs/core --save-dev

npm install bootstrap @popperjs/core --save-dev

다음으로 만 수행하면 됩니다.

npm install
npm run dev

저를 따라하시면 ​​Laravel 프로젝트에 Bootstrap 5가 성공적으로 설치될 것입니다. package.json 파일에서 프로젝트에 Bootstrap 버전이 설치되어 있는지 확인할 수 있습니다.

"devDependencies": {
        "@popperjs/core": "^2.9.2",
        "axios": "^0.21",
        "bootstrap": "^5.0.1",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    }

보시다시피 부트스트랩이 성공적으로 설치되었습니다.

4단계: Laravel에 Vue 3 설치

이전 단계와 마찬가지로 Laravel/UI를 사용하여 Vue 2를 설치할 것입니다. 왜냐하면 Vue 2가 우리를 위해 많은 것을 설정할 것이기 때문입니다.

php artisan ui vue

이제 다음 명령을 사용하여 Vue 버전을 Vue 3으로 전환합니다.

npm install --save [email protected] && npm install --save-dev [email protected]

그 다음에,

npm install
npm run dev

package.json를 다시 확인해보자.

"devDependencies": {
        "@popperjs/core": "^2.9.2",
        "@vue/compiler-sfc": "^3.0.11",
        "axios": "^0.21",
        "bootstrap": "^5.0.1",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^3.0.11",
        "vue-loader": "^16.2.0",
        "vue-template-compiler": "^2.6.12"
    }

축하해요! 이제 Laravel 프로젝트에 Bootstrap 5와 Vue 3가 설치되었습니다.

마지막으로 Vue 3 및 Bootstrap 5가 이미 사전 설치된 스타터 Laravel 8 프로젝트를 사용할 수 있다는 점을 말씀드리고 싶습니다.
⭐ The Github repository!

~ Simodev