node.js

vue CLI

컨텐츠 정보

본문

vue CLI

뷰 개발자들이 좀더 편하게 프로젝트를 구성할 수 있도록 코어팀에서 CLI(Command Line Interface) 도구를 제공하고 있으며, 커맨드 창에서 특정 동작을 수행할 수 있도록 하는 도구입니다.


설치 방법은 커맨드창에서 아래와 같이 합니다.

npm install -global vue-cli


설치 후 확인은 커맨드 창에 vue를 입력하면 아래와 같이 확인이 가능합니다.


vue CLI 명령어는 아래와 같습니다.


명령어 (붉은 색은 탬플릿 명)  설명
vue init webpack 프로젝트명  고급 기능을 활용한 프로젝트 구성. 문법검사 등 다양한 지원
vue init browserify 프로젝트명  브라우저리파이 기능을 활용한 고급프로젝트 구성방식이며 다양한 지원이 가능함
vue init webpack-simple 프로젝트명  웹팩의 최소기능만을 활용한 깔끔한 프로젝트 생성이 가능(개인적으로 가장 선호함)
vue init browserify-simple 프로젝트명  브라우저리파이 최소기능만을 활용한 프로젝트 구성
vue init simple 프로젝트명  최소 뷰기능만 들어간 HTML 파일 1개만 생성하여 프로젝트 구성 
vue init pwa 프로젝트명  PWA(Progressive Web App) 기능을 지원하는 프로젝트 



프로젝트를 아래와 같이 생성합니다. (프로젝트명 : test-project, 템플릿명 : webpack-simple)

과거에는 프로젝트명을 빼고 템플릿명까지만 입력했지만, 지금은 그렇게 입력하면 에러가 발생하니 프로젝트명까지 입력해줘야 합니다.


만약 위와 같이 입력했는데 아래와 같은 에러 메세지가 시현된다면 

cli-init 가 설치되지 않아 발생하는 오류이니 cli-init를 아래와 같이 설치해 줍니다.

npm install -g @vue/cli-init


이제 vue CLI 설치가 끝이 났습니다.


프로젝트를 설치해보면 정상 설치 되는 것을 확인할 수 있습니다.


이제 위 화면처럼 프로젝트 생성 후


cd test-project <enter>
npm install <enter>
npm run dev <enter>

와 같이 명령어를 입력해 줍니다.



브라우저 창에 http://localhost:8080 처럼 입력하면 아래와 같은 화면이 시현되면 정상입니다.


만약 로컬환경에서 테스트가 아닌 서버에서 vue.js를 직접 설치 후 테스트 하는 경우는

npm run dev 후 http://localhost:8080 이 아닌

npm run build 명령어를 실행해서 루트에 생성된 index.html을 도메인과 함께 실행하면 됩니다.


즉, 서버에 vue.js를 설치해서 원격으로 작업하는 경우는..

app.vue를 포함한 소스와 템플릿 작업 후 매번 커맨드창으로 build를 해서 브라우저로 확인 하는 절차로 작업하면 되겠습니다.


이상 마칩니다.

관련자료

댓글 0
등록된 댓글이 없습니다.
Total 10 / 1 Page
번호
제목
이름

최근글


새댓글


알림 0