VUE.JS HelloWolrd
CLI3로 프로젝트 생성
http://vuejs.kr/vue/vue-cli/2018/01/27/vue-cli-3/
내용을 바탕으로 작성되었습니다.
VUE.JS 내용정리를 위해 세팅중 CLI(Command line Interface) 버전이 3.0으로 올라갔습니다
VUE.JS CLI를 이용하면 초기 설정 및 개발에 필요한 툴(빌드,배포,테스트) 의 설정을 해줍니다.
CLI3 부터는 기존의 CLI와 다르게 GUI를 지원합니다.
CLI3설치부터 시작하여 빌드 배포 까지 하나씩 진행해보도록하겠습니다.
우선 npm을 설치해야되는데요
없으신 분들은 아래의 링크로 가셔서 설치하시면 될 것 같습니다.
설치하고 커맨드 창을 실행시키고.
npm을 통해 vue cli를 설치해줍니다.
npm install -g @vue/cli
그리고 vue ui 명령어를 통해 cli3 gui를 실행을해줍니다.
브라우저에 다음과 같이 cli가 실행이됩니다.
다음의 에러가 나오시는분은
npm install -g core-js
명령어로 core-js 설치후 다시 실행하시면됩니다.
이제 hello라는 프로젝트를 하나 생성해보겠습니다.
Create메뉴클릭후 폴더를 설정하고
하단의 Create a new project here 버튼을 클릭합니다.
Project folder에 원하는프로젝트 이름
packager mananger 에 npm
(yarn도 되지만 개인적인 취향입니다)
설정후 Next를 클릭합니다.
CLI3에서는 프로젝트 세팅(preset)을 관리할수있게 해줍니다.
그래서
Default preset(babel, eslint만 있음)
Manual (설정)
Remote preset (git등에 올려진 설정 불러오기) 이렇게 3개의 모드가 있습니다.
manual 설정을 해보도록하겠습니다.
기존 CLI2,CLI3에서 설정하던 프로세스를 GUI로 할수있습니다.
여기서 Babel,Router,VueX,Css Pre-processors,Linter/Formatter 에 체크를 하고 진행하겠습니다.
Css pre-processor를 Scss를 선택하고
코딩 스타일을 가이드해주는 Linter/formatter는 eslint+standard config를 설정합니다.
그 후 create Project를 클릭합니다
이 후 나오는
save as a new preset 화면에서 설정을 저장 해 놓을수 있습니다.
Contitue without saving 혹은 Create a new preset를 클릭하면
다음 화면과 함께
터미널에서
열심히 프로젝트틀 세팅합니다
다음처럼 화면이 바뀐것을 볼수있습니다
우선 왼쪽에서 4번째 문서 모양의 버튼을 클릭하면
기존에 cmd로 진행하던 serve,build,lint등을 클릭으로 실행할수있습니다
serve를 클릭후 run task를 클릭하여 실행을해보도록하겠습니다.
이후 localhost:8080를 브라우저에서 접속하면
다음과 같은 예제를 확인하실수 있습니다.
