Vue 설치 설정

Vue는 개발자가 잘 구성되고, 표시되고, 상호 작용할 수 있고 다양한 유형의 애플리케이션 및 프로젝트에 적합한 대화형 사용자 인터페이스를 구축할 수 있는 최신 프런트 엔드 프레임워크 중 하나입니다. 이번 글에서는 Vue의 설치와 설정에 대해 간략하게 소개하겠습니다.

1. Vue 설치

1. CDN 사용

Vue는 개발자가 HTML에서 Vue 라이브러리를 직접 참조할 수 있도록 CDN을 제공합니다. 다음 코드를 HTML 파일에 복사하기만 하면 됩니다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

참고: 이 방법은 간단하지만 페이지 성능과 로딩 속도에 부정적인 영향을 미칠 수 있으므로 프로덕션 환경에서는 권장되지 않습니다.

2. NPM 사용

NPM을 사용하여 Vue를 설치하는 방법은 다음과 같습니다.

a 터미널을 열고 컴퓨터에 Node.js가 설치되어 있는지 확인하세요.

b. 터미널에서 다음 명령을 입력하여 Vue를 설치하세요.

npm install vue

c 설치가 완료될 때까지 기다리면 Vue 사용을 시작할 수 있습니다. 다음과 같이 HTML 파일에서 Vue 라이브러리를 참조할 수 있습니다.

<script src="./node_modules/vue/dist/vue.js"></script>

3. Vue CLI 사용

Vue CLI는 Vue에서 공식적으로 제공하는 명령줄 도구로, Vue 애플리케이션을 빠르게 생성하는 데 도움이 되며 다양한 Out-of- 상자 기능 및 도구. Vue CLI를 사용하여 Vue를 설치하는 단계는 다음과 같습니다.

a 터미널을 열고 Node.js가 컴퓨터에 설치되어 있는지 확인하세요.

b. 터미널에서 다음 명령을 입력하여 Vue CLI를 설치하세요:

npm install -g @vue/cli

c 설치가 완료되면 Vue CLI를 사용하여 아래와 같이 새 Vue 애플리케이션을 생성할 수 있습니다. 그런 다음 사전 설정을 선택하고 Vue CLI가 필요한 모든 종속성을 자동으로 다운로드하고 설치할 때까지 기다려야 합니다.

e. 설치가 완료되면 새로 생성된 애플리케이션 폴더로 전환하고 다음 명령을 실행하여 애플리케이션을 시작할 수 있습니다.

vue create my-app

2. Vue 설정

1. Vue 소개

사용하기로 선택한 경우 CDN 메소드가 Vue를 참조한 후 HTML 파일에 다음 코드를 추가하면 됩니다:

npm run serve

NPM을 사용하여 Vue를 설치한 경우 JavaScript 파일에서 파일 시작 부분에 다음 코드를 추가해야 합니다:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. Vue 인스턴스 만들기

Vue를 성공적으로 도입했다면 Vue 인스턴스를 만들 수 있습니다. Vue 인스턴스에 대한 다양한 옵션과 구성 정보가 포함된 옵션 개체를 Vue 생성자에 전달해야 합니다.

기본 Vue 인스턴스 예는 다음과 같습니다.

import Vue from 'vue'

위 예에서는 ID 값이 "app"인 HTML 요소에 Vue 인스턴스를 바인딩하고 "message"라는 데이터 속성을 정의합니다.

3. 데이터 표시

Vue는 데이터 바인딩을 통해 모델과 뷰를 연결합니다. Vue의 템플릿 구문을 사용하여 HTML 템플릿에 데이터를 표시할 수 있습니다. 바인딩된 데이터 속성을 보간하려면 이중 중괄호 "{{}}"를 사용하세요.

예를 들어 위 Vue 인스턴스에서는 HTML 템플릿에 "message" 속성 값을 표시할 수 있습니다.

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

Vue 인스턴스가 렌더링되면 Vue는 지정된 데이터 속성에 따라 DOM을 자동으로 업데이트합니다. 템플릿. 위의 예에서 "message" 속성의 값은 "Hello, Vue!"이므로 렌더링 결과는 다음과 같습니다.

<div id="app">
  {{ message }}
</div>

Summary

이 글에서는 Vue의 설치 및 설정에 대해 간략하게 소개합니다. CDN, NPM 또는 Vue CLI를 사용하여 Vue를 설치하고 Vue 인스턴스를 생성하여 데이터를 표시하고 DOM을 업데이트할 수 있습니다. Vue는 모든 규모와 유형의 프로젝트에 적합한 훌륭한 문서화와 커뮤니티를 갖춘 뛰어난 프런트 엔드 프레임워크입니다. 이 기사가 Vue를 시작하고 훌륭한 프런트 엔드 애플리케이션 구축을 시작하는 데 도움이 되기를 바랍니다.

위 내용은 Vue 설치 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!