vue CLI
컨텐츠 정보
- 3,624 조회
본문
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를 해서 브라우저로 확인 하는 절차로 작업하면 되겠습니다.
이상 마칩니다.