close

Vue.js 설치 및 첫 번째 프로젝트 만들기

Vue.js를 설치하려면 다음 단계를 따르세요.

1단계: 프로젝트를 위한 새 디렉토리를 생성하고 해당 디렉토리에서 터미널을 엽니다.

2단계: npm을 사용하여 다음 명령을 실행하여 Vue CLI(명령줄 인터페이스)를 설치합니다.

npm install -g @vue/cli


3단계: 성공적으로 설치한 후 다음 명령을 사용하여 새 Vue 프로젝트를 만들 수 있습니다.

vue create my-vue-project


4단계: Babel, ESLint 및 CSS 전처리기(선택 사항) 설치를 포함하여 프로젝트에 대한 구성 옵션을 선택합니다.

5단계: 프로젝트 생성 프로세스가 완료되면 다음 명령을 사용하여 프로젝트 디렉토리로 이동합니다.

cd my-vue-project


6단계: 다음 명령을 실행하여 Vue 프로젝트를 시작합니다.

npm run serve


시작 프로세스가 완료되면 브라우저에서 Vue 애플리케이션에 액세스할 수 있는 URL이 표시됩니다.

Vue.js의 간단한 예:

새 HTML 파일을 만들고 이름을 index.html `. 이 파일에 다음 코드를 추가합니다.

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

h1 이 예제에서는 태그와 버튼이 있는 간단한 Vue 애플리케이션을 만들었습니다. 버튼을 클릭하면 메시지가 변경됩니다.

파일을 저장 index.html  하고 브라우저에서 엽니다. "Hello Vue.js!"라는 초기 메시지가 표시됩니다. 버튼을 클릭하면 메시지가 "메시지가 성공적으로 변경되었습니다!"로 변경됩니다.

이것은 Vue.js를 시작하기 위한 간단한 예일 뿐입니다. 애플리케이션을 개발하는 동안 Vue.js의 더 많은 기능과 강력한 기능을 탐색할 수 있습니다.