수 많은 우문은 현답을 만든다

VueJS로 최초 환경구성 하기 본문

토이 프로젝트/VueJs

VueJS로 최초 환경구성 하기

aiden.jo 2024. 1. 5. 18:39

어떤 웹 서비스든지 화면이 존재하며 우리는 그것을 Front-end라고 부릅니다. 오늘은 Front-end 프레임워크 중 하나인 Vue.js로 화면을 구성하는 방법을 알아보고자 합니다.

 

  1. Vue란?
    JavaScript 프레임워크로 이번 포스팅에서는 Vue 3를 다루겠습니다. Vue 컴포넌트는 옵션(Options) API와 컴포지션(Composition) API 두 가지 스타일로 작성할 수 있는데 옵션 스타일은 익숙하므로 Vue 3부터 나타난 컴포지션 방식으로 작성해보도록 하겠습니다.
  2. Node.js 설치
    https://nodejs.org/en/download/
    설치 후 커맨드창을 열고 npm -v 로 설치를 확인합니다.

  3. Vue 설치
    npm init vue@latest

  4. 플러그인 설치
    vue 패키지 설치
    저는 위에서 ESLint, Prettier, Router는 활성화(Yes) 했습니다.

  5. 프로젝트 생성 및 실행
    cd <your-project-name>
    npm install
    npm run dev
    vue 프로젝트 실행 결과
    이제 위 http://localhost:5173/ 로 접속하면 아래와 같은 기본 화면이 나옵니다.
    vue 기본 화면
  6. 프로젝트 구조
    프로젝트가 어떻게 생겼는지 구조를 한번 살펴보겠습니다.
    기초 공사가 완료되었습니다. 이제 우리는 아래 파일들을 수정 및 확장하여 웹 서비스 개발을 해보도록 하겠습니다.
    화면 뼈대 : views
    화면 구성 : components
    화면 요청 처리 : router
    기본 구성 : App.vue, main.js



감사합니다.

'토이 프로젝트 > VueJs' 카테고리의 다른 글

Vue 웹 애플리케이션 동작 원리  (1) 2024.01.30