Vue 프로젝트 구성

싱글 파일 컴포넌트 체계

 

.vue 파일로 프로젝트 구조를 구성하는 방식입니다.

그럼 vue 파일을 작성해봅시다.

 

<template lang="html">
    <div>
      <span>
        <button>{{ message }}</button>
      </span>
    </div>
</template>

<script>
export default {
  data: {
    message: 'Click Button'
  }
}
</script>

<style lang="css" scoped>
span {
  font-size: 1.2em;
}
</style>

 

보시면 template, script, style 구조로 되어있습니다.

​

​

 

 

https://blog.naver.com/rile1036/221690277816

mac 맥에서 Vue.js 설치해보자

 

만약 nvm 부터 설치를 원하시면 제가 이전 네이버 블로그에 설치법을 작성하였습니다.

위의 사이트를 클릭하셔서 차례대로 진행하시면 됩니다.

 

 

​

Vue CLI

 

위의 싱글 파일 컴포넌트를 일용하기 위해서는 .vue파일을 인식할 수 있도록 웹팩이나 브라우저리파이 같은 도구를 필요로 합니다.

이전에 Vue CLI를 설치하는 글을 올렸었는데 처음부터 다시 시작하는 마음으로 진행하겠습니다.

 

npm install vue-cli -global

 

윈도우 명령 프롬프트 창(cmd) 또는 Mac 터미널에 입력하여 설치합시다.

​

 

설치가 제대로 됬다면 vue를 입력 시 명령어처럼 인식됩니다.

​

​

그럼 뷰 프로젝트를 생성해보겠습니다.

​

​

vue init webpack vue-project를 입력하여 프로젝트 하나를 생성하였습니다.

​

npm install 명령어를 실행하면 package.json의 라이브러리 목록이 전부 프로젝트 node_modules 폴더 밑에 설치됩니다.

 

npm run dev를 실행해봅시다.

브라우저가 실행되면서 우측과 같은 화면이 나타납니다.

해당 화면은 웹팩에서 Local 서버를 하나 띄우게 됩니다.

localhost:8080으로 접근하여 애플리케이션을 실행한 모습입니다.

​

​

 

 

Vue 로더

웹펙에서 지원하는 라이브러리입니다.

싱글 파일 컴포넌트 체계에서 사용하는 .vue파일의 내용을 브라우저에서 실행 가능한 웹 페이지 형태로 변환해줍니다.

​

src 폴더 내의 app.vue 파일과 components 폴더 내의 vue 파일이 존재합니다.

vue 파일은 components에 계속해서 추가하여 만들며 이와 같은 모든 .vue 파일에 뷰 로더가 적용되고 있습니다.

​

​

프로젝트 구성 글은 이전 글과 함께 이론으로만 작성했습니다.

다음 글에서 실전으로 애플리케이션을 제작하는 내용을 작성하겠습니다.