VuePressの基本ディレクトリ構成を理解する config/routing/components/theme

# VuePressの基本ディレクトリ構成を理解する

_環境作成_

- [Getting Started | VuePress1.x](https://vuepress.vuejs.org/guide/getting-started.html#global-installation)
- [手前味噌](https://qiita.com/Gma_Gama/items/c841216f84a131f74776)

_参考ページ_

- [Directory Structure | VuePress](https://vuepress.vuejs.org/guide/directory-structure.html#default-page-routing)

VuePressは基本的に、
_/project-path/docs_の中に作成していき、
_/project-path/docs/.vuepress_に routing と関わらないconfigやasset, layoutなどを作成していくそうです。

基本内容は、

| ディレクトリ | 概要 | この記事でやるかやらないか |
|:---:|:---:|:---:|
| docs/config.js | configファイル |○|
| docs/** /*.md | routing |○|
| docs/.vuepress/components/*.vue | vue componentsファイル群 |○|
| docs/.vuepress/theme/**.{vue or js} | theme layoutファイル |○|
| docs/.vuepress/public | staticファイル置き場 ||
| docs/.vuepress/styles/*.styl | styleファイル置き場 ||
| docs/.vuepress/templates/{dev or ssr}.html | HTMLテンプレートファイル置き場 ||
| docs/enhanceApp.js | Applicationレベルの拡張ファイル ||


![Directory Structure   VuePress 1 x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/44d1f3de-c9ca-02e8-e86c-9adf5635c771.png)



## 基本的なRouting

### 説明

relative pathには前に/docsが入る感じになります。

| Relative Path | Page Routing |
|:---:|:---:|
| /README.md | / |
| /vue/README.md | /vue/ |
| /vuex/store.md | /vue/store.html |

になっていきます。

### Sample

```docs/README.md
# Hello VuePress
```

```docs/vue/README.md
# Vue
```

```docs/vuex/store.md
# Vuex
## This article is about store
```

![vuepractice-path-sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/3d15cccc-028e-abd9-bc0d-d9679ff7395e.png)


## config fileの設定

### 説明

VuePressのconfigファイルは、
_/docs/.vuepress/config.{js|yml|toml}_で記載することができます。
configには、htmlのhead情報の他に、build環境の設定ができます。
[Config Reference | VuePress 1.x](https://vuepress.vuejs.org/config/#basic-config)

### Sample

```docs/.vuepress/config.js
module.exports = {
    title: "VuePress Practice", # Htmlのtitleに<title>VuePress Practice | {h1 | h2..}</title>が表示されます
    description: "VuePressのPracticeです" # headのdescriptionにVuePressのPracticeですが表示されます。
}
```

<img width="564" alt="スクリーンショット 2019-09-19 1.54.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/b2b144ab-7815-f73f-d91d-4904c906df95.png">

## componentsの作成 (docs/.vuepress/components/)

### 説明

components以下には、vueのcomponent(*.vue)を作成することができます。

### Sample

```
.
└─ .vuepress
   └─ components
      ├─ demo-1.vue //<demo-1></demo-1>
      ├─ OtherComponent.vue //<OtherComponent/>
      └─ Foo 
         └─ Bar.vue //<Foo-Bar />
      └─ task-list.vue
```

でmarkdownの中から呼び出すことができます。

```docs/.vuepress/task-list.vue
<template>
  <div>
    <p>Task</p>
    <ul>
      <li v-for="todo of todos" :key="'task'+todo.id">{{ todo.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [{ id: 1, title: "sample" }]
    };
  }
};
</script>
```

```docs/.vuepress/vue/README.md
# Vue

<task-list/>
```

[http://localhost:8080/vue/](http://localhost:8080/vue/)

![Vue   VuePress Practice.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/7d3a0333-2f20-4dd7-6fdd-57ecdbfc7f5c.png)

## themeファイルを作成する

### 説明

vuePressのthemeを作成するディレクトリです、
このディレクトリでは、Layout.vueでおけばワンファイルで拡張することもできますし、拡張としてディレクトリを作成または、他の人が作成したthemeを反映することができます。
今回は、Layout.vueファイルを使ってみます。

Contentの所に、markdownのコンテンツがはいります。（slotです。）

### Sample

```docs/.vuepress/Layout.vue
<template>
  <div class="theme-container">
    <Content />
  </div>
</template>

<style scoped>
.theme-container {
  background-color: red;
}
</style>
```

![Vue   VuePress Practice (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/134679e5-b9aa-f8ab-a9d3-5f44433a703e.png)