Help us understand the problem. What is going on with this article?

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

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", # Htmltitle<title>VuePress Practice | {h1 | h2..}</title>が表示されま    description: "VuePressのPracticeです" # headdescriptionVuePressPracticeですが表示されます。
}

スクリーンショット 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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away