vue.js 개발환경 구성(포멧했어? 개발환경구성 A to Z / feat.맥북)

 

내가 먹고살려고 만든 블로그라 읽고

'세상을 널리 이롭게 하라' 라고 쓴다.

by.홍익인간junior

 

 

 

 

1. nodejs 설치(*최신 버전 설치 권장)

https://nodejs.org/ko/

Node.js

 

 

 

2. VS code(Edit tool)

Visual Studio Code(VS code)는 MS사의 오픈소스 기반의 크로스 플랫폼이다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

* VS Code plug-in setting Contents : 콘텐츠 준비중

 

 

 

3. Vue  cli 설치

VS Code > Turminal(cmd) 실행

 

npm install -g @vue/cli

 

 

 

cli 설치하는동안

Vue 확장 프로그램 설치

 

.

.

.

 

 

 

4. 에디터 부가기능 설치(VS Code / Vue 확장 프로그램)

VS Code > 'Extensions'  버튼 클릭

설치 플러그인 검색 ↓

4.1) vetur  

4.2) html css support

4.3) vue 3 snippets

 

 

 

→ 이거 Click !

 

 

 

 

5. 프로젝트 생성(Vue)

VS Code > Turminal(cmd) 실행

//step1 : 프로젝트명을 입력합니다.
vue create 프로젝트명

 

이렇게 명령어 쓰고난뒤에 아래와 같이 뜬다.

 

//step2 : 세팅 설정 옵션을 선택합니다.

? please pick a preset:(Use arrow keys) //뭘로 세팅할래?
  Default([Vue 2] babel, eslint) //vue2 버전
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)//vue3 버전 -> 난 요것! 
  Manually select features //custom

 

 

 

7. 프로젝트 생성한 파일을 vs code > workspace 로 열기

 

 

6. 프로젝트 로컬 서버 실행

workspace 폴더 경로에서 > Turminal(cmd) 실행

 

npm run serve

 

 

  App running at:
  - Local:   http://localhost:8080/ //로컬서버주소 
  - Network: http://172.30.1.58:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

 

 

Vue 프로젝트 생성, 로컬 환경  완성 !