본문 바로가기

Web/Vue

[Vue] 1. 설치 및 VS Code 셋팅

 

1. Node 설치

npm(node package manager)을 이용해 vue를 설치하기 위해 Node.js 를 설치한다.

 

 Node.js

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

설치후 cmd 창을 열어 아래 명령어를 실행하여 vue 와 vue-cli 를 설치한다

Vue CLI는 Vue.js 프로젝트 생성을 돕는 vue 공식 CLI 이다. Vue CLI를 통해서 vue 명령어를 사용할 수 있게되고, 빠른 프로젝트 생성 및 관리를 할 수 있게 된다. 아래와 같이 npm, yarn 명령어를 사용해서 설치 할 수 있다.

--vue.js 설치
npm install

-- vue-cli설치
npm install -g @vue/cli

 

2. VS Code 세팅

VS Code 에서 Vue 개발을 도와주는 확장 프로그램 설치 한다.

위의 빨간 버튼을 클릭하여 아래 목록들을 검색하여 설치한다.

  • Live Server : html파일을 localhost에서 예제로 보고 싶을 때 유용
  • Prettier : 언어에 맞게 코드색상및 가독성이 좋게 해주는 확장프로그램/
  • Vetur : VSCode에서 돌아가는 Vue 개발 툴입니다. 설치
  • vscode-icons : 파일 탐색기에서 아이콘을 이쁘게 띄워줍니다.  설치권장
  • vue : Vue 문법 검사 확장프로그램. 설치
  • Vue VSCode Snippets : Vue 문법을 미리 알려주는 확장프로그램. 설치