Java를 주 언어로 사용하는 사람에게 이클립스 혹은 인텔리J등의 Tool 익숙합니다. Vue.js를 공부하면서 느낀점은 별도의 Visual Studio Code 를 설치해서 Tool을 따로 써야하는 불편함이 있어서 찾아보았습니다. 미약하지만 이클립스에도 플러그인이 존재를 합니다.
우선 이클립스의 Help 메뉴의 Eclipse Marketplace 메뉴를 클릭합니다.
Marketplace에서 vue를 검색하면 아래와 같이 플러그인이 나옵니다. 이중에서 "Vue.js :: CodeMix 3 Cl 2020.07.22"를 인스톨 해줍니다.
저는 이미 설치를 해서 Installed 라고 나타납니다. 설치 후 이클립스를 재기동하여 프로젝트를 새로 만들어줍니다. New > Project 선택하면 아래와 같은 창이 나오는데 거기서 vue라고 입력하면 아래와 같이 나타납니다.
Vue Project를 선택하고 프로젝트명은 임의로 입력을 합니다. 저는 vue-test라고 했습니다. 여기서 Initialize project contents with 부분을 "A Vue CLI-built application (recommended for production-grade apps)"를 선택하여 줍니다.
이렇게 프로젝트를 생성하면 처음으로 아래와 같은 화면이 열립니다.
일단 terminal 을 열어서 "npm install"을 하고 그리고 "npm run serve"를 실행하여 http://localhost:8080 으로 화면을 볼수 있다고 합니다.
여기서 npm install은 프로젝트의 package.json(or package-lock.json)에 정의된 관련 모듈을 받아주는 것입니다. 이부분도 향후에 자세히 설명을 다시하겠습니다. 일단 기본적으로 설정하고 돌려보겠습니다. 실행전에 vue-cli(npm install -g vue-cli)가 설치되어 있어야합니다.
명령어를 실행하면 무엇인가 설치가 되고 완료가 되면 프로젝트에 node_modules 폴더가 생성됩니다.
이 폴더를 열어보면 엄청나게 많은 모듈이 폴더별로 들어있습니다. 이렇게 저희가 사용하는 모듈의 정의를 package.json(or package-lock.json)에 하면 npm install을 통해서 자동 설치를 할 수 있게됩니다. 그러므로 node_modules 라는 폴더는 팀개발시 공유하지 않고 package.json(or package-lock.json) 파일의 정의된 모듈을 각자 npm intall을 통해 설치하도록 하면 관리가 쉬울 것 같습니다.
다음으로 npm run serve 를 실행해보도록 하겠습니다.
실행하면 위와 같이 나타나고, http://localhost:8080 으로 접속을 하면 아래와 같이 Vue.js 화면이 나타납니다.
이렇게 Vue.js 프로젝트를 이클립스에서 생성하고 사용을 도와주는 플러그인을 확인해 보았습니다. 화면에 npm run build 는 배포를 하기위한 명령어 인데 나중에 관련하여 글을 남기도록 하겠습니다.