[Vue.js] Project Settings, Bootstrap

✔️ Project setting

구글에 nodejs 검색 후 LTS라고 써있는 버전을 다운받아 설치,

 

빈 폴더 생성 후 VSCode 로 열기, 터미널에

npm create vue@latest

 

입력하면 환경 세팅이 완료된다.

 

이후 생성된 폴더 프로젝트를 다시 열어준다.

 

npm install

 

npm 을 설치해준 후 

 

npm run dev

 

를 실행하면

 

 

위의 http://localhost:5173/ 으로 미리보기가 가능하다.

 

vue.js basic template

<template>
</template>

<script>
export default {
  name : 'App',
  components : {
  }
}
</script>

<style>
</style>

---

✔️ Install Bootstrap

1. 홈페이지에서 태그를 가져와 html 파일에 넣기

 

Bootstrap 홈페이지에서 버전 확인 후

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

 

해당 태그들을 html 파일에 넣어준다.

 

2. npm 으로 설치

npm install bootstrap@5

 

터미널에 입력

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

 

src 폴더의 main.js 에 위의 코드 두 줄을 추가해준다.

 

정확한 방법은 Bootstrap 홈페이지의 Docs > Download 탭에서 확인한 후 그대로 실행하면 된다.

npm run dev

 

이후 미리보기를 실행했을 때 원할하게 작동하면 문제 x