Kossie Coder 15. 싱글 파일 컴포넌트

views 폴더 : 보통 페이지 컴포넌트.

Home을 클릭했을 때, views/Home.vue 컴포넌트를 보여주고, About을 클릭했을때는 views/About.vue를 보여준다.

더 잘게 쪼개고 싶으면 components폴더 안에 넣어주면 된다.

 

- public : Webpack의 처리를 받지않고 퍼블리싱되는 정적 자산(static assets)을 포함. (단, index.html의 경우 일부 Webpack의 처리를 받는다.)

      - index.html : 앱의 템플릿 파일. Vue 앱은 이 index.html 페이지로부터 실행된다.

- main.js : 가장 먼저 실행되는 javascript 파일. Vue 인스턴스를 생성하는 역할.

애플리케이션의 진입점. 이 파일은 Vue 앱을 초기화하고, index.html파일에서 어떤 HTML 엘리멘트를 앱에 붙여야하는지 나타낸다. 이 파일에 전역 컴포넌트나 부가적인 Vue 라이브러리를 등록하는 경우가 많다.

- App.vue : Vue 애플리케이션의 최상위 컴포넌트.

- assets 폴더 : CSS나 이미지 등의 정적 자산을 저장하는 디렉토리. 이 파일들은 src 디렉토리에 포함되어 있기 때문에 Webpack 처리를 받는다. 즉, Sass/SCSS나 Stylus와 같은 전처리 도구를 사용할 수 있다는 의미.

 

 

 

App.vue

<template>
  <div id="app">
     <nav>
     <!--다른 페이지로 넘기고싶을때 a태그를 사용하는데, vueRouter를 사용할때는 앞에 'router-link'태그 사용-->
       <router-link to="/">Home</router-link> <!--to뒤에 path를 적어준다.-->
       <router-link to="/about">About</router-link>
     </nav>
     <router-view /> <!--VueRouter를 사용하고 싶으면 router-view태그를 넣어주면 된다.-->
     <!--Home버튼 눌렀을때 router-view 부분이 Home컴포넌트로, About버튼을 눌렀을때는 About 컴포넌트로 바뀐다.
     그래서 페이지는 바뀌지만 로딩을 새로 하지않고, index.html안에서 이루어진다.-->
  </div>
</template>

 

 

HomeView.vue

<!--template, script, style 이렇게 세 부분으로 되어있다.-->
<template> <!--html코드가 들어간다.-->
 <div> <!--감싸는 하나의 태그가 존재해야한다.-->
  <h1>This is Home page</h1>
  <KossieCoder />
 </div>
</template>

<script>
import KossieCoder from "@/components/KossieCoder.vue";//@:scr의미.불러온 후, 사용할거라고 밑에 또 등록을 해야한다.
export default { //methods,data,watch,computed 같은게 들어간다.
 components: {
  KossieCoder,
 },
 data(){ //data를 function으로 넣어줘야한다. return을 해서 object로 넣어줘야한다.
  return {
   name: "Kossie Coder"
  }
 }
}
</script>

<style scoped> <!--style이 들어간다. 즉 css코드가 들어간다.-->
<!--scoped를 넣어줘야지 이 파일의 template에만 적용된다. 넣지않으면 이 application전체에 적용-->
h1 {
 color: red;
}

</style>

 

 

AboutView.vue

<template>
 <div class="about">
  <h1>This is an about page</h1>
  <kossie-coder />
 </div>
</template>

<script>
import KossieCoder from "@/components/KossieCoder.vue"
export default {
 components: {
  KossieCoder,
 }
}
</script>
<style scoped></style>

 

 

 

KossieCoder.vue

<template>
 <div>
  <p>{{ name }}</p>
  <button @click="updateName">Change name</button>
 </div>
</template>
<script>
export default {
 data(){
  return {
   name: 'Kossie Coder',
  }
 },
 methods: {
  updateName(){
   this.name = 'Kossie Coder Updated'
  }
 }
}
</script>
<style scoped></style>

 

 

*모든 내용은 Kossie Coder가 출처입니다.