vue-cli를 사용하여 프로젝트를 만들고 시작할 때까지의 단계

vue cli (vue create)로 프로젝트 만들기

vue create pjName

프로젝트 작성을 튜토리얼을 따라 선택해 갑니다.
무엇을 하고 있는지는 아래 페이지에서 대략 파악했습니다.
Vue-CLI 4를 사용한 JavaScript 개발 환경 구축 (프로토 타입 및 프로젝트 버전)

Please pick a preset:
프로젝트를 만드는 방법을 선택합니다.
Manually select features를 선택하고 설정을 선택합니다.

Check the features needed for your project:
프로젝트에 배포할 라이브러리를 선택합니다.
이번에는 Babel, Router, Vuex, Linter

Use history mode for router?
Vue Router의 History 모드를 사용할지 여부를 설정합니다.
이번에는 이용하는 설정(Yes)을 합니다.

Pick a linter/formatter config:
ESLint 사전 설정을 선택합니다.
Build a Real-time Chat App with Pusher and Vue.js 에서는, Basic 입니다만, 존재하지 않기 때문에 「Standard」를 선택했습니다.

Pick additional lint features:
ESLint의 실행 타이밍을 선택합니다.
저장할 때 수행 할 설정을 선택하십시오

Where do you prefer placing config for Babel, ESLint, etc.?
라이브러리 (Babel 또는 ESLint)의 설정 파일 배치 위치를 선택합니다.
이번에는 "In dedicated config files (전용 설정 파일 내)"를 선택.

Save this as a preset for future projects?
다음 번 이후의 create project에서 사용 가능한 프리셋에 등록하거나 설정합니다.
이번에는 설정하지 않습니다.

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback in p
roduction) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to
 invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config fi
les
? Save this as a preset for future projects? (y/N) n

위 설정을 완료하고 아래 화면이 나오면 작성 완료입니다.

Successfully created project vue-chatkit.
Get started with the following commands:

 $ cd vue-chatkit
 $ npm run serve

이 상태에서 프로젝트를 만든 폴더로 이동하여 다음 명령을 실행하면,
로컬로 서버가 시작됩니다.

npm run serve

localhost:8080에서 브라우저에서 액세스하면 샘플 페이지가 표시됩니다.



생성 된 소스를 VSCode에서 볼 때 vue 파일을 열고 모든 문자가 흰색이면,
VSCode 확장 기능의 "Vetur"을 설치하면 구문별로 색칠됩니다.