[Vue3] 개발 환경 구축

개발 환경 세팅

 

1. node.js 다운로드  (LTS)  

2. IDE (Editor  설치 VSCODE, IntelliJ 등등)

3. Terminal 실행해야하므로 일단 빈 프로젝트 생성 (터미널만 단독으로 켤 수 없음)

 

그런데, Vue 프로젝트 생성할 때 Vue CLI 에서

 

1. npx create-vue 와

2. ~\AppData\Roaming\npm\node_modules\@vue\cli 가 있다.

 

이 둘의 차이는

 

1의 경우 빌드로 Vite를 사용, Vue3에서 권장하며 빠르고 설정이 간단하고 등등

2의 경우 빌드 도구가 Webpack 이고 무겁고  Vue2, Vue3 둘 다 지원하고 등등

 

2가 Vue CLI 고 1이 Vite 인 듯 ?

 

---

바탕화면 등 작업할 폴더를 생성해두고 (쀼우)

File - open - 쀼우 선택하여 프로젝트 열고

터미널에서

vue create testvue (뷰 프로젝트 이름)

생성되면, 다시

File - open - 쀼우\testvue 

이렇게 굵은 글씨로 내가 만든 뷰 프로젝트가 보인다.

App.vue 가 나의 메인 페이지가 된다. 여기에 코딩하는 것이다. html파일이라고 생각하면 된다.

 

<templates> 여기에는 HTML 짜고 </templates>

<script> 여기에는 JS 짜고 </script>

 

 

터미널에서

npm run serve

실시간 미리보기라고 생각하면 됨

http://localhost:8080/ 로 접속 시 내가 작성한 내용(안녕하세요?) 보임

 

이건 코드를 입력한 후 서버를 재실행할 필요 없이, 저장하지 않아도 (터미널 클릭하면 자동저장되는 것 같은데..?)

브라우저에 바로 적용된다.

편하다. 리액트와 같네.

---

node.js 는 npm 이용하려고 설치하는 것이다.

 

● npm : 웹개발관련 라이브러리들을 패키지매니저 (=라이브러리 설치 도우미)   + yarn 도 마찬가지

npm 으로 @vue/cli 설치하는 것 = vue 프로젝트를 빠르게 설치해주는 라이브러리로 "vue create 프로젝트명" 으로 생성 가능

 

사실~! 웹브라우저는 .vue 를 해석할 수 없다. 근데 띄울 수 있는 이유는 ?

App.vue 를 index.html 인 HTML 파일로 컴파일하기 때문

main.js 가 이걸 하고 있다고 합니다.

 

node_modules : 프로젝트에 쓰이는 라이브러리들

src : 내가 짜는 소스코드를 모두 담아두는 곳

public : html 파일, 기타 파일 보관

package.json : 내가 설치한 라이브러리 버전, 프로젝트 설정 기록

 

---

실행할 때

npm run dev 

npm run serve

이런식으로 하는데, 보통 Vite 는 dev, Vue CLI 는 serve 다.

이것은 package.json 에서 확인할 수 있다.

이 부분이 serve 이기 때문에 . npm run serve 로 실행되는 것이다.

만약 a로 바꾼다면 npm run a 로 실행할 수 있다.

 

 

Vite의 경우