vue.js 설치방법 및 순서 시작하기 - 유딩동 Tistory

안녕하세요 유딩동입니다.

 

Vue.js ? 

웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크

 

1. Visual Studio Code 설치

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

홈페이지에 들어가서 VS를 설치 해봅니다.

 

설치는 무난하게 다음 다음만 눌러줍니다..

설치 끝!

 

 

2. Node.js 설치

https://nodejs.org/ko/

Node.js

저는 안정적인 버전 14.17.0 으로 설치 했습니다.

 

chrome에서 더 개발을 쉽게 하기 위해서

vue.js devtools 추가 해줍니다.

 

 

VS code에서 몇가지 Install을 해줍니다.

Java Extension Pack

 

 

아, 그런데 제가 빼먹은 게 있더라구요.

jdk 설치를 안했어요.

win 64버전으로 jdk 설치 하였습니다.

 

settings.json을 열어, java.home 입력

 

3. Vue cli 실행

 

 

 

npm install -g @vue/cli

 

vue --version

버전이 나오면 잘 설치가 된 것입니다!

vue를 사용할 수있는 workspace를 지정해주었습니다.

 

vue create project(프로젝트명)

 

설치가 모두 되었네요!

 

 

npm run serve

-> 서버를 기동합니다.

 

 

액세스를 허용할 수 있게 하면, 바로 이렇게 화면이 출력 됩니다!

 

 

localhost:8080 을 들어가면, 이렇게 바로 main 화면이 나옵니다.

 

 

.vue 파일을 읽을 수 있도록

vue 플러그인을 다운받습니다.

 

Vetur - Visual Studio Marketplace

Vetur - Visual Studio Marketplace