Vue.js 는 웹 애플리케이션 사용자 인터페이스를 빌드하기 위한 인기 있는 JavaScript 라이브러리이며 Visual Studio Code에는 HTML , CSS 및 JavaScript 의 Vue.js 빌딩 블록에 대한 지원이 내장되어 있습니다. 보다 풍부한 Vue.js 개발 환경을 위해 Vue.js IntelliSense, 코드 조각, 서식 등을 지원 하는 Vetur 확장을 설치할 수 있습니다 .
해당 포스트는 VSCode 홈페이지의 Using Vue in Visual Studio Code 문서를 번역하여 작성하였습니다.
뷰에 오신 것을 환영합니다
이 튜토리얼 에서는 Vue CLI 를 사용할 것 입니다. Vue.js 프레임워크가 처음이라면 vuejs.org 웹사이트 에서 훌륭한 문서와 튜토리얼을 찾을 수 있습니다 .
Vue CLI를 설치 및 사용하고 Vue 애플리케이션 서버를 실행하려면 Node.js JavaScript 런타임과 npm (Node.js 패키지 관리자)이 설치되어 있어야 합니다. npm은 Node.js에 포함되어 있으며 Node.js 다운로드 에서 설치할 수 있습니다.
팁 : NPM이 제대로 컴퓨터에 설치되어 있는지, node --version 과 npm --version 명령어를 통해 확인해보세요.
vue/cli터미널 또는 명령 프롬프트에서 다음을 입력합니다.
npm install -g @vue/cli설치하는 데 몇 분 정도 걸릴 수 있습니다. 이제 다음을 입력하여 새 Vue.js 애플리케이션을 만들 수 있습니다.
vue create my-app여기서 my-app응용 프로그램의 폴더 이름입니다. 사전 설정을 선택하라는 메시지가 표시되며 기본값을 유지하면 Babel 을 (babel, eslint)사용 하여 JavaScript를 브라우저 호환 ES5로 변환하고 ESLint 린터를 설치하여 코딩 오류를 감지할 수 있습니다. Vue 응용 프로그램을 만들고 종속성을 설치하는 데 몇 분 정도 걸릴 수 있습니다.
새 폴더로 이동하고 npm run serve를 입력하여 웹 서버를 시작하고 브라우저에서 애플리케이션을 열어 Vue 애플리케이션을 빠르게 실행해 보겠습니다 .
cd my-app
npm run serve브라우저에서 http://localhost:8080 에 "Welcome to your Vue.js App"이 표시되어야 합니다. Ctrl+C 를 눌러 vue-cli-service 서버 를 중지 할 수 있습니다 .
VS Code에서 Vue 애플리케이션을 열려면 터미널(또는 명령 프롬프트)에서 my-app폴더로 이동하고 다음 을 입력합니다 code ..
cd my-app
code .VS Code가 실행되고 파일 탐색기에 Vue 애플리케이션이 표시됩니다.
Vetur 확장
이제 src폴더 내의 App.vue를 열어봅시다. VS Code는 구문 강조 표시를 표시하지 않으며 오른쪽 아래 상태 표시줄에서 볼 수 있는 것처럼 파일을 일반 텍스트 로 처리합니다 . 파일 형식에 대한 Vetur 확장자를 권장하는 알림도 표시됩니다.
Vetur 확장은 Vue.js 언어 기능(구문 강조 표시, IntelliSense, 조각, 형식 지정)을 VS Code에 제공합니다.
설치 를 눌러 Vetur 확장을 다운로드하고 설치합니다. 확장 보기에서 Vetur 확장 설치 중이 표시되어야 합니다 . 설치가 완료되면(몇 분 정도 걸릴 수 있음) 설치 버튼이 톱니바퀴 관리 버튼으로 변경됩니다 .
이제 .vue 가 Vue 언어에 대해 인식되는 파일 형식이고 구문 강조 표시, 대괄호 일치 및 설명과 같은 언어 기능이 있음을 확인할 수 있습니다.
인텔리센스
입력을 시작 하면 HTML과 CSS뿐 아니라 Vue 섹션의 선언( v-bind, v-for) 과 같은 Vue.js 특정 항목에 대한 스마트 제안 또는 완성이 표시됩니다.
섹션의 Vue 속성(methods, computed):
정의로 이동, 정의 보기
Vue 확장 언어 서비스를 통한 VS Code는 Go to Definition ( F12 ) 또는 Peek Definition ( Alt+F12 )을 통해 편집기에서 유형 정의 정보를 제공할 수도 있습니다 . 커서를 위에 놓고 App마우스 오른쪽 버튼을 클릭하고 정의 보기를 선택 합니다.
Esc 키 를 눌러 Peek 창을 닫습니다.
Hello World!
샘플 애플리케이션을 "Hello World!"로 업데이트해 보겠습니다. App.vue 에서 아래와 같이 변경해보겠습니다.
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld msg="Hello World!"/>
</div>
</template>App.vue파일 을 저장하고 ( Ctrl+S ), 로 서버를 다시 시작하면 (npm run serve) "Hello World!"가 표시됩니다. Vue.js 클라이언트 측 디버깅에 대해 계속 학습하는 동안 서버를 실행 중인 상태로 두십시오.
팁 : VS Code는 기본적으로 지연 후 파일을 저장하는 자동 저장을 지원합니다. 파일 메뉴 에서 자동 저장 옵션을 선택 하여 자동 저장 을 켜거나 사용자 설정을 직접 구성합니다 (files.autoSave)
Linter
Linter는 소스 코드를 분석하고 애플리케이션을 실행하기 전에 잠재적인 문제에 대해 경고할 수 있습니다. Vue ESLint 플러그인( eslint-plugin-vue )은 편집기에 빨간색 물결선으로 표시되고 문제 패널( 보기 > 문제 Ctrl+Shift+M ) 에도 표시되는 Vue.js 특정 구문 오류를 확인합니다 .
Vue linter가 템플릿에서 둘 이상의 루트 요소를 감지할 때 아래에서 오류를 볼 수 있습니다.
디버깅
내장 JavaScript 디버거를 사용하여 클라이언트 측 Vue.js 코드를 디버그할 수 있습니다. VS Code 디버깅 레시피 사이트 의 VS Code 레시피 Vue.js 디버깅에서 자세히 알아볼 수 있습니다 .
참고: 현재 vue-cli에 의해 생성된 소스맵에 문제가 있으며, 이는 VS Code의 디버깅 환경에 문제를 일으킵니다. https://github.com/vuejs/vue-loader/issues/1163 을 참조 하세요 .
Vue.js 디버깅을 위한 또 다른 인기 있는 도구는 vue-devtools 플러그인입니다.
기타 확장
Vetur는 VS Code에 사용할 수 있는 많은 Vue.js 확장 중 하나일 뿐입니다. 'vue'를 입력 하여 확장 보기( Ctrl+Shift+X ) 에서 검색할 수 있습니다 .
다른 사람들이 Vue.js 개발에 유용하다고 찾은 확장을 번들로 제공하는 확장 팩도 있습니다.
원문 링크 : https://code.visualstudio.com/docs/nodejs/vuejs-tutorial
