[Vue3시작하기] Vue CLI,라이브러리, 파일 임포트 방식 설명

Vue CLI 는 vue js 프로젝트 생성해주는 도구 입니다.

간단한 명령어를 콘솔에 입력했을 때 실행된다.

 

설치 명령어

npm install -g @vue/cli     

 

vue create "프로젝트명"

 

cd로 설치한 프로젝트 폴더로 이동

 

npm run serve  또는 yarn  serve

 

package.json 에서 확인되는 serve

 

초기 화면

 

헬로월드 컴포넌트와 props 확인해 볼 수 있다.

 

배포용 디펜던시 vs 개발자용 디펜던시 차이 알기

config  ctrl space 하면 설정할 수 있는게 많다!

vue cli 에서 api 공식 문서보고 추가해가면 된다.

라이브러리, 파일 임포트 방식 설명

public 폴더

index.html 은 화면에 표시되는 껍데기 , 어플리케이션의 진입점입니다.

app 보이나용

 

 

src 폴더

main.js

 import from 'vue' 는 package.json 과 일치

저 createApp 은 우리가 앞서 수업시간에 썼던 createApp 을 들고왔다고 생각하면 된다.

 

첫번째 라인은 뷰 라이브러리를 들고온거고

 

두번째 라인은 뷰 파일을 들고 온거다.

요즘엔 npm 기반으로 개발하기 때문에

npm 저장소에 vue 라이브러리를 설치하겠다는 뜻

 

변수 App 에 다음 내용들을 다 집어 넣고  createApp 에 대상으로 보내겠다는 뜻

페이지 로딩 과정 분석

localhost doucument html 파일을 받고 , 아직은 비어있음

스크립트로 들어가 있던 js 파일들이 실행되면서 내용들이 완성~

app.js 보면 아 화면에 있는 내용이 들어있구나~