[ 2019.01.05] Vue.js 시작하기

veu.js 콘셉트

• Vue.js는 웹 애플리케이션 제작을 쉽게 하도록 도와주는 JavaScript 프레임워크
• 사용자 인터페이스를 만들기 위한 진보적인 프레임워크
• 타 프레임워크와 가장 큰 차별점은 바로 단일 파일 컴포넌트
• 다른 프레임워크와의 비교

vue.js 설치

nvm 설치

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

nvm: command not found -> touch ~/.bash_profile 입력 후 재설치

nodeJS 설치

nvm install node

yarn 설치

npm install -g yarn

1. Vue CLI

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

2. 프로젝트 생성

vue create app

3. 빌드

cd 폴더명
npm run serve

※ ESLint disable

vue.config.js 추가 : 에러메시지 안뜨게 하는 방법

module.exports = {
    chainWebpack: config => {
        config.module.rules.delete('eslint');
    }
}

Hello,world

• html 코드

<div id="app">
	{{ hello }}
</div>

• javaScript 코드

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
new Vue({
	el: '#app',
    data: {
    		hello: 'hello, World'
    }
})

• 실행결과

 hello, World

• JSFiddle Hello World 예제