Vue를 이용해 포트폴리오를 작성해 보는(1/3)의 계속입니다.
htps : // 이 m/mf37459/이고 ms/fcf1에9167c62에39843d1

Vue.cli를 사용하여 개발 환경을 설정할 때까지 문제없이 할 수있었습니다.
다음에 작성된 폴더 구성을 사용해 어떻게 사이트를 작성해 나갈지 고민했기 때문에 비망록.
(이번에 만들 포트폴리오는 페이지 전환이 없어야합니다)

$Vue create [디렉토리 이름]으로 작성된 내용

다음과 같은 디렉토리가 작성되었습니다.

 - test
 　├ babel.config.js
 　├ node_modules
 　　∟ (...)
 　├ package.json
 　├ public
 　　∟ (...)
 　├ README.md
 　├ src
 　∟ yarn.lock

[각 제품의 이미지는 다음과 같습니다]
[babel.config.js]는 새로운 자바스크립트 기법을 오래된 자바스크립트로 변환하는 규칙을 설명합니다.
[node_modules]는 사용하는 라이브러리가 여러가지 들어 있다.
[package.json]은 앱 이름과 어떤 라이브러리의 어떤 버전을 설치했는지가 기재되어 있다.
[public]은 정적 파일을 넣습니다. meta 요소나 favicon의 설정등은 여기에서 행하고 있는 것 같습니다.
[README.md]는 사용법의 설명, 원래부터 각 명령이 기재되어 있고, 스스로 추기해도 좋다.
[yarn.lock]은 각 라이브러리의 버전을 고정합니다.
[src]는 개발 디렉토리에서 build 이전의 소스 그룹입니다. 페이지의 내용을 괴롭힐 때는 이 내용을 만지게 됩니다.

그래서 내용을 괴롭히는 데 필요한 것은 src입니다. 이번 포트폴리오에서는 src의 내용 이외는 만지지 않았습니다.

src 디렉토리의 내용

상기의 설정대로 작성했을 경우의 디렉토리 구조는 이하와 같습니다.

 - src
 　├ App.vue
 　├ assets
   　∟ logo.png
 　├ components
   　∟ HelloWorld.vue
 　∟ main.js

[각 제품의 이미지는 다음과 같습니다]
[App.vue]는 Vue 단일 구성 요소 파일입니다. 어느 컴퍼넌트를 어느 순서로 표시할까가 쓰여져 있다. Vue.Router를 사용하면 페이지별로 어떤 컴포넌트를 표시할지 전환할 수 있다고 생각됩니다만, 이번은 1페이지만이므로, 여기를 보면 어느 컴퍼넌트를 어느 순서로 사용하고 있는지를 알 수 있습니다 .
[assets]는 컴포넌트에서 호출하는 이미지 등을 배치합니다. 원본에서 들어오는 logo.png는 vue 로고 이미지입니다.
[components]는 각 구성 요소가 배치됩니다. 컴포넌트는 각 UI를 분할한 이미지입니다. WEB 사이트는 이 컴포넌트의 집합으로 만들어집니다. HelloWorld.vue는 샘플의 문자 부분을 나열하고 App.vue에서 import, 표시됩니다.
[main.js] 는 어플리케이션의 최초로 읽어들여 실행되는 javascript 입니다. new Vue가 App.vue를 시작하는 것 같습니다.

내용을 만지다

conponents 폴더 안에 새로운 TheBody와 TheHeader라는 파일을 만듭니다.

 - src
 　├ App.vue
 　├ assets
   　∟ logo.png
 　├ components
    ├ TheBody.vue (*new)
    ├ TheHeader.vue (*new)
   　∟ HelloWorld.vue
 　∟ main.js

새롭게 배치한 각 파일은, 확실히 봐 알기 쉽게 다음과 같은 내용으로 합니다.

TheHeader.vue

<template>
  <div>
    <h1>this is HEADER</h1>
  </div>
</template>

<style scoped lang="scss">
div {
  border: 5px solid #42b983;
  border-radius: 5px;
  height: 10vh;
  margin-bottom: 10px;
  width: 80%;
}
</style>

TheBody.vue

<template>
  <div>
    <h1>this is Body</h1>
  </div>
</template>

<style scoped lang="scss">
div {
  border: 5px solid #42b983;
  border-radius: 5px;
  height: 80vh;
  width: 80%;
}
</style>

* css로 div가 쓰고 있습니다 만, 스타일 부분에서 scoped를 설정하고 있기 때문에 문제 없습니다.
*template의 바로 아래에는 1요소 밖에 둘 수 없습니다. 아래와 같이 2요소 두면 에러가 됩니다.



그런 다음 이 구성 요소를 App.vue에 배치합니다.

App.vue

<template>
  <div id="app">
    <TheHeader/> // (*new)
    <TheBody/> // (*new)
  </div>
</template>

<script>
import TheBody from './components/TheBody.vue' // (*new)
import TheHeader from './components/TheHeader.vue'// (*new)

export default {
  name: 'app',
  components: {
    TheBody,// (*new)
    TheHeader// (*new)
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

이상을 실시하면, 아래와 같은 표시가 됩니다.