뷰로 웹 앱을 개발하기 위한 환경 설정
필요한 도구
1. 크롬 브라우저
2. 아톰 Atom 또는 비쥬얼스튜디오코드 VS Code 와 같은 텍스트 에디터
3. 노드제이에스 Node.js
4. 뷰 개발자 도구 (Vue.js devtools, 크롬 확장 플로그인)
Atom 으로 vue.js 개발시 설치할 패키지
1. language-vue - hedefalk
- 설치 후 확인 방법 : main.vue 파일 생성 후 temp 치고 텝하면 기본 코드 자동 입력
- Atom 다운로드 : https://atom.io/
VS Code 로 vue.js 개발시 유용한 plugin
1. Vetur - Pine Wu
: vue.js 코드 문법강조, 자동완성, 디버깅, Lint 등 지원
2. Vue 2 Snippets - Hoolowtree
: vue.js 컴포넌트 속성 지원 및 자동완성 지원
3. Vue Peek - Dario Fuzinato
: 컴포넌트 추적
4. ESLint Dirk Baeumer & 5. Prettier - Code formatter - Prettier
: 잘못된 문법이나 프로젝트 한경에 맞는 코드 스타일에 따라 자동으로 맞춰주는 기능
6. DotENV - mikestead
: .env 환경 파일 syntax
7. devtools vue - chrome 확장프로그램
- Visual Studio Code 다운로드 : https://code.visualstudio.com/
Node.js
노드제이에스는 서버 사이드 자바스크립트, 서버 측에서 실행되는 자바스크립트 실행 환경
뷰 CLI(Command Line Interface)를 사용해서 뷰 프로젝트를 구성하려면 필요하다.
- Node.js 다운로드 : https://nodejs.org
- 설치 후 화인 방법 : 윈도우 명령 프롬프트(cmd)나 맥 터미널(Terminal)에서 node -v 입력 후 엔터치면, 노드의 버전 출력
뷰 개발자 도구
뷰로 만든ㄴ 웹 앱의 구조를 디버깅하거나 분석할 수 있게 하는 개발자 도구
크롬 웹스토에서 검색 설치 가능하다
설치한 뷰 개발자 도구는
브라우저 주소 창 옆 설정 버튼(세로 점 3개 메뉴) - 도구 더보기 - 개발자 도구 클릭 ( 단축키 Ctrl + Shift + i 또는 F12 / 맥에서는 cmd + option + i )
댓글