LoginSignup
3

More than 3 years have passed since last update.

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

Posted at

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レベルの拡張ファイル

Directory Structure   VuePress 1 x.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

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ですが表示されます
}

スクリーンショット 2019-09-19 1.54.35.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/

Vue   VuePress Practice.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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3