Laravel 8에 부트스트랩 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단계: Laravel에 부트스트랩 5 설치

이 단계에서 나와 동일한 순서로 명령을 수행하고 아래에 나열된 명령을 건너뛰지 마십시오.

php artisan ui bootstrap

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

이제 이 명령을 사용하여 부트스트랩 버전을 부트스트랩 5로 전환합니다.

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

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

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

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

npm install
npm run dev

저와 함께 후속 조치를 취하시면 Laravel 프로젝트에 부트스트랩 5가 성공적으로 설치될 것입니다. 부트스트랩 버전이 package.json 파일에서 프로젝트에 설치되었는지 확인할 수 있습니다.

"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"
    }

보시다시피 Bootstrap이 성공적으로 설치되었습니다.

4단계: 라라벨에 Vue 3 설치

이전 단계와 마찬가지로 Laravel/UI를 사용하여 Vue 2를 설치합니다. Vue 2는 많은 것을 설정하기 때문입니다.

php artisan ui vue

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

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

그 다음에,

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 프로젝트에 부트스트랩 5와 Vue 3가 설치되었습니다.

마지막으로 이미 사전 설치된 Vue 3 및 Bootstrap 5와 함께 내 스타터 Laravel 8 프로젝트를 사용할 수 있음을 언급하고 싶습니다.
⭐ The Github repository!

~ Simodev