[vue] vue tutorial 뷰 튜토리얼 -1- (뷰 시작하기)

소스코드 첨부합니다 (https://github.com/jaeho310/vue-tutorial)

목차

vue tutorial -1- (뷰 시작하기)

vue tutorial -2- (컴포넌트와 인스턴스)

vue tutorial -3- (앱바 만들기)

vue tutorial -4- (props 사용하기)

vue tutorial -5- (뷰 라우터 사용하기)

vue tutorial -6- (뷰티파이 테이블)

 

이 게시글은 jquery만 사용하시다가 빠르게 vue를 해야하는 상황인 분들이 읽으시면 좋습니다.

(당연히 jquery 안해봤어도 상관 없습니다.)

 

공식문서 따라가면서 해보는게 가장 좋지만

급한 상황이거나, 백엔드 개발자분이 vue를 써서 간단하게 뭔가를 해야 하는경우 따라해보실것을 추천드립니다.

 

1. vue란

가상 dom을 만들어 dom을 바꿔치기하는 프레임워크입니다.

컴포넌트를 쪼개 사용하는 spa가 목적인 프레임워크입니다.

vue에서 제공하는 가상 dom을 사용하므로 실제 dom을 잘 못다뤄도 됩니다.

vue에서 제공하는 가상돔은 훨씬 이쁘고 쉽습니다.

개인적인 느낌으로 vue와 함께한 웹 개발은 웹 보다는 앱 개발의 느낌이 강했습니다.(데이터 바인딩이 적용되어있습니다)

 

2. vue 라이프사이클

Vue는 생성(create)되고 Dom에 부착(mount)되고 갱신(update)되고 소멸(destroy)되는 4가지 과정을 거칩니다.

mount가 가장 중요합니다.

vue가 생성해준 가상 dom이 실제 dom에 부착된후 실행되므로 DOM 관련 요소를 제어하기 좋은 단계입니다.

jquery의 $(function(){}), document.ready는 vue의 mount와 유사하다고 보시면 됩니다.

 

3. 퍼블리싱

그간 개인적으로 프론트엔드 개발이 짜증났던 가장 큰 이유입니다.

별거 아닌거같은데 헷갈리고 잘 안됩니다.

기존에 부트스트랩을 가져다 썼지만 커스터마이징이 너무 힘들어 퍼블리셔 도움없이는 꼼짝못하는...

vue를 사용할 때는  bootstrab vue와 vuetify의 도움을 받을수 있습니다.(앱개발처럼 퍼블리싱이 훨씬 쉽습니다.)

vuetify가 더 우세하므로 vuetify를 사용합니다.

 

4. 예제

(1). vue cli 설치

$ npm install @vue/cli -g

 

script태그에 vue의존성을 가져와서 한땀한땀 개발 할 수도 있지만

spring 개발할때 start.spring.io를 쓰듯이 vue cli를 활용해서 프로젝트를 생성해줍시다.

 

(2) 프로젝트 생성

$ vue create vue-tutorial

아래와 같이 vue2, vue3를 고르라고 뜹니다.

vue3는 호환성 이슈가 있다고하니

vue2로 생성했습니다.

Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

생성된 프로젝트 구조는 아래와 같습니다.

. 
|-- assets
|   `-- logo.png
|-- components
|  `--  HelloWorld.vue
|-- main.js
`-- App.vue

 

(3) 의존성 추가

$ npm install vuetify vue-router axios

패키지 매니저의 도움을 받아 사용할 의존성을 당겨옵니다.

 

$ vue add vuetify

해당 프로젝트에 vuetify를 사용할수 있게 자동으로 셋팅해줍니다.

src/plubgins/vuetify.js파일이 생성되고 main.js가 변경되니 꼭 먼저해줍시다.

 

 

(4) 실행

$ npm run serve

> vue-tutorial@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 15250ms                                                                      오후 7:25:07

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://1.1.1.1:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

npm run serve라는 명령어를 입력해 실행한후

 

브라우저에 가서 localhost:8080 으로 접근합니다.

 

(5) 결과

 

브라우저에서 이렇게 잘 떴다면 준비 완료입니다.