김니은 
KimN's Blog
김니은 
  • 분류 전체보기
    • Algorithm
      • Programmers
    • Develop
      • Swift
      • Flask
      • RubyonRails
      • AWS
      • Ardunio
      • Vue
      • Node.js
      • Infra
      • CS
    • IT Story
      • Hackintosh
      • GitHub
      • IT Review

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

태그

  • Code Snippet
  • SWIFTUI
  • 항상 맨 위
  • 카카오 챗봇
  • Ruby on Rails
  • Ruby
  • SWIFT
  • TOAST

최근 댓글

최근 글

티스토리

반응형
hELLO
김니은 
Develop/Vue

Vue 프로젝트 구성

Vue 프로젝트 구성
Develop/Vue

Vue 프로젝트 구성

2020. 1. 26. 21:38
반응형

싱글 파일 컴포넌트 체계

 

.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 설치해보자

최근에 장고 공부하면서 글을 올리다가 vuex 관련 공부를 해보고 싶어 정리겸 올리게 되었습니다.​Vue.js...

blog.naver.com

 

만약 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 파일에 뷰 로더가 적용되고 있습니다.

​

​

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

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

반응형
저작자표시 (새창열림)

'Develop > Vue' 카테고리의 다른 글

Vue 애플리케이션 구현 심화편  (0) 2020.01.26
Vue 애플리케이션 만들기  (0) 2020.01.26
Vue 템플릿  (0) 2020.01.26
Vue HTTP 통신  (0) 2020.01.26
Vue Router  (0) 2020.01.26
    'Develop/Vue' 카테고리의 다른 글
    • Vue 애플리케이션 구현 심화편
    • Vue 애플리케이션 만들기
    • Vue 템플릿
    • Vue HTTP 통신
    김니은 
    김니은 

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.