이 빠른 시작에서는 기본 Vue.js 프런트 엔드 웹 애플리케이션을 만들고 실행합니다. 이 문서에서는 Visual Studio IDE(통합 개발 환경)를 5-10분 동안 소개합니다.
필수 구성 요소
다음 필수 구성 요소를 사용하여 구성을 준비합니다.
Visual Studio 2022 이상(Visual Studio 다운로드 시 무료 버전 다운로드)
npm(Node.js포함 ) https://www.npmjs.com/
Vue.js (설치 | Vue.js(vuejs.org))
Vue 앱 만들기
다음 단계에 따라 Vue.js 웹앱을 만듭니다.
Visual Studio 시작 창에서(파일> 시작 창 선택) 새 프로젝트 만들기를 선택합니다.
새 프로젝트 만들기 대화 상자의 검색 상자에 Vue를 입력합니다. JavaScript 또는 TypeScript에 대한 Vue 앱 템플릿을 선택하고 다음을 선택합니다.
Visual Studio 2022 버전 11 이상에서는 템플릿 이름 Standalone JavaScript Vue Project이 Vue App로 변경됩니다.
프로젝트 및 솔루션의 이름을 입력하고 만들기를 선택합니다.
Visual Studio 새 프로젝트를 만들 때까지 기다립니다.
프로젝트 속성 보기
기본 프로젝트 설정을 사용하면 프로젝트를 빌드하고 디버그할 수 있습니다.
설정을 변경하려면 다음 단계를 수행합니다.
솔루션 탐색기 프로젝트를 마우스 오른쪽 단추로 클릭하고 프로퍼티 선택합니다.
프로젝트 속성 창에서 디버그, Linting, 빌드 또는 배포 를 선택하여 해당 속성을 확인합니다.
디버거 구성의 경우 launch.json 파일을 사용합니다.
메모
디버거 구성 파일은 launch.json 디버그 도구 모음의 시작 작업과 연결된 시작 설정을 저장합니다.
launch.json 파일은 프로젝트의 .vscode 폴더 아래에 있어야 합니다.
프로젝트 빌드
새 프로젝트를 빌드하려면빌드 솔루션 빌드>를 선택합니다.
프로젝트 시작
F5 키를 선택하거나 창 맨 위에 있는 시작 작업을 사용합니다.
프로젝트는 다음 텍스트(또는 이와 유사한)로 명령 프롬프트를 엽니다.
VITE v4.4.9 ready in 780 ms
메모
콘솔 출력에서 Node.js버전을 업데이트하는 지침과 같은 메시지를 확인합니다.
프로세스가 성공하면 기본 Vue.js 앱이 열립니다.
다음 단계
Vue 사용하여 ASP.NET Core 앱 만들기