Vue.js 개발환경 잡기(Widnwos10)

크롬 웹 스토어에서 vue를 검색해서 Vue.js devtools 를 설치하자.

난 이미 설치가 되어있어서 평가하기 버튼으로 설치버튼이 평가하기 버튼으로 나온다.

뭐 이건 개인이 편한걸 되지만, Atom써보니 썩 괜찮은 툴인거 같다. 뭔가 툴이 찰지다고 해야 하나? 타이핑하면서 툴의 반응이 찰지다.

그냥 홈페이지 가서 설치하면 된다.

설치가 완료되면, 테마를 바꿔보자.

file -> settings -> Install 로 이동하여 Themes 를 선택하고 seti-ui 를 검색하여 Install 하자.

seti-ui를 설치한뒤 atom-material-syntax-dark 도 검색하여 설치하자. seti-ui는 직관적인 파일아이콘등을 표시해주는 테마이고, atom-material-syntax-dark는 자바스크립트 코드 구문을 강조해주는 테마이다.

atom-material-syntax-dark 테마도 설치하자.

Atom에서는 설치한 테마를 수동으로 적용해 줘야 한다. Settins의 Themes로 이동하여 Ui Theme에 방금 설치한 seti를 선택하자.

선택하면 그 즉시 테마가 적용된다. 기본테마보다는 뭔가 뚜렷하고 색감이 진해져서 보기가 좋다.

Syntax Theme도 방금 설치한 atom material dark로 변경해주자. 이녀석은 소스 구문테마라 지금 딱히 변화는 없다.

이번에는 Atom에서 Vue 개발시 쓸만한 패키지를 설치해보자. Settings의 Install 탭으로 가서 Packages 버튼을 클릭하자. 검색어로 language-vue 를 검색해서 설치하자.

패키지는 테마와 달리 설치히 바로 적용이 된다.

테마가 적용되어 파일확장자에 따라 아이콘이 다른것을 확인 할수 있다.

그리고 language-vue 가 아주 편한점이 있는데, 이 패키지는 vue 파일에서 태그를 아주 쉽게 생성해준다. vue 파일에서 작성을 하고 싶은 태그를 그냥 타이핑하다가 tab을 누르면 자동으로 생성해준다.

예를 들어 html태그를 생성하고 싶다면, 그냥 htm까지만(꺽쇠는 빼고) 치고 탭을 누르면 아래처럼 자동으로 생성해준다.

원하는 태그를 꺽쇠 없이 치다가 tab을 눌러주면

이렇게 자동으로 만들어준다.

vue에서 tempate, script, style 태그등을 자주 사용하는데 아주 편한 기능인 것 같다.

뭐 Angular오 마찬가지로 Vue의 다양한 프로토타이핑 프로젝트를 CLI로 생성하기 위해서 반드시 필요하다. 이것도 그냥 홈페이지 가서 설치하면 된다. 다만 LTS 버전 설치를 추천한다.

그냥 설치해주면 된다.

설치가 끝난다음, cmd 에서 node -v 를 입력해서 버전확인을 할 수 있다.

cmd 창을 열고 install vue-cli -global을 입력하여 Vue CLI를 설치하자. 이것을 설치하면 터미널에서 커맨드 명령어로 다양한 Vue 프로토타입 프로젝트를 생성 할 수있다.

터미널을 열고 install vue-cli -global를 입력하여 설치.

설치가 끝나면 vue명령어를 입력해보자. vue list를 입력하면 생성할수 있는 vue 프로토타입 프로젝트의 종류가 보인다.

vue 명령어로 vue 설치 확인.

Vue.js 개발환경 만들기 끝!!!

다음 글에서는 Vue CLI 로 간단한 프로젝트를 만드는 방법에 대해서 알아보겠다.