[VueJS] 프로젝트 생성

BBANG-JUN·2020년 10월 29일
0

VueJS

목록 보기
2/21
post-thumbnail

영상 참고 : 1시간에 vue.js 배우기

프론트 엔드 프레임워크 대표적인 3가지가 존재합니다.
React.js vs Vue.js vs Angular.js

그 중 Vue.js를 다뤄보려고 합니다.

웹 프론트엔드 프레임워크?

컴포넌트 기반의 SPA를 구축 할 수 있게 해주는 프레임 워크입니다.

  • 컴포넌트(Component)

    • 웹을 구성하는 탭, 버튼 등 다양한 UI 요소
    • 재사용 가능하도록 구조화 한 것
  • SPA(Single Page Application)

    • 단일 페이지 어플리케이션
    • 하나의 페이지 안에서 필요한 영역이 도달 되는 형태
    • 빠른 페이지 변환
    • 적은 트래픽 양

하지만, 단점은 첫 로딩 시 모든 파일들을 읽기 때문에 큰 프로젝트일 수록 느려진다.

작업환경

작업환경으로는 VScode를 이용하였고 Vue CLI 를 이용하였습니다.

  • CLI(Command line Interface)

    • 명령 줄 인터페이스
    • 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻합니다.

프로젝트 생성

  1. 먼저 vue/cli를 커맨드라인에 적어 다운받아줍니다.

npm install -g @vue/cli

  1. 생성 후, 프로젝트는 다음의 명령어로 생성할 수 있습니다.

vue create '폴더 명'


Manually

Defalut로 생성하면, 프로젝트 생성이 시작됩니다. (오래걸림)

구성( 'test2' 프로젝트)

  • 프로젝트 구조

  • 프로젝트 생성시, 해당 경로로 가서 npm run serve 명령어로 구동시킬 수 있습니다.

  • 구동이 완료된 모습이며 Local 링크로 접속하면 다음의 페이지가 나타납니다.

profile
🔥 머릿속으로 생각하지만 말고, 행동으로 보여줘

0개의 댓글