Vue2 65분만에 배우기!

유튜브 영상 The Vue Tutorial for 2018 - Learn Vue 2 in 65 Minutes 중 몰랐던 내용 정리한 글입니다.

1. Vue-CLI 설치하기

Vue-CLI를 통해 Vue 프로젝트를 빠르고 쉽게 생성할 수 있다.

> mkdir vue-toy

> cd vue-toy

> npm install -g @vue/cli        -- Vue-CLI 설치

> vue create vue-voca            -- Vue 프로젝트 생성[ vue create 프로젝트이름 ]

2018.04.09추가) yarn 설치 후, yarn을 통해 Vue-Cli 설치하는 방법

> npm install -g yarn

> yarn global add @vue/cli

뷰 프로젝트를 생성하면 다음과 같은 프롬프트를 볼 수 있다.

Vue CLI v3.0.0-beta.6

?Please Pick a preset : (Use arrow Keys)

> default (babel, eslint)

   menually select features

2018.04.09추가)

- Vue-Cli의 기본 템플릿은 babel, eslint, unit-mocha를 포함한다.

default로 생성을 성공적으로 완료하면 다음과 같이 명령어를 실행한다.

> cd vue-voca

> npm run serve

성공적으로 컴파일이 되면 http://localhost:8080/ 로 들어가본다.

아래와 같은 화면을 볼 수 있다면, 성공적으로 Vue.js App을 생성한 것이다.

2. Vue Form Validation

VeeValidate는 폼 유효성 체크를 위한 패키지다.

설치방법

> yarn add vee-validate

#또는

> npm install vee-validate --save

사용방법[플러그인]

import VeeValidate from 'vee-validate';

Vue.use(veeValidate);

3. Vue router

> npm add vue-router

#또는

> yarn add vue-router

import vue from 'vue'

import Router from 'vue-router'

vue 후에 vue-router를 임포트해야한다.

동영상에서 진행한 프로젝트를 따라한 깃으로 가기. 개인적인 주석이 포함되어있습니다.