[to-do-app] Vue 환경설정

간단한 웹 애플리케이션을 만들면서 Vue에 대해서 포스팅 해보고자 합니다.
vue는 과제를 하면서 많이 써본 프레임워크이지만 항상 vuex 를 사용할 때면 설정을 하는 방법을 까먹어서 자주 강의나 만들어놨던 코드를 뒤적거리고 했습니다.  이번 기회에 확실히 복습하며 정리를 해야겠어요. 😃

 

https://www.inflearn.com/course/vue-pwa-vue-js-%EC%A4%91%EA%B8%89/dashboard

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex - 인프런 | 강의

위는 인프런의 참고 강의 입니다. 좋은 강의이니 유료여도 결제해서 보심을 추천드립니다.

---

 

 개발환경 설정하기 

1. Node.js 설치

https://nodejs.org/en/

Node.js

npm 을 사용해야 하기 때문에 Node.js를 설치합니다.

나중에 귀찮아지지 않도록 안정성을 확보하기 위해서 LTS 버전을 다운받도록 합시다.

 

 

2. Visual Studio Code 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

우선 자주 사용하는 IDE인 Vscode 를 자신의 윈도우 환경에 맞게 설치를 해줍니다.

 

 

3. Vscode 플러그인 설치

Vscode 플러그인 탭으로 이동합니다.

[보기] - [확장] 을 클릭하거나 좌측 메뉴 탭에서 [확장] 을 클릭합니다.

 

✔️ Vetur
✔️ TSLint

많은 사람들이 사용하는 Vue 플러그인 입니다. 하이라이팅 및 snippet, 디버깅 등의 기능을 가지고 있습니다.

TSLint 는 비교적 엄격한 JavaScript 문법 플러그인 입니다. 문법 오류를 잡을 때 유용합니다. 설치해주도록 합시다.

아래는 추가적으로 설치하면 좋을 플러그인 들입니다. (저는 vscode 를 처음 설치할 때면 꼭 깔아줍니다.)

 

✔️ Auto Close Tag
✔️ Auto Complete Tag
✔️ Auto Import
✔️ Auto Rename Tag

자동으로 태그들을 닫아주거나 틀린 태그를 수정해주는 플러그인 들입니다. 설치해두면 정말 유용하고 편합니다.

 

✔️ Live Server
✔️ Material Icon Theme
✔️ Night Owl
✔️ npm
✔️ Prettier - Code formatter

별도의 서버 필요 없이 html 파일을 브라우져 내에서 로드해주거나, 아이콘을 변경해주는 추가적인 플러그인 들입니다.

지금 제가 사용하고 있는 스킨 테마 플러그인도 있습니다. (Night Owl을 사용하고 있습니다.)

Prettier 는 자동으로 포맷을 해줍니다.

 

 

4. Vue.js devtools 설치

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Vue.js devtools

구글 웹스토어로 가서 [Vue.js devtools] 를 설치합니다. 크롬에서 사용할 수 있는 플러그인 입니다.

 

 

 

 

 

 

 

 

Vue 환경설정

Vue 플러그인

Vue 개발환경설정

---