VuePressの基礎基礎メモ - のぐそんブログ

VuePressとは

Vue.jsベースの静的サイトジェネレーターです。

静的サイトジェネレーターとは、Markdownなどで書かれたファイルからHTMLやCSS、JSを生成してくれるツールです。 DBの準備などはいらず、全て静的なファイルになる為、簡単に安心なサイトが作成できます。

公式サイトはこちら。

準備

VuePressを利用するにはnode ver 8 以上がインストールされている必要があります。

まず以下の手順でVuePressの開発環境を準備します。

// vuepressをインストール
yarn add -D vuepress

// docsディレクトリを作成
mkdir docs

// markdownファイルを作成して#Hello VuePressを追加
echo '# Hello VuePress' > docs/index.md

開発しやすいように、package.jsonにnpm scriptを追加。

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

こんな感じ。

{
  "name": "vuepress",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "vuepress": "^1.0.2"
  },
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

表示してみる。

yarn dev

こんな感じの画面が表示される。

タイトルとかを設定してみる

docsフォルダ配下に.vuepressディレクトリを作成し、config.jsを配置します。

module.exports = {
    title: 'My Pages',
    description: 'これは私のページ'
}

こんな感じになります。descriptionに設定したものはheadのdescriptionに設定されます。

言語を日本語にしてみる

デフォルトはlang="en-US"になっています。以下を設定することでlang="ja"になります。

  locales: {
    '/': {
      lang: 'ja'
    }
  }

多言語ページを作る場合は以下のような設定もできる。

  locales: {
    '/': {
      lang: 'ja',
      title: 'VuePressはじめました'
    },
    '/en': {
      lang: 'en-US',
      title: 'Hello VuePress'
    }
  }

ページを追加してみる

ページの追加は簡単。 docs配下に`.mdファイルを追加するだけ。

docs
 ├── about.md
 └── index.md

http://localhost:8080/about.html でアクセスすることができる。

ディレクトリで分けたい場合はsample/index.mdのようにもできる。

docs
 ├── about
 │   └── index.md
 └── index.md

http://localhost:8080/about/ でアクセスすることができる。

ナビゲーションを設定してみる

先程作成した、.vuepress/config.jsに以下の設定を追加する。

module.exports = {
    title: 'My Pages',
    description: 'これは私のページ',
    themeConfig: {
        nav: [
            { text: 'Home', link: '/' },
            { text: 'About', link: '/page1.html' },
            { text: 'Yahoo', link: 'https://yahoo.co.jp/' }
        ]
    }
}

こんな感じになる。絶対パスを設定した場合はtarget=``"``_blank``"として設定される。

サイドバーを追加

.vuepress/config.jsに以下を追加する。

themeConfig: {
    sidebar: [
        ['/', 'Home'],
        ['/page1', 'Page1'],
        ['https://yahoo.co.jp/', 'Yahoo']
    ]
},

こんな感じになる。

以下のようにmdファイルを設定すると見出しもサイドナビに表示される。

# Page1
## 見出しA
## 見出しB

headにタグを埋め込んでみる

.vuepress/config.jsに以下を追加すると共通ヘッダーが埋め込まれる。

module.exports = {  
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }]
  ]
}

ページごとに埋め込む場合はページのmdファイルに以下を設定。

---
title: Home Title
description: Home description
meta:
 -
  og:title: 'og title Home page'
 -
  og:desciption: 'og Home description'
 -
  og:image: 'https//test.jp/thisog.jpg'
---

distファイルの生成場所を変更してみる

デフォルトではビルド時に/.vuepress/distにファイルが生成されます。変更したい場合は以下のような設定をする。

module.exports = {
    dest: 'production'
}

docs/productionにビルドファイルが生成される。

componentを利用してみる

VuePressではVueのcomponentが利用できます。

まず、.vuepress配下にcomponentsディレクトリを作成します。その中に*.vueファイルを作成していきます。

◎vueファイル

<template>
    <div>テストコンポーネントだよ</div>
</template>
<script>
    export default {
        name: "Sample"
    }
</script>
<style scoped>
    div {color: red;}
</style>

◎markdownファイル