코드에서 vue 파일을 만드는 방법

Vue.js는 대화형 웹 인터페이스를 빠르게 구축할 수 있는 널리 사용되는 JavaScript 프레임워크입니다. 다른 JavaScript 프레임워크와 달리 Vue.js는 구성 요소를 사용하여 애플리케이션을 구축합니다. Vue 구성 요소는 Vue 템플릿, 스크립트 및 스타일을 포함하는 .vue 파일 형식으로 존재합니다. Vue 파일을 만드는 방법을 살펴보겠습니다.

Vue 구성 요소를 생성하려면 먼저 Vue CLI 도구를 설치해야 합니다. 이 도구는 Vue 프로젝트를 자동으로 생성할 수 있으며 다양한 편리한 도구와 기능을 제공합니다. 먼저 명령줄에 다음 명령을 입력하여 Vue CLI를 설치합니다.

npm install -g @vue/cli

설치가 완료된 후 다음 명령을 사용하여 Vue CLI가 성공적으로 설치되었는지 확인할 수 있습니다.

vue --version

설치에 성공하면 Vue CLI의 버전 정보가 표시됩니다. 다음으로 Vue CLI를 사용하여 새 프로젝트를 만들 수 있습니다. 명령줄에 다음 명령을 입력하세요.

vue create my-project

"my-project" 여기서는 프로젝트 이름이며 필요에 따라 변경할 수 있습니다. 이 명령을 실행하면 Vue CLI는 기본, 수동, PWA, 단순 등과 같은 사전 설정을 선택하라는 메시지를 표시합니다. 기본 사전 설정을 선택하면 기본 설정이 포함된 Vue 프로젝트가 자동으로 생성됩니다. 수동 사전 설정을 선택하면 다양한 설정을 수동으로 선택해야 합니다.

Vue 프로젝트가 성공적으로 생성되면 Vue CLI를 사용하여 프로젝트를 실행할 수 있습니다. 명령줄에 다음 명령을 입력하세요.

cd my-project
npm run serve

이 명령은 로컬 서버를 시작합니다. 브라우저에서 http://localhost:8080/을 방문하여 Vue 프로젝트의 실행 효과를 확인하세요.

이제 Vue 프로젝트를 만들었으니 .vue 파일을 만들어 보겠습니다. src/comComponents 디렉터리에 새 파일을 만들고 이름을 MyComponent.vue로 지정합니다. 파일에 다음 코드를 입력하세요.

<template>
   <div>
      <h1>Hello, World!</h1>
   </div>
</template>

<script>
export default {
   name: 'MyComponent'
}
</script>

<style>
h1 {
   color: red;
}
</style>

이 .vue 파일은 세 부분으로 구성되어 있습니다.