vite 프로젝트 시작하기
npm install -g bootstrap
- bootstrap5 설치
- -g 옵션을 사용하면 전역 패키지로 설치
npm install vue@next
- (옵션)vue 설치. vite를 설치하면 같이 설치됨
npm init @vitejs/app hello-world-vite
- Vite + Vue 프로젝트 만들기
- framework로 vue선택
- 스크립트언어로 vue(javascript) 선택
- package.json 파일이 생성됨 ( pom.xml과 용도가 같음)
- 파일구성 : index.html - main.js - App.vue
npm install
- 관련된 의존 패키지 설치 : package.json 파일이 있는 폴더로 이동 후에 실행
- package.json에 명시된 라이브러리를 설치
- node-modules 폴더 생성됨
npm run dev
- 서버 실행
- package.json의 script내 속성에 명시된 vite가 npx를 통해서 실행
npm run build
- ES 모듈을 하나의 번들로 컴파일
- Rollup을 이용해서 번들을 생성
- 애플리케이션을 배포하기 위해 번들을 생성하여 크기를 줄이고 자바스크립트의 코드를 최소화
- dist 폴더가 생성됨 ( html, css, asset)
- dist 폴더를 웹프로젝트에 넣어서 실행