빠른 시작: Visual Studio를 사용하여 첫 번째 Vue.js 앱 만들기

아티클
11/06/2023

Visual Studio IDE(통합 개발 환경)에 대한 이 5~10분 분량의 소개에서는 간단한 Vue.js 웹 애플리케이션을 만들고 실행할 것입니다.

필수 조건

Node.js 개발 워크로드와 Visual Studio가 설치되어 있어야 합니다.

아직 Visual Studio 2019를 설치하지 않은 경우 Visual Studio 다운로드 페이지로 이동하여 체험용으로 설치합니다.

워크로드는 설치해야 하지만 Visual Studio는 이미 있는 경우 도구>도구 및 기능 가져오기... 로 이동하면 Visual Studio 설치 관리자가 열립니다. Node.js 개발 워크로드를 선택한 다음 수정을 선택합니다.
Node.js 런타임을 설치해야 합니다.

아직 설치하지 않은 경우 외부 프레임워크 및 라이브러리와의 호환성을 최대화하기 위해 Node.js 웹 사이트에서 LTS 버전을 설치하는 것이 좋습니다. Node.js는 32비트 및 64비트 아키텍처용으로 빌드됩니다. Node.js 워크로드에 포함된 Visual Studio의 Node.js 도구는 두 버전을 모두 지원합니다. 하나만 필요하며 Node.js 설치 관리자는 한 번에 하나의 설치만 지원합니다.

일반적으로, 설치된 Node.js 런타임은 Visual Studio에서 자동으로 검색됩니다. 설치된 런타임이 검색되지 않으면 속성 페이지에서 설치된 런타임을 참조하도록 프로젝트를 구성할 수 있습니다(프로젝트를 만든 후 프로젝트 노드를 마우스 오른쪽 단추로 클릭하여 속성을 선택하고 Node.exe 경로를 설정합니다). Node.js의 전역 설치를 사용하거나 각 Node.js 프로젝트에서 로컬 인터프리터 경로를 지정할 수 있습니다.

프로젝트 만들기

먼저 Vue.js 웹 애플리케이션 프로젝트를 만듭니다.

Node.js 런타임이 아직 설치되어 있지 않으면 Node.js 웹 사이트에서 LTS 버전을 설치합니다.

자세한 내용은 필수 조건을 참조하세요.
Visual Studio를 엽니다.
새 프로젝트를 만듭니다.

Esc 키를 눌러 시작 창을 닫습니다. Ctrl+Q를 입력하여 검색 상자를 열고, Basic Vue.js를 입력한 다음, Basic Vue.js 웹 애플리케이션(JavaScript 또는 TypeScript)을 선택합니다. 표시되는 대화 상자에서 basic-vuejs의 이름을 선택한 다음, 만들기를 선택합니다.

기본 Vue.js 웹 애플리케이션 프로젝트 템플릿이 표시되지 않으면 Node.js 개발 워크로드를 추가해야 합니다. 자세한 지침은 필수 조건을 참조하세요.

Visual Studio가 새 프로젝트를 만듭니다. 새 프로젝트가 솔루션 탐색기(오른쪽 창)에 열립니다.
애플리케이션에 필요한 npm 패키지 설치 진행률은 출력 창(아래쪽 창)을 확인합니다.
솔루션 탐색기에서 npm 노드를 열고 나열된 npm 패키지가 모두 설치되었는지 확인합니다.

패키지가 누락된(느낌표 아이콘) 경우는 npm 노드를 마우스 오른쪽 버튼으로 클릭하고 누락된 npm 패키지 설치를 선택합니다.

IDE 탐색

오른쪽 창에서 솔루션 탐색기를 살펴봅니다.
- 굵게 강조 표시된 것은 새 프로젝트 대화 상자에서 지정한 이름을 사용하는 프로젝트입니다. 디스크에서 이 프로젝트는 프로젝트 폴더의 .njsproj 파일로 표시됩니다.
- 최상위 수준은 기본적으로 프로젝트와 이름이 동일한 ‘솔루션’입니다. 디스크에서 .sln 파일로 표시되는 솔루션은 하나 이상의 관련된 프로젝트에 대한 컨테이너입니다.
- npm 노드에는 설치된 모든 npm 패키지가 표시됩니다. npm 노드를 마우스 오른쪽 버튼으로 클릭하고 대화 상자를 사용하여 npm 패키지를 검색하고 설치할 수 있습니다.
npm 패키지를 설치하거나 명령 프롬프트에서 Node.js 명령을 실행하려면 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 여기서 명령 프롬프트 열기를 선택합니다.

프로젝트에 .vue 파일 추가

솔루션 탐색기에서 src/components 폴더와 같은 폴더를 마우스 오른쪽 단추로 클릭한 다음, 추가>새 항목을 선택합니다.

모든 항목 템플릿이 표시되지 않으면 모든 템플릿 표시를 선택한 다음 항목 템플릿을 선택합니다.
JavaScript Vue 단일 파일 구성 요소 또는 TypeScript Vue 단일 파일 구성 요소 중 하나를 선택하고 추가를 클릭합니다.

Visual Studio가 새 파일을 프로젝트에 추가합니다.

프로젝트 빌드

그런 다음, 빌드>솔루션 빌드를 선택하여 프로젝트를 빌드합니다.
빌드 결과를 보려면 출력 창을 확인하고 출력 보기 목록에서 빌드를 선택합니다.

JavaScript Vue.js 프로젝트 템플릿(및 이전 버전의 TypeScript 템플릿)은 빌드 후 이벤트를 구성하여 build npm 스크립트를 사용합니다. 이 설정을 수정하려면 Windows Explorer에서 프로젝트 파일(<projectname>.njsproj)을 열고 다음 코드 줄을 찾습니다.

<PostBuildEvent>npm run build</PostBuildEvent>

애플리케이션 실행

Ctrl+F5(또는 디버그 > 디버깅하지 않고 시작)를 눌러서 애플리케이션을 실행합니다.

콘솔에 개발 서버 시작이라는 메시지가 표시됩니다.

그런 다음, 앱이 브라우저에서 열립니다.

실행 중인 앱이 표시되지 않으면 페이지를 새로 고칩니다.
웹 브라우저를 닫습니다.