[Vue] Vue CLI 와 Vite, Build

• VueCLI 와 Vite 차이
• npm run build
• component
• 포트번호

 

 

 

● Vue CLI (Command Line Interface)

 : Vue 프로젝트를 명령어 한 줄로 생성하고 관리하게 해주는 도구

 

vue create 프로젝트명 : Vue 프로젝트 생성

npm install -g @vue/cli    # Vue CLI 설치
vue create my-project      # 새 프로젝트 생성
cd my-project
npm run serve              # 개발 서버 실행 (localhost:8080)
npm run build              # 배포용으로 빌드

 

 

● Vite (비트)     요즘은 Vite를 더 많이 사용

 : Vue CLI 보다 빠르고 가벼움

 : 파일을 전체 번들링하지 않고 필요할 때만 불러온다 (on-demand)

 : 개발 서버가 매우 빠르다 (npm run dev)

npm create vite@latest my-vue-app
cd my-vue-app
npm install
npm run dev    # 개발 서버 실행 (localhost:5173)
npm run build  # 배포용 빌드

 

package.json에서 Vite 확인 가능

 

---

 

● npm run build

 

: Vue 앱을 배포용 static 파일로 변환 = 배포(deploy) 준비!

 

src 폴더의 Vue 컴포넌트들을 최적화된 HTML/CSS/JS 파일로 변환

-> /dist 폴더 안에 결과물 생성

-> 실제 웹서버에 올릴 수 있는 정적 사이트가 된다.

 

	npm run dev (개발용)	npm run build (배포용)
사용 목적	개발할 때 화면 확인	사용자에게 제공할 때
실행 방법	개발 서버 구동 (빠름)	정적 파일 생성
인터넷 접속 가능여부	X (로컬 전용)	O (서버에 배포해야 함)
파일 위치	실시간 메모리	/dist 폴더

 

 

npm run serve (Vue CLI) 와 npm run dev (Vite) 는 내부 명령어만 조금 다르고 실행 방식은 거의 같다.

개발자 미리보기용!

 

어차피 build를 해야 한다.

---

- shift + delete 를 누르면 태그가 한 번에 삭제된다.

---

컴포넌트~?

 

웹앱을 구성하는 재사용 가능한 독립적인 UI 단위로

보통 Vue에서는 .vue 파일 하나가 컴포넌트를 의미

 

--Cha.vue--
<template>
    <h2>안녕하세요</h2>
</template>

<script setup>
const name = 'Vue초보'
</script>

 

이 컴포넌트를 App.vue 에서 사용할 수 있다.

 

<template>
    <Cha />
</template>

<script setup>
import Cha from './components/Cha.vue'
</script>

---

localhost:포트번호 접속의 차이

 

localhost:8080 은 npm run serve 명령어로 접속, Vue ClI 개발 서버 기본 포트

localhost:5173 은 npm run dev 명령어로 접속, Vite 개발 서버 기본 포트