VuePressのおかげで、ドキュメントの作成が簡単になりました。

いくつかの基準を満たすものを設計し、プログラムし、実施するために必要な努力をすることは、常に重要な課題であった：

• アプリケーションの構造を素早く把握できる
• コンテンツを自由に検索できる
• 使用されるソリューションに関する一連の技術情報を提供する。
• テキストと コード
• はGitHubに保存でき、できれば簡単にデプロイできることが望ましい。

書類作成に多額の費用がかかるのも無理はない。一方 チーム が成長するにつれ、オンボーディングには多くのコストが発生し、そのためにサポートは常に開発者に同じ質問をする。 ある時点で、誰もが欠けている... VuePress。

VuePressは、静的ページジェネレーターです。 Vue.jsフレームワークは、ドキュメントを作成するのに適しています。Vue.js自体のドキュメントが良い例です。

VuePressは、Vueコンポーネントを使用して、Markdownフォーマットでテキストを編集することができます。2つのコマンドから始めてください：

npm install -g vuepress

ビュープレス開発

デフォルトでは、VuePressはdocs /ディレクトリで実行され、その中に独自の.vuepressフォルダを作成します。上記のコマンドを入力すると、自動的に ノード サーバーを起動し、localhost: 8080 /にドキュメントを表示します。 以下にファイル構造の例を示します。

適切な設定により、VuePressは完全で非常に美しいページを生成します。上の画面でわかるように、私たちのドキュメントには2つのカスタムコンポーネント、CodeHeadingとColorSampleが含まれています。

もっと簡単な例として、CodeHeadingを紹介しよう。

CodeHeading.vue

テンプレート

<template>
  <div :class="[ 'code-heading', colorClass ]">
    <slot/>
  </div>
</template>

スタイル

.code-heading {
 width: 100%；
 height: 40px；
 line-height: 40px；
 font-size: 12px；
 margin-bottom: -20px；
 border-top-left-radius: 6px；
 border-top-left-radius：6px；
 text-align: left；
 padding：0 20px；
 box-sizing: border-box；
 color: white；

 &__bad{。
   background-color: #cc0000；

   &::after {
     コンテンツ"BAD"；
   }
 }

 &グッド
   background-color: #3eaf7c；

   &::after {
     コンテンツ"GOOD"；
   }
 }

 &デフォルト
   background-color: #4e6e8e；
 }
}

脚本だ：

エクスポートデフォルト
 props: {
   型：文字列
 },
 computed：{
   colorClass() {
     return this.type ?code-heading__${this.type}` : "code-heading__default"；
   }
 }
};

これはVue.jsコンポーネントの標準的な構文で、Markdownファイルで簡単に利用できます。以下に実装例を示します（/docs/Code/javacript.md）：

const valueWrappers = wrapper.findAll('.change__value').wrappers；
expect(valueWrappers).to.have.lengthOf(2)；

expect(valueWrappers[0].text()).to.equal('€ 5000')；
expect(valueWrappers[1].text()).to.equal('0')；

このようにして、コードを使った作業例を提示するための、完全に読みやすいソリューションを手に入れた。

おそらくすべてのフロントエンド開発者が、グラフィックデザインから色のHEX表現が欠けているという状況に陥ったことがあるだろう。そして、もし常に手元に色を持っていて、事前に特定のパレットを固定できるとしたらどうだろう？その通り、ドキュメントが私たちを標準に従わせるのです。結果は次のようになるかもしれない：

この例では、ColorPicker.vueコンポーネントを使用しています。このコンポーネントは、指定した色を表示するだけでなく、丸をクリックすると自動的にHEXコードをクリップボードにコピーします。

テンプレート

<template>
  <div class="color-sample">
    <div class="color-sample__container">
      <div
        class="color-sample__circle"
        @click="copyToClipboard"
        :style="`background-color: ${ color }`"
        title="クリックしてHEXコードをコピーする"
      >
        <div class="color-sample__input-wrapper">
          <input type="text" class="color-sample__input" :id="hexId" :value="color">
            <div class="color-sample__input-overlay" :style="`background-color: ${ color }`"></div>
        </div>
      </div>
      <p>
        <strong>(( 名前 ))</strong><br/>
        (( 色 ))
      </p>
    </div>
  </div>
</template>

スタイル

.color-sample {
 display: inline-block；
 width: 45%；
 margin: 15px；

 &コンテナ
   display: flex；
   align-items: center；
 }

 &円
   width: 70px；
   height: 70px；
   float: left；
   border-radius: 50%；
   display: flex；
   align-items: center；
   justify-content: center；
   margin-right: 20px；
   cursor: pointer；
   border：1px solid #cfd4db；
 }

 &__input-wrapper{。
   position: relative；
 }

 &入力
   フォントサイズ: 12px；
   padding：2px；
   border-radius: 2px；
   border：0;
   display: inline-block；
   width: 60px；
 }

 &__input-overlay{。
   position: absolute；
   top：0;
   left: 0；
   right: 0；
   bottom：0;
   背景色：白
   text-align: center；
 }
}

脚本だ：

エクスポートデフォルト
 props: {
   color: String、
   name: 文字列
 },
 computed：{
   hexId() {
     color-${this.color.replace("#", "")}` を返します；
   }
 },
 メソッド: {
   copyToClipboard() {
     const label = document.getElementById(this.hexId)；
     label.select()；
     document.execCommand("copy")；
   }
 }
};

実装例（/docs/Design/colors.md）：

カラーサンプル。
カラーサンプル。 

VuePressに組み込まれた検索エンジンに注目する価値がある：

Markdownファイルのヘッダーに基づき、自動的に動作します。この方法で作られたドキュメントの設定は以下のようになる：

module.exports = {
 タイトル: 'Docs'、
 themeConfig：{
   sidebar: [
     {
       タイトル: 'General'、
       collapsable: false、
       children：[
         'General/introduction.md'、
         'General/installation.md'
       ]
     },
     {
       title: 'デザイン'、
       collapsable: false、
       children：[
         'Design/colors.md'、
         'Design/fonts.md'、
         'Design/forms.md'、
         'デザイン/レイアウト.md'
       ]
     },
     {
       title: 'Code'、
       折りたたみ可能: false、
       children：[
         'Code/general.md'、
         'Code/javascript.md'、
         'Code/scss.md'、
         'Code/vue.md'、
         'Code/translations.md'、
         'Code/git.md'、
         'コード/deployment.md'
       ]
     }
   ],
   nav: [
     {
       text: 'Knowledge'、
       items：[
         { text: 'VueSchools', link：'https://vueschool.io/' }.
       ]
     },
     {
       text: 'Codest'、
       link：'https://codesthq.com'
     },
     {
       text: 'Docs on GitHub'、
       link：'https://github.com/'
     }
   ]
 }
}

を持つ。 ビュープレス ビルド コマンドを使用することで、アセットを完全にサポートしながら、すぐに公開できる静的HTMLファイルを即座に生成することができます。

VuePressは、GitHub Pagesを含む様々なプラットフォームへの自動デプロイが可能であることは特筆に値する。さらに、独自のテーマを作成する機能は、VuePressを非常に優れたブログソリューションにしています。

上記の例を見て興味を持たれた方は、VuePressの公式ドキュメントをご覧になることをお勧めします。 プロジェクト.

続きを読む

• クエリオブジェクトによるコードの最適化
• Vue.jsの基礎チュートリアル。このフレームワークを始めるには？
• Javascriptパッケージのセキュリティ
• GraphQL: プロダクションでの教訓