Vue.js에서 프로젝트를 만들고 시작해보십시오 (꽤 초보자 용)

전회의 계속입니다.

Vue.js가 설치 될 때 완료되면 프로젝트를 만들 수 있습니다.

이전과 마찬가지로 이번에도 VSCode 명령줄에서 작업을 수행합니다.

VSCode 시작 → [View] → [Terminal]로 명령을 시작합니다.

흐름으로서는 아래와 같습니다
① 프로젝트를 만들려는 디렉토리로 이동
② 프로젝트 작성 명령 실행
③개발 서버 실행
순서를 따라 설명해 가고 싶습니다.

① 프로젝트를 만들려는 디렉토리로 이동
변경 디렉터리 명령으로 프로젝트를 만들려는 디렉터리로 이동합니다.



cd 프로젝트를 만들려는 디렉토리의 전체 경로

에서 Enter 키를 누르면 이동할 수 있습니다.

② 프로젝트 작성 명령 실행

1. 프로젝트 작성 명령 실행


vue project 〇〇〇〇(작성하고 싶은 프로젝트명)

에서 엔터 키를 누르면 프로젝트 작성 명령이 실행 아래와 같은 화면이 출력됩니다.

2. 프리셋 설정


"프리셋 설정을 선택하십시오"라고 들었습니다.
이번에는 우선 시험으로 작성하므로 맨 아래의 "Manually select feautures"(수동)을 선택합시다.

3. 필요한 패키지 선택


이것은 나중에 변경할 수 있으므로 이대로 엔터 키를 눌러 진행합니다.

4. Vue.js 버전 선택


이번에는 Vue.js의 버전을 "2"로 할 것인지 "3"으로 할지 선택 항목이 나왔습니다.
나도 자세한 차이는 잘 모르기 때문에 이번에 조사해 또 기사로 하려고 합니다.
이번에는 우선 「2」를 선택합니다.

5. ESLint 사전 설정 선택


"Eslint + Standard Config"를 선택합시다 (표준)

6. 린트의 실행 타이밍



그대로 괜찮습니다 (Lint on save)

7. 각종 설정을 개별 파일에 쓰는가? package.json에 쓰는가?



이번에는 개별적으로 설정합니다.

8. 마지막으로이 설정으로 좋습니까? 확인 메시지가 표시됩니다.
y 키를 누른 후 Enter 키를 누르십시오.

그런 다음 Enter 키를 다시 누릅니다.
그러면 프로젝트 작성 명령이 자자 흐르므로 자주 기다리자.



이 빨간색 프레임과 같은 메시지가 나오면 작성 성공입니다! ! ✨✨✨

③개발 서버 실행
프로젝트를 성공적으로 만들 수 있었으므로 개발 서버를 실행합니다.



먼저 변경 디렉토리 명령으로 만든 프로젝트 이름의 폴더로 이동합니다.
cd project-hogehoge

그런 다음 npm run serve를 입력하고 Enter 키를 누릅니다.
서버에 대한 연결이 시작됩니다.



연결이 완료되면 이러한 화면이 표시됩니다.
빨간색 테두리에 표시된 URL(http로 시작하는 URL)을 브라우저에 입력하여 연결해 봅시다.



이러한 이미지가 표시되는 라 프로젝트의 작성과 기동은 성공입니다! ! !