Vue.js 설치

Vue.js 설치

1. Vue.js 설치

• 그러면 Vue.js를 설치해 봅시다!
• #1. 공부할 폴더를 생성한 후, VSCode의 터미널에 다음과 같이 입력하여 Vue.js를 설치해 줍니다.

npm install -g @vue/cli

 

• #2. 설치가 끝났으면, 다음과 같이 입력하여 프로젝트를 생성해 줍니다. (저는 프로젝트명을 vuedongsan이라고 입력하였습니다.)

vue create vuedongsan

 

• #3. 그러면 다음과 같이 나오게 됩니다. Vue 3버전의 Default를 클릭해 줍니다.

 

    → 조금만 기다리면, 정상적으로 설치가 되었습니다!

 

• #4. 터미널을 보면 cd test로 넘어간 후, npm run serve로 실행하면 된다고 나와있습니다. 그대로 해줍시다.

 

• #5. 그러면, localhost:8080/으로 들어가면 된다고 뜹니다. 브라우저에 들어가 url에 http://localhost:8080/을 입력해 줍시다.

    → 브라우저에 들어가면, 정상적으로 나오는 것을 확인할 수 있습니다.

 

2. 파일 구조

• 프로젝트 폴더에 생성된 파일이 담긴 의미에 대해 알아봅시다.

 1) node_modules

• node_modules 폴더는 Node.js 프로젝트에서 종속성(Dependency) 패키지들이 설치되는 디렉터리입니다.
• Node.js 애플리케이션을 개발할 때, 프로젝트에서 사용하는 외부 패키지들은 일반적으로 이 폴더에 설치됩니다.

 2) src 

• src 폴더는 소스코드를 담는 곳입니다.

 3) public

• public 폴더는 html 파일이나 기타 파일들을 보관하는 곳입니다.

 4) App.vue

• App.vue는 Vue 프로젝트에서 중심 컴포넌트 파일입니다.
• 애플리케이션의 루트 컴포넌트로 작동하며, 일반적으로 애플리케이션의 전체적인 레이아웃과 구조를 포함합니다.

 5) index.html

• index.html은 웹 애플리케이션 or 웹 사이트의 진입점(Entry Point)입니다.

 6) main.js

• Vue 애플리케이션의 진입점(Entry Point) 역할을 합니다.
• index.html은 전체적인 웹 페이지의 구조를 정의한다면, main.js는 Vue 애플리케이션의 동작을 설정하고 구성하는 역할을 합니다.

 7) package.json

• package.json은 라이브러리 버전, 프로젝트 설정 기록을 저장하는 역할을 합니다.

 

3. 정리하며

• 지금까지 Vue.js 설치에 대해 알아보았습니다.
• 다음 시간엔 Vue.js의 데이터바인딩에 대해 알아보겠습니다.

데이터 바인딩

 

※ 코딩애플님의 강의를 참고하였습니다.