Vue

📌 Vue 는 무엇인가 ?

: 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크 + 표준 HTML, CSS 및 JavaScript를 기반으로 구축  + component 기반의 SPA(single page application)사이트 구축가능

 

 

※ component  >> view를 구성하는 작은 조각들

: 페이지 규모가 커질수록 html 구조 복잡해짐 >> 관리 힘듦 >>

component 개념 도입>> 한 페이지를 다 쪼갈라서(?) 관리 

https://vuejs.org/

 

※ SPA (Single Page Application): index.html하나, 단일 js파일을 가지고 vue application 을 구동함

>> 최초 로딩시에 html, js 미리 로딩하여 페이지 전환이 될 경우 페이지 이동하지 않고, 전환될 부분만 그려줌

장점 : 빠른 페이지 변환, 반응성, 화면전환 애니메이션 등 사용자 친화적인 부분 + 적은 트래픽 양

단점 : JS사이즈가 커질수록 초기 로딩속도는 느려짐

 

vue-cli : 기본 vue 개발 환경 설정해주는 도구

npm install -g @vue/cli       
or
yarn global add @vue/cli

 

vue --version >>확인

vue project 생성 >> vue create 프로젝트명
cd 프로젝트명 해서
해당 프로젝트폴터로 이동후,
npm run serve >> localhost:8080 확인

 

※ UI(user interface, 사용자 인터페이스)

CLI(Command Line Interface) : 텍스트 형태로 이루어진 인터페이스 // 터미널을 통해 사용자와 컴퓨터 상호작용하는 방식

GUI(Graphical User Interface) : 마우스로 선택해 작업을 하는 그래픽 환경의 인터페이스

NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기 조작을 하는 인터페이스

VUI(Voice User Interface) : 사람의 음성으로 기기를 조작하는 인터페이스

OUI(Organic User Interface) : 모든 사물과 사용자 간의 상호작용을 위한 인터페이스

 

참조 : 

https://m.blog.naver.com/wook2124/222103002127

Simple Vue.js - simpleVue (gitbook.io)