[Vue.js] 개발 환경 세팅

1. Node.js 설치

2. VScode 설치

• 확장프로그램
• vue-ofiicial
• vue 3 snippets

3. 프로젝트 생성

1. 프로젝트 생성할 폴더로 이동

2. npm create vite@latest
1. vite 설치 메세지가 뜰 경 우 → y 입력

1. 프로젝트 이름 작성

2. vue 선택

3. javascript 선택

4. cd 프로젝트 이름 → 프로젝트 폴더로 이동

5. npm install로 관련 패키지 설치

6. code . 입력 → 해당 프로젝트 폴더로 VScode 새 창 생성

4. 개발 서버 실행

• package.json에서 서버 실행 script 확인 가능
• npm run dev

5. 라이브러리 추가

1) Sass

• 네스팅 구문을 사용해 CSS의 계층 구조를 직관적이고 구조적으로 표현 가능

• npm install -D sass
• -D → 개발할 때만 사용한다는 의미

2) Bootstrap

• 부트스트랩은 HTML, CSS, JS 컴포넌트를 미리 스타일링한 UI 라이브러리

• npm i bootstrap@5.3.6

• 설치 후 main.js에 import 필요

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';