Vue 개발환경 구축

Vue 개발환경을 VSCode에 구축하려고 합니다.

 

1. Nodejs와 npm은 설치되어 있어야 합니다.

Nodejs 다운로드

https://nodejs.org/en/download/

Download | Node.js

npm 다운로드

https://www.npmjs.com/get-npm

npm | get npm

저는 yarn도 편하더라구요. npm yarn 둘중에 원하는 걸로 다운로드 하기

https://yarnpkg.com/en/docs/install#mac-stable

Yarn

 

설치가 잘 되었다면 terminal에서 확인해보세요

이렇게 버전이 뜨면 잘 다운받아진 겁니다.

 

2. terminal에서 아래 명령문으로 vue를 다운받으세요

yarn global add @vue/cli

저는 yarn을 사용했습니다.

이렇게 뜨면 잘 설치하신 겁니다.

 

3. VSC를 열어주세요

extension을 두개 설치해줍니다: Live Server, Vetur

 

4. 크롬으로 갑니다.

vue.js devtools를 검색하고 제일 상위 링크를 클릭합니다.

그리고 확장팩을 설치해줍니다.

 

5. 다시 VSCode로 와서 터미널을 열어준 후 아래의 명령어를 실행합니다.

vue create {프로젝트명}

저는 default와 yarn으로 설정해주었습니다.

이렇게 새 프로젝트가 만들어졌습니다. 아래 cd vue-study, yarn serve 명령어를 실행하라고 나와있네요. 한번 해봅시다

cd vue-study

yarn serve

실행해주면 아래와 같이 나옵니다

로컬 주소로 가볼까요

여기까지 따라오셨다면 성공입니다! 프레임워크답게 다 구성되어있네요.

 

여기까지 따라오셨다면 이 구성한 파일을 깃 원격 저장소에 연결해보세요!

https://armontad-1202.tistory.com/entry/원격-저장소-연결하기

원격 저장소 연결하기

 

또 새 프로젝트를 시작해봅시다!