600.jpg

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 예제