Vue.js 개발 환경 세팅(Windows)

손지민·2024년 3월 20일
0

Vue.js

목록 보기
2/4
post-thumbnail

개요

Windows 기준으로 Vue.js 학습을 위한 세팅을 진행합니다.

  • VSCode
  • Node.js
  • Cmder(Windows 사용자 설치)
    • VSCode 상에서 NPM 명령어, Node 를 쳤을 때 명령어 인식이 잘 안되는 경우에 Cmder 설치하여 뜨는 콘솔에 Git 명령어라든가, NPM 명령어 등등 작성하여 사용하면 됩니다.

3개 설치

VSCode - 플러그인 4개 설치

  1. 뷰 코드 스니펫 : Vue VSCode Snippets

  2. 실습 환경 보조 : Live Server

  3. 파일 아이콘 테마 : Material Icon Theme

  4. 색 테마 : Night Owl

  5. Vue 3 : Volar (Vetur 써야하면 플러그인에 volar 검색해서 사용 안함 체크)

추가

뷰 확장 플러그인 : Vetur
문법 검사 : ESLint, TSLint
기타 : Prettier, Project Manager, Auto Close Tag, GitLens, Atom Keymap, Jetbrains IDE Keymap 등

VSCode - 터미널(Terminal) 설정

맨위 터미널(Terminal) - 새 터미널(New Terminal) 클릭 시 터미널 열림

  • node -v 이나 npm 입력이 잘 안되는 경우
    • 터미널 종류를 맥 사용자의 경우 zsh(대부분의 맥 사용자), 윈도우 같은 경우 powershell 말고 bash(윈도우)로 바꿔도 되고
    • 윈도우 같은 경우 안되면 cmder 사용해도 됩니다(추천)

      터미널 키고 우측에 bash 옆 '+' 옆에 있는 아래 화살표 클릭 git bash 클릭

VSCode - Vue3부터는 Vetur(x), Volar(o) 사용

Vue.js devtools

구글에 vue.js devools 검색해서 Chrome 확장 프로그램 설치

  • Vue2 쓰던 사람은 Vue.js devtools legacy 써도 되지만 최신 버전 권장

참고

인프런 장기효(캡틴판교) - Vue 3 시작하기

profile
Developer

0개의 댓글