[vue/spring] bootstrap, fullpage.js 적용하기

1. bootstrap
   • 설치
   • vue 프로젝트에 적용
2. fullpage.js
   • CDN 코드 적용
   • fullpage 적용

1. bootstrap

• 설치

  npm으로 설치
  npm install bootstrap@5.2.3

• vue 프로젝트에 적용

  main.js에 import
  import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

이렇게 까지 하면 모든 vue 파일에 부트스트랩이 적용된다.

2. fullpage.js

• CDN 코드 적용

  [vue디렉토리]>public>index.html 의 header태그 안에 아래 코드 2줄을 넣어준다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.17/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.17/fullpage.js"></script>

npm으로 로컬에 설치하여 적용하려 했지만 경로 지정이 잘못된 건지 404오류가 자꾸 떠서 CDN으로 대체했다.
다행히도 CDN으로 적용하여도 라이브러리의 CSS를 오버라이드해서 사용할 수 있어 다행이었다.

• fullpage 적용

  구현하려는 vue 페이지에 아래 스크립트 적용하여 fullpage.js 초기화

<script>
export default {
  mounted() {
    new fullpage('#fullpage', {
      sectionSelector: '.section',
      scrollOverflow: true,
      navigation: true,
      scrollingSpeed: 1000,
    });
  }
}
</script>

❗ vue프로젝트에서 스크립트를 작성할때에는 vue만의 라이프사이클 훅을 따라 작성해야한다.
이 부분은 더 공부해서 다음 포스팅때 작성하도록 하겠다.