vscode에서 vue를 사용하는 방법

최근 몇 년 동안 프런트엔드 개발 분야에서 Vue 프레임워크가 점점 인기를 끌면서 웹 개발에서 대체할 수 없는 부분이 되었습니다. 프런트엔드 개발에서는 우수한 코드 편집기를 선택하는 것이 매우 중요합니다. 그중 Visual Studio Code(이하 VS Code)는 의심할 여지 없이 많은 프런트엔드 개발자들이 가장 먼저 선택하는 제품입니다. 그렇다면 VS Code에서 Vue 프레임워크를 사용하는 방법은 무엇입니까? 이번 글에서는 이를 소개하겠습니다.

1단계: VS Code 및 Vue.js 설치

먼저 공식 웹사이트 https://code.visualstudio.com/에서 사용할 수 있는 VS Code를 다운로드하여 설치해야 합니다. 둘째, 컴퓨터에 Node.js와 Vue.js도 설치해야 합니다. Node.js가 설치되어 있는지 확인하려면 명령줄에

node -v

를 입력하세요. 그렇지 않은 경우 공식 웹사이트 https://nodejs.org/en/에서 다운로드하여 설치할 수 있습니다. 다음으로 다음 명령을 통해 Vue.js를 설치할 수 있습니다.

npm install vue

2단계: Vue 확장 사용

Vue.js 확장을 설치하여 Vue 프레임워크의 전역 구성 및 구문 검사를 수행할 수 있습니다. VS Code를 열고 Ctrl+Shift+X를 눌러 확장 옵션을 입력합니다. 검색창에 "Vue" 세 글자를 입력하고 Vue 확장 프로그램을 설치하세요. 이 시점에서 왼쪽 메뉴 표시줄에 "Vue" 옵션이 추가된 것을 볼 수 있습니다. 이 옵션을 클릭하면 Vue 프레임워크를 설정하고 관리할 수 있습니다.

3단계: Vue 프로젝트 만들기

위 구성을 설치한 후 Vue 프레임워크 사용을 시작하려면 먼저 Vue-cli 스캐폴딩 도구를 사용하여 Vue 프로젝트를 만듭니다.

다음 명령을 사용하여 Vue-cli를 설치합니다.

npm install -g @vue/cli

프로젝트 생성 시 Vue-cli에서 제공하는 사전 설정을 통해 생성하거나 수동으로 구성할 수 있습니다. 여기서는 기본 구성을 사용하고 다음 명령줄을 실행합니다.

vue create vue-test

잠깐 기다렸다가 다음 두 명령을 입력한 후 Enter를 누릅니다.

cd vue-test
npm run serve

콘솔에 "Compiled 성공적으로 완료"가 표시되면 다음을 열 수 있습니다. browser 로 접속하여 http://localhost:8080에 접속하시면 아래와 같은 페이지가 나옵니다. 이때 Vue 프로젝트가 성공적으로 생성되었습니다.

4단계: Vue 구성 요소 사용

Vue에서 구성 요소는 주로 코드 재사용성을 향상시키기 위해 HTML을 통해 정의됩니다. VS Code에서는 Vue 구성 요소를 사용하여 HTML 코드를 여러 파일로 분리할 수 있으므로 코드를 더 잘 구성할 수 있습니다. 여기에서는 Vue 구성 요소를 만드는 방법을 보여줍니다.

먼저 "Components"라는 새 폴더를 만들고 폴더 아래에 "Hello.vue"라는 파일을 만듭니다.

<template>
  <div>
    <h1>{{title}}</h1>
    <h2>{{message}}</h2>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
      title: 'Welcome to the Vue World!',
      message: 'Vue is Awesome!'
    }
  }
}
</script>

구성 요소를 만든 후 In the Vue 루트 인스턴스에 구성 요소를 추가해야 합니다. "App.vue" 파일에 다음 코드를 추가합니다.

<template>
  <div id="app">
    <Hello></Hello>
  </div>
</template>

<script>
import Hello from './components/Hello.vue'

export default {
  name: 'App',
  components: {
    Hello
  }
}
</script>

인쇄 및 확인 후 프로젝트를 실행하면 아래 그림과 같이 "Hello World"가 출력되는 것을 볼 수 있습니다.

5단계: Vue 디버거 사용

VS Code에서 사용자는 "Vue DevTools"를 사용하여 개발 프로세스 중에 Vue 구성 요소의 상태를 볼 수 있으며 이는 코드 오류를 신속하게 해결하는 데 매우 유용합니다. 여기의 예에서는 Chrome 브라우저를 사용하여 Vue 구성 요소 상태를 확인합니다. Chrome 브라우저를 설치하세요. Chrome 브라우저에서 Vue DevTools를 열면 Vue 구성 요소 및 빌드된 앱의 상태를 볼 수 있습니다.

Chrome 브라우저에서 Vue DevTools를 열고 구성 요소를 클릭하면 구성 요소의 데이터와 계산된 속성이 표시됩니다.

이제 VS Code에서 Vue 프레임워크를 사용하는 방법에 대한 튜토리얼을 완료했습니다. 이 기사가 도움이 되기를 바랍니다. 여러분의 개발 과정에서 Vue.js를 활용하여 더 많은 시도와 연습을 하시길 바라겠습니다!

위 내용은 vscode에서 vue를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!