[Vue.js] 2. 프로젝트 생성

1. CLI로 생성하기

VSCode 터미널에 아래의 명령어 입력

 vue create [프로젝트명]

Vue 3.x 버전을 이용할 것이기에 [Vue 3] 선택

 

위와 같은 화면이 뜬다면 성공

• node_modules : npm 패키지 파일이 모인 디렉토리
• public : index.html, favicon.ico 등 정적 리소스가 모인 디렉토리
• src/assets : 이미지, CSS. 폰트 등을 관리하는 디렉토리
• src/components : Vue 컴포넌트 파일이 모인 디렉토리
• App.vue : Root 컴포넌트
• main.js : 가장 먼저 실행되는 JS파일로, Vue 인스턴스를 생성
• package-lock.json : 설치된 package의 디펜던시 정보를 관리하는 파
• package.json : 프로젝트에 필요한 package를 정의하고 관리하는 파일

생성된 프로젝트 폴더로 이동 후 아래 명령어 입력

npm run serve

접속 가능한 주소 출력

 

브라우저로 http://localhost:8080/ 접속

접속 완료