Vue CLI는 무엇입니까?

커맨드 라인을 사용한 Vue.js 개발 지원 도구

관리는 프로젝트 단위

프로젝트를 만들 때 사용할 플러그인과 라이브러리를 미리 설치할 수 있습니다.

webpack 포함이므로 즉시 개발이 시작됩니다

※CLI는 Commnad Line Interface의 약어

설치

사전 확인

node.js와 npm은 기초로서 필수이므로 넣어 둡시다.

들어 있는지 확인

$ node --version
$ npm --version

설치

$ npm install -g @vue/cli

설치되었는지 확인

$ vue --verion

※최신이 들어가므로, 2020 4/24 시점에서는 4.3.1

예, 설치는 이것으로 끝납니다.

신규 프로젝트 작성

그럼, 우선 형태만, 프로젝트의 베이스를 만들어 봅시다.

원하는 디렉토리로 이동한 다음 프로젝트 이름 sample-app로 작성해 봅니다.

$ vue create sample-app

그러면
기본 (babel 또는 eslint 패키지 포함 상태)로 만들지
매뉴얼(하나씩 수동으로 플러그인 선택)으로 만들지 묻습니다.

> default (babel, eslint)
  Manually select features

이번에는 매뉴얼을 선택합니다.
그러면 다양한 선택 가능한 플러그인이 표시됩니다.

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

사용하고 싶은 것을 선택해 체크 넣어 주세요.

조작 방법은,
화살표의 ↑↓로 이동하여 해당 항목에서 스페이스를 누르면 선택할 수 있습니다.
끝나면 엔터로 결정한다.

우선 CSS Pre-porcessors는 필수입니다.
Babel, Linter도 물론 저쪽이 좋을 것입니다.
다른 사람은 하고 싶은 것에 따라.

이 후에는 선택한 플러그인에 대해 여러가지 물어볼 수 있으니 잘 해보세요.

그리고 마지막으로,
"향후를 위해서도 이번 설정을 저장할까?"라고 묻습니다.

? Save this as a preset for future projects?

같은 설정으로 프로젝트를 여러 번 만들 기회가 있다면 편리하다고 생각하십니까?
우선, no라는 의미로, 아무것도 입력하지 않고 엔터합니다.

이것으로 프로젝트 작성 프로그램이 계속 뛰어납니다.
잠시 기다리자.

핏타와 움직임이 멈추고 다음 텍스트가 표시되면 무사히 작성 완료입니다.

...
🎉  Successfully created project sample-app.
👉  Get started with the following commands:

 $ cd sample-app
 $ npm run serve

마지막 두 줄로,
「프로젝트 디렉토리로 이동해, 내장 서버 기동해 확인해 보아?」라고, 유언의 압력을 가할 수 있습니다.

지금까지 설정이 완료되었습니다.

어이와 확인

프로젝트 디렉토리로 이동한 후 내부 장기 서버를 시작합니다.

$ npm run serve

브라우저로 접속해 본다.
http://localhost-8080.com/



이런 페이지가 표시되어 있으면 일단 OK입니다.
이것은 프로젝트를 만들 때 미리 자동으로 준비되는 기본 페이지이지만,
여기에서 오리지널 페이지 작성으로 들어가서 개발이 시작됩니다.

우선은 이것으로 입구에 설 수 있었습니다.
수고하셨습니다.

【공식】Vue CLI
htps : // cぃ. 아 js. rg/