Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
28
Help us understand the problem. What is going on with this article?
@takapiya

Vuepress入門

More than 1 year has passed since last update.

Vuepressとは

  • VuepressはVue.jsの作者が作った、Vueで動く静的ページジェネレーターです
  • markdownで書かれたファイルをhtmlに変換してくれます
  • markdownの中でvueが書けます
  • イメージはGitbookのVue版に近いです

開発リポジトリは以下です。 (Github:vuejs/vuepress)

Vuepressを使うメリット

  • ドキュメントドリブンで運用しやすい(1マークダウン1ページ)
  • Vueのコンポーネントを使えるので、markdownを拡張しなくてもよい
  • 快適なmarkdown環境が最初から用意されている (Config Reference:Markdown)

導入

node環境が用意されていることが前提です。
公式の手順は https://vuepress.vuejs.org/guide/getting-started.html を参照してください。

作業用フォルダを作成し、移動。


mkdir vp_test
cd vp_test

プロジェクトを初期化


npm init //とりあえずenter連打

vuepressの導入

npm install --save-dev vuepress //公式ではグローバルだけどローカルにインストール

コマンドを用意
グローバルにインストールしていない(vuepress devを叩いても動かない)ので、package.jsonにコマンドを用意します。

"scripts": {
  "dev":"vuepress dev", //開発中
  "build":"vuepress build" // 静的ファイルをジェネレート
},

これで環境が用意できました:clap:

ディレクトリ構造

プロジェクトフォルダ直下にあるmarkdownファイルは、自動でコンパイルされるようです。
今回はこのような構成でいきます。


vp_test
├ .vuepress   //vuepress関連のファイルが配置される
│    ├ dist   // npm run buildで生成されたファイルが入ってる
│    ├ components   // vueコンポーネントを入れる。vueファイルは自動で登録され、markdown内で自由に使用できます。
│    │  └ ColorTip.vue   
│    ├ public   // ドキュメントの生成に直接関係ない静的ファイル(画像とか)
│    └ config.js    // vuepressの設定ファイル
├ Readme.md   // ルートとなるmarkdown
└ docs // markdownファイルを置くディレクトリ
     └ color.md  // ページのmarkdown

config.jsの編集


module.exports = {
  head: [
    ['link', { rel: 'icon', href: `/logo.png` }] //[タグ名,{キー:バリュー}]
  ],
  port:'3000', //開発中のポート番号
  themeConfig:{
  // Vueファイル内で、$site.themeConfigでアクセスできます
  // 今回は出てきませんが、テンプレートの出し分けなどに使います
  // この辺を参照 https://github.com/vuejs/vuepress/blob/master/lib/default-theme/Layout.vue
  },
}

markdownファイルを書く


# カラーコード一覧

* 色を一覧にします
* components以下は自動でグローバルに登録

<color-tip v-for="color in colors" :hex="color" /> 

<script>
const colors = ["#FF0000","#00FF00","#0000FF"]
export default{
  data(){
    return{
      colors
    }
  }
}
</script>

<template lang="html">
  <span :style="{ color: hex }">{{hex}}</span>
</template>

<script>
export default {
  props:{
    hex:{
      type:String,
      reqire:true
    }
  }
}
</script>

<style lang="css">
span{
  display: inline-block;
}
</style>

Scssの導入

カスタムテーマ

カスタムテーマを使いたい場合は、config.jsに下記を追加します。

 theme:"customtheme" // node_modules/vuepress-theme-customtheme を用いる

与えた値がそのままディレクトリ名に反映されます。node_module以下なので別途リポジトリを立ててそこでテンプレート管理するほうが楽でしょう。
(まだ出来たてなので特に記述ないですが、多分そういう運用前提なのでは)

参考サイト

28
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
takapiya
サービスデザイン、ビジュアルデザイン、フロントエンドコーディング全部やりたい。Vue.jsが最近好き。
bengo4
「専門家をもっと身近に」を理念として、人々と専門家をつなぐポータルサイト「弁護士ドットコム」「弁護士ドットコムニュース」「税理士ドットコム」を提供。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
28
Help us understand the problem. What is going on with this article?