VuePressの基本ディレクトリ構成を理解する
環境作成
参考ページ
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レベルの拡張ファイル |
基本的な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
config fileの設定
説明
VuePressのconfigファイルは、
/docs/.vuepress/config.{js|yml|toml}で記載することができます。
configには、htmlのhead情報の他に、build環境の設定ができます。
Config Reference | VuePress 1.x
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ですが表示されます。
}
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/>
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>