Vue CLI 3

2019. 1. 4. 01:56

Vue?

kr.vuejs.org

new Vue 인스턴스 생성. ( vm 관행적 코딩 컨벤션 )

Vue 인스턴스를 생성 할 때, data, method, props 등 옵션 객체를 전달

MVVM 패턴의 ViewModel 레이어에 해당하는 View 단 라이브러리

Angular 에서 지원하는 2 way data bindings 을 동일하게 제공

Component 간 통신의 기본 골격은 React 의 1 Way Data Flow (부모 -> 자식) 와 유사

- 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

공식 README.md 에는 npm과 yarn을 모두 지원한다고 적혀있다.

npm 으로 설치한 Vue CLI 로 프로젝트를 만들더라도 yarn을 요구하므로 yarn을 미리 설치하도록 한다.

1. Vue CLI 3 설치

npm install -g @vue/cli

yarn global add @vue/cli

2. 프로젝트 생성

vue create app

3. 서버 실행

npm run serve, yarn run serve

3. 빌드

npm run build, yarn run build

- ESLint disable

vue.config.js 추가

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

- Chrome Extention - Vue.js devtools

GLEAM