크롬브라우저에서 Vue 개발자 도구 설치하기
크롬 웹 스토어에서 vue를 검색해서 Vue.js devtools 를 설치하자.
Vue를 개발할 개발툴 Atom 을 설치하고, 개발에 필요한 패키지등을 설치하기
뭐 이건 개인이 편한걸 되지만, Atom써보니 썩 괜찮은 툴인거 같다.
뭔가 툴이 찰지다고 해야 하나? 타이핑하면서 툴의 반응이 찰지다.
설치가 완료되면, 테마를 바꿔보자.
아톰 테마 설치
seti-ui를 설치한뒤 atom-material-syntax-dark 도 검색하여 설치하자.
seti-ui는 직관적인 파일아이콘등을 표시해주는 테마이고, atom-material-syntax-dark는 자바스크립트 코드 구문을 강조해주는 테마이다.
Atom에서는 설치한 테마를 수동으로 적용해 줘야 한다.
Settins의 Themes로 이동하여 Ui Theme에 방금 설치한 seti를 선택하자.
아톰 패키지 설치
이번에는 Atom에서 Vue 개발시 쓸만한 패키지를 설치해보자.
Settings의 Install 탭으로 가서 Packages 버튼을 클릭하자.
검색어로 language-vue 를 검색해서 설치하자.
그리고 language-vue 가 아주 편한점이 있는데, 이 패키지는 vue 파일에서 태그를 아주 쉽게 생성해준다.
vue 파일에서 작성을 하고 싶은 태그를 그냥 타이핑하다가 tab을 누르면 자동으로 생성해준다.
예를 들어 html태그를 생성하고 싶다면, 그냥 htm까지만(꺽쇠는 빼고) 치고 탭을 누르면 아래처럼 자동으로 생성해준다.
vue에서 tempate, script, style 태그등을 자주 사용하는데 아주 편한 기능인 것 같다.
Node.js 설치하기
뭐 Angular오 마찬가지로 Vue의 다양한 프로토타이핑 프로젝트를 CLI로 생성하기 위해서 반드시 필요하다.
이것도 그냥 홈페이지 가서 설치하면 된다.
다만 LTS 버전 설치를 추천한다.
Vue CLI 설치하고 간단한 Vue 프로젝트를 만들어 실행해보자.
cmd 창을 열고 install vue-cli -global을 입력하여 Vue CLI를 설치하자.
이것을 설치하면 터미널에서 커맨드 명령어로 다양한 Vue 프로토타입 프로젝트를 생성 할 수있다.
설치가 끝나면 vue명령어를 입력해보자.
vue list를 입력하면 생성할수 있는 vue 프로토타입 프로젝트의 종류가 보인다.
Vue.js 개발환경 만들기 끝!!!
마무리
다음 글에서는 Vue CLI 로 간단한 프로젝트를 만드는 방법에 대해서 알아보겠다.