Node.js Tools for Visual Studio를 사용하여 Vue.js 애플리케이션 만들기

아티클
01/26/2025

Visual Studio는 JavaScript 또는 TypeScript에서 Vue.js 프레임워크를 사용하여 앱 개발을 지원합니다.

Visual Studio에서 Vue.js 애플리케이션 개발을 지원하는 새로운 기능은 다음과 같습니다.

.vue 파일의 스크립트, 스타일 및 템플릿 블록 지원
lang 파일에서 특성 인식
프로젝트 및 파일 템플릿 Vue.js

필수 구성 요소

Visual Studio 2017 버전 15.8 이상이 설치되어 있고 Node.js 개발 워크로드가 있어야 합니다.

중요하다

이 문서에는 Visual Studio 2017 버전 15.8부터만 사용할 수 있는 기능이 필요합니다.

필요한 버전이 아직 설치되지 않은 경우 Visual Studio 2019 설치합니다.

워크로드를 설치해야 하지만 Visual Studio가 이미 있는 경우 도구>도구 및 기능 가져오기...이동하여 Visual Studio 설치 관리자를 엽니다. Node.js 개발 워크로드를 선택한 다음 수정을 선택합니다.
ASP.NET Core 프로젝트를 만들려면 ASP.NET 및 웹 개발 및 .NET Core 플랫폼 간 개발 워크로드가 설치되어 있어야 합니다.
Node.js 런타임이 설치되어 있어야 합니다.

설치되지 않은 경우 Node.js 웹 사이트에서 LTS 버전을 설치합니다. 일반적으로 Visual Studio는 설치된 Node.js 런타임을 자동으로 검색합니다. 설치된 런타임을 검색하지 못하는 경우 속성 페이지에서 설치된 런타임을 참조하도록 프로젝트를 구성할 수 있습니다. (프로젝트를 만든 후 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 속성선택).

Node.js 사용하여 Vue.js 프로젝트 만들기

새 Vue.js 템플릿을 사용하여 새 프로젝트를 만들 수 있습니다. 템플릿을 사용하는 것이 가장 쉬운 시작 방법입니다. 자세한 단계는 visual Studio를 사용하여 첫 번째 Vue.js 앱 만드는참조하세요.

ASP.NET Core 및 Vue CLI를 사용하여 Vue.js 프로젝트 만들기

Vue.js 프로젝트를 신속하게 스캐폴딩하기 위한 공식 CLI를 제공합니다. CLI를 사용하여 애플리케이션을 만들려면 이 문서의 단계에 따라 개발 환경을 설정합니다.

중요하다

이러한 단계에서는 이미 Vue.js 프레임워크에 대한 경험이 있다고 가정합니다. 그렇지 않은 경우 Vue.js 방문하여 프레임워크에 대해 자세히 알아보세요.

새 ASP.NET Core 프로젝트 만들기

이 예제에서는 빈 ASP.NET Core 애플리케이션(C#)을 사용합니다. 그러나 다양한 프로젝트 및 프로그래밍 언어 중에서 선택할 수 있습니다.

빈 프로젝트 만들기

Visual Studio를 열고 새 프로젝트를 만듭니다.

Visual Studio 2019에서 시작 창에서 새 프로젝트 만들기를 선택합니다. 시작 창이 열려 있지 않으면 파일>시작 창선택합니다. 웹앱을 선택하고, C#을 언어로 선택한 다음, ASP.NET Core Empty를 선택한 다음, 다음을 선택합니다. 다음 화면에서 클라이언트 앱 프로젝트 이름을다음 선택합니다.

권장 대상 프레임워크 또는 .NET 6을 선택한 다음 만들기선택합니다.

ASP.NET Core Web Application 프로젝트 템플릿이 표시되지 않으면 워크로드 및 ASP.NET 및 웹 개발 설치해야 합니다. 먼저 NET Core개발 워크로드를. 워크로드를 설치하려면 새 프로젝트 대화 상자의 왼쪽 창에서 Visual Studio 설치 관리자 열기 링크를 클릭합니다(파일>새>프로젝트선택). Visual Studio 설치 관리자가 시작됩니다. 필요한 워크로드를 선택합니다.

프로젝트 시작 파일 구성

./Startup.cs 파일을 열고 Configure 메서드에 다음 줄을 추가합니다.

app.UseDefaultFiles(); // Enables default file mapping on the web root.
app.UseStaticFiles(); // Marks files on the web root as servable.

Vue CLI 설치

vue-cli npm 모듈을 설치하려면 명령 프롬프트를 열고 버전 3.0(현재 베타)에 대한 npm install --g vue-cli 또는 npm install -g @vue/cli 입력합니다.

Vue CLI를 사용하여 새 클라이언트 애플리케이션 스캐폴드

명령 프롬프트로 이동하여 현재 디렉터리를 프로젝트 루트 폴더로 변경합니다.
vue init webpack client-app 입력하고 추가 질문에 대답하라는 메시지가 표시되면 단계를 따릅니다.

메모

.vue 파일의 경우 변환을 수행하려면 로더와 함께 webpack 또는 유사한 프레임워크를 사용해야 합니다. TypeScript 및 Visual Studio는 .vue 파일을 컴파일하는 방법을 모릅니다. 묶음도 마찬가지입니다. TypeScript는 ES2015 모듈(즉, import 및 export 문)을 브라우저에서 로드할 단일 최종 .js 파일로 변환하는 방법을 모릅니다. 다시 말하지만, 웹 팩은 여기에 가장 적합한 선택입니다. MSBuild를 사용하여 Visual Studio 내에서 이 프로세스를 구동하려면 Visual Studio 템플릿에서 시작해야 합니다. 현재는 Vue.js 개발을 위한 ASP.NET 템플릿이 없습니다.

빌드된 파일을 wwwroot에 출력하도록 webpack 구성 수정

./client-app/config/index.js파일을 열고 build.index와 build.assetsRoot를 wwwroot 경로로 변경합니다.

// Template for index.html
index: path.resolve(__dirname, '../../wwwroot/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../../wwwroot'),

빌드가 트리거될 때마다 클라이언트 앱을 빌드할 프로젝트를 나타냅니다.

Visual Studio에서 Project>속성>빌드 이벤트으로 이동합니다.
빌드 전 이벤트 명령줄 에서에 npm --prefix ./client-app run build를 입력합니다.

webpack의 출력 모듈 이름 구성

./client-app/build/webpack.base.conf.js파일을 열고 출력 속성에 다음 속성을 추가합니다.

devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'

Vue CLI를 사용하여 TypeScript 지원 추가

이러한 단계에는 현재 베타 버전인 vue-cli 3.0이 필요합니다.

명령 프롬프트로 이동하여 현재 디렉터리를 프로젝트 루트 폴더로 변경합니다.
vue create client-app입력한 다음 수동으로 기능선택합니다.
TypeScript선택한 다음 원하는 다른 옵션을 선택합니다.
나머지 단계를 수행하고 질문에 응답합니다.

TypeScript에 대한 Vue.js 프로젝트 구성

./client-app/tsconfig.json 파일을 열고 컴파일러 옵션에 noEmit:true 추가합니다.

이 옵션을 설정하면 Visual Studio에서 빌드할 때마다 프로젝트가 복잡해지는 것을 방지할 수 있습니다.

다음으로 ./client-app/vue.config.js 파일을 만들고 다음 코드를 추가합니다.

module.exports = {
    outputDir: '../wwwroot',

    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: '[absolute-resource-path]',
            devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
        }
    }
};

앞의 코드는 webpack을 구성하고 wwwroot 폴더를 설정합니다.

vue-cli 3.0을 사용하여 빌드

vue-cli 3.0의 알 수 없는 문제로 인해 빌드 프로세스가 자동화되지 않을 수 있습니다. wwwroot 폴더를 새로 고칠 때마다 클라이언트 앱 폴더에서 명령 npm run build 실행해야 합니다.

또는 ASP.NET 프로젝트 속성을 사용하여 vue-cli 3.0 프로젝트를 빌드 전 이벤트로 빌드할 수 있습니다. 프로젝트를 마우스 오른쪽 단추로 클릭하고 속성 선택하고 빌드 탭의 빌드 전 이벤트 명령줄 텍스트 상자에 다음 명령을 포함합니다.

cd ./client-app
npm run build
cd ../

제한

lang 특성은 JavaScript 및 TypeScript 언어만 지원합니다. 허용되는 값은 js, jsx, ts 및 tsx입니다.
lang 특성은 템플릿 또는 스타일 태그에서 작동하지 않습니다.
.vue 파일의 디버깅 스크립트 블록은 전처리된 특성으로 인해 지원되지 않습니다.
TypeScript는 .vue 파일을 모듈로 인식하지 않습니다. TypeScript에 .vue 파일의 모양을 알려려면 다음과 같은 코드가 포함된 파일이 필요합니다(vue-cli 3.0 템플릿에는 이미 이 파일이 포함되어 있습니다).
```
// ./client-app/vue-shims.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}
```
vue-cli 3.0을 사용하는 경우 프로젝트 속성에 대한 빌드 전 이벤트로 명령 npm run build 실행이 작동하지 않습니다.

Vue 시작 가이드.
Vue CLI 프로젝트.
webpack 구성 설명서 .

다음을 통해 공유

Node.js Tools for Visual Studio를 사용하여 Vue.js 애플리케이션 만들기

필수 구성 요소

Node.js 사용하여 Vue.js 프로젝트 만들기

ASP.NET Core 및 Vue CLI를 사용하여 Vue.js 프로젝트 만들기

새 ASP.NET Core 프로젝트 만들기

빈 프로젝트 만들기

프로젝트 시작 파일 구성

Vue CLI 설치

Vue CLI를 사용하여 새 클라이언트 애플리케이션 스캐폴드

빌드된 파일을 wwwroot에 출력하도록 webpack 구성 수정

빌드가 트리거될 때마다 클라이언트 앱을 빌드할 프로젝트를 나타냅니다.

webpack의 출력 모듈 이름 구성

Vue CLI를 사용하여 TypeScript 지원 추가

TypeScript에 대한 Vue.js 프로젝트 구성

vue-cli 3.0을 사용하여 빌드

제한

피드백

추가 리소스

다음을 통해 공유

Node.js Tools for Visual Studio를 사용하여 Vue.js 애플리케이션 만들기

필수 구성 요소

Node.js 사용하여 Vue.js 프로젝트 만들기

ASP.NET Core 및 Vue CLI를 사용하여 Vue.js 프로젝트 만들기

새 ASP.NET Core 프로젝트 만들기

빈 프로젝트 만들기

프로젝트 시작 파일 구성

Vue CLI 설치

Vue CLI를 사용하여 새 클라이언트 애플리케이션 스캐폴드

빌드된 파일을 wwwroot에 출력하도록 webpack 구성 수정

빌드가 트리거될 때마다 클라이언트 앱을 빌드할 프로젝트를 나타냅니다.

webpack의 출력 모듈 이름 구성

Vue CLI를 사용하여 TypeScript 지원 추가

TypeScript에 대한 Vue.js 프로젝트 구성

vue-cli 3.0을 사용하여 빌드

제한

관련 콘텐츠

피드백

추가 리소스