Vue.js 개발환경 셋팅하기

먼저 Vue.js 를 쓰기위해 개발환경을 셋팅해야한다.

먼저 크롬을 써야한다. 크롬 다운방법은 따로 설명하지 않겠다.

다음 아톰(Atom)이라는 텍스트 에디터를 설치해준다.

아톰은 깃허브에서 제작한 무료 텍스트 에디터로 유료 개발 도구와

비교했을 때 아톰은 일단 무료일 뿐만 아니라 확장 플러그인들을

이용하여 유용한 기능들을 추가할 수 있기 때문에 기능 면에서도 우수하여

유료 개발 도구에 뒤지지 않는다. 또한 깃허브에서 꾸준히 에디터의 성능을

개선해 나가고 있기 때문에 믿고 사용할 수 있는 개발 도구이다.

먼저 구글에 atom을 검색하여 사이트에 들어간후

다운 받을수 있다. 다음 아톰을 실행해보자.

먼저 아톰에서 File -> Settings 들어가서 테마를 다운받아보도록 하자

아래의 이미지에서 Install을 누른후

검색창에 atom-material-syntax-dark 를 친후 Themes를 누르자

다음 아래의 이미지처럼 Install 한다.

다음 seti-ui도 똑같이 해준다.

다음 아래 이미지처럼 Setting 에서 Themes 탭에서

UI Theme 탭을 누른후 방금 다운받음 Seti 적용시켜준다.

다음 UI Theme 밑에 Syntax Theme 에서 Atom Material Dark 설정한다.

다음 다시 검색창에 language-vue 검색후 Packages 누른후 Install 한다.

다음 아래의 이미지처럼 OpenConfig Folder 누른후

프로젝트란에 마우스 우클릭후 새로운 파일을

만든후 Main.vue파일을 생성한다.

다음 Main.Vue에서 tem 을 치면 아래와같이 자동완성 기능이

생긴걸 확인할수 있다.

다음 Node.js를 설치하자 주소창에 nodejs.org를 쳐서 들어갈수 있다.

다음 (2018/3/28 기준) 8.10.0 버전의 LTS를 다운받는다.

이제 다운받은 Node.js 응용프로그램을 설치해준다 라이센스 동의 하고 Next 눌러주며

설치를 한다. 나같은 경우 경로를 C 에 User 에 다운받았다.

다음 노드제이에스가 제대로 설치했는지 확인을 위해 

cmd 창에 node -v를 입력하여 버전확인을 한다.

윈도우10이 아닌경우 설치받은 node.js 폴더에서 Shift를 누른 상태에서

마우스 우클릭하여 여기서명령창열기 를 이용해 해당 폴더의

명령프롬프트창을 열수 있지만 윈도우10은 없으므로

cmd 에서 직접 cd node.js 를 입력하여 경로를 이동해준다.

다음 뷰 개발자 도구를 설치해준다.

구글에 vue.js devtools 를 입력하여 첫번째 링크 사이트

들어간후 설치한다. 아마 크롬의 플러그인 스토어로 이동될것이다.

우측 상단의 CHROME에추가 누른후 확장프로그램추가를 눌러주자

아래처럼 크롬 우측상단에 뷰 로고 모양의 아이콘이 생길것이다.