개인히스토리저장소

작성일자 : 2020.09.07

환경 : Vue 2, vue-router 3.4.3

1. vue-rotuer 설치

2. vue-router 설정

main.js

App.vue

3. 확인

/foo 직접 접근 시 

/bar 직접 접근 시

foo 링크 클릭 시

bar 링크 클릭 시

전체 로그 :

  [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

조치 :

  프로젝트 바로 아래(package.json 위치)에 vue.config.js 생성 후 아래 옵션 추가

module.exports = {
    runtimeCompiler: true
}

작성일자 : 2020.09.06

환경 : Vue 2

1. Component 생성

NewComponent.vue

<template>
    New Component    
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>

2. Component 등록

사용할 위치에 신규 Component 선언 

App.vue

<template>
    ...
</template>

<script>
// import 및 등록
import NewComponent from './components/NewComponent.vue'
export default {
  components: {
    NewComponent
  }
}
</script>

<style>
	...
</style>

import 할 때 컴포넌트 명칭은 꼭 파일명과 같지 않아도 된다.

3. Component 사용

<template>
  <div id="app">
  ...
    <!-- 컴포넌트 사용 -->
    <NewComponent/>
  
  ...
  </div>
</template>

<script>
import NewComponent from './components/NewComponent.vue'
export default {
  components: {
    NewComponent
  }
}
</script>

<style>
	...
</style>

컴포넌트를 사용할 때는 케밥 표기법으로도 사용이 가능하며, 공식 가이드에선 케밥 표기법을 권장한다.

import newComponent     ->      <new-component>