Table of Contents

Nuxt.js

Starting with nuxt.js

$ npm install -g vue-cli
$ vue init nuxt-community/starter-template [프로젝트 이름]
$ cd [생성된 프로젝트 디렉토리]
$ npm install # or yarn  # npm 또는 yarn을 이용하여 의존성 모듈 설치
$ npm run dev  # nuxt.js 실행

프로젝트 구조

pages

<template>

</template>

<script>
export default {

  // vue 인스턴스가 생성되기 전 store 초기화  
  fetch({store, params}) {
  },

  // 인스턴스가 생성될 때 호출
  created() {
  },
  
  // 비동기적으로 데이터 생성 json 형태로 반환하면 data()와 머지됨.
  asyncData(context) {
    return {}
  },
  
  // 데이터 생성
  data() {
    return {}
  },  
  
  // (optional) 해당 페이지 <head> 커스터마이징
  head() {
    return {
      title: '',
      meta: [
        { hid: '고유값', name: '설명', content: '커스텀 설명' }
      ]
    }
  },
  
  // 해당 파일에 동작시킬 메소드 정의
  methods: {
  },
  
  // 복잡한 계산식일 때 computed를 이용
  computed: {
  },
  
  // 외부 컴포넌트 추가 {a, b, c}의 형태로 작성. 각각의 컴포넌트는 import a from 'a'로 가져온다
  components: {
  },
  
  // (optional), layout 설정, 기본 레이아웃 사용시 필요없음
  layout: '',
  
  // (optional), 미들웨어 설정, middleware: 'authenticated'는 middleware 디렉토리의 authenticated.js 파일 실행
  middleware: '',
  
  // (optional), 최상단 true, 최하단 false
  scrollToTop: true || false
}
</script>

설정 파일

Routes

layouts

Components

<script>
export default {
  props: {
    p1: {Number, String},
    p2: {
      tyep: String,
      required: true
    },
    p3: {
      type: Number,
      default: 100
    },
    p4: {
      type: Object,
      default: function() {
        return { message: 'hello world' }
      }
    },
    p5: {
      validator: function(value) {
        return value > 0
    }
  }
}
</script>

Vuex store를 이용한 데이터 관리

express와 nuxt.js 같이 사용

$ vue init nuxt-community/starter-template nuxt_with_express

$ npm install
$ npm install -s express
$ vue init nuxt-community/starter-template [프로젝트 명]  # nuxt로만 이루어진 웹 애플리케이션 프로젝트 생성
$ vue init nuxt-community/express-template [프로젝트 명]  # express 앱 자동 추가
$ npm install
$ npm run build
$ npm run start
$ npm run dev

References