nuxt2-storybook-vite: 環境構築、基本的な使い方 / nuxtプロジェクトコンポーネントライブラリ

1.nuxt2プロジェクトを作成する

インストール - NuxtJS | Nuxt.js 中国語 Web サイト

yarn create nuxt-app <项目名>

2. ストーリーブックをインストールする

2.1. ストーリーブックの初期化

pnpm add -g @storybook/cli

npx -p @storybook/cli sb init

コマンドの説明

シリアルナンバー	注文	コマンドの説明
1	npx -p @storybook/cli sb init	は、初期化に役立つコマンドラインディレクティブです。
2	npx	は、パッケージをインストールせずにコマンドを実行する方法であり、パッケージを一時的にダウンロードして実行します。たとえばここでは、最初にグローバルにインストールせずに、`npx` を使用して `@storybook/cli` を実行します。
3	-p	どのパッケージをインストールして実行するかを指定する `npx` のオプション。
4	@ストーリーブック/cli	`@storybook/cli` は、Storybook プロジェクトを生成および管理するためのコマンドを含む Storybook 用のコマンドライン ツールキットです。
5	sb 初期化	`sb init` は、`@storybook/cli` によって提供される、新しい Storybook プロジェクトを初期化するコマンドです。このコマンドを実行すると、現在の作業ディレクトリに新しい Storybook プロジェクトが作成され、必要な構成とファイルが自動的に追加されます。
プロジェクトで「npx -p @storybook/cli sb init」を実行すると、コンポーネントを開発およびテストできる新しい Storybook プロジェクトをすばやく初期化するのに役立ちます。

2.2. この記事では vite を選択します

2.3、プリセットのロードに失敗しました: "@storybook\\vue-vite\\preset"

エラーを解決する

yarn add vite

この時点でストーリーブックがインストールされているので、ここでyarn storybookの起動を実行します。

yarn storybook

2.4、エラー: パッケージ「アンフェッチ」のエントリを解決できませんでした。パッケージの package.json で指定された main/module/exports が正しくない可能性があります。

このエラーは通常、「unfetch」モジュールが package.json ファイル内で main または module を適切に指定していないことが原因で発生します。

次の手順を試します。

1. プロジェクトに「unfetch」モジュールがインストールされており、バージョンが正しいことを確認してください。

2. 「unfetch」モジュールの package.json ファイルを確認し、その main 属性または module 属性を指定します。

3. package.json のエクスポート内容を確認します。

"exports": {
    ".": {
          "import": "./index.mjs",
          "default": "./index.js"
    },
}

に変更されました

​
"exports": {
    ".": {
          "import": "./src/index.mjs",
          "default": "./src/index.js"
    },
}

問題は解決された

2.5. ストーリーブックを再度開始して正常に開始する

2.6. ページのコンテンツをクリックすると、次の図に示すようにエラーが報告されます。

エラーの理由

yarn add @vitejs/plugin-vue

このエラーは、Vite を使用してプロジェクトをビルドするときに @vitejs/plugin-vue プラグインがインストールされていないことが原因で発生します。@vitejs/plugin-vue プラグインは、.vue ファイルを処理する機能を提供します。

次の設定をプロジェクトのルート ディレクトリにあるファイルに追加しますvite.config.js。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue()
  ]
})

2.7. 再度yarn storybookを実行すると、前のエラーは解決され、新しいエラーは次の図のようになります。

エラーの理由

このエラーは、@vitejs/plugin-vue プラグインを使用してプロジェクトをビルドするときに Vue.js 3.2.25 以降をインストールする必要があり、Vue.js コンパイラーもインストールする必要があるために発生します。
この記事では、nuxt2 は vue2.x のバージョンを使用していますが、vue2 ベースで vite を使用したいので、プラグインのインストールと vite の設定が必要です。

したがって、次のように nuxt2 / vue2 プロジェクトで vite を使用したいと考えています。

2.8 vue2 プロジェクトで vite を使用する方法

Vite は ESM (ES6 モジュール) 上に構築されたツールであり、Vue 2 は CommonJS 上に構築されているため、Vue 2 プロジェクトは Vite をサポートしていません。プラグインを使用することで、vite-plugin-vue2Vue 2 プロジェクトで Vite を使用できます。vite-plugin-vue2プラグインを使用する手順は次のとおりです。

2.8.1. まず Vite をインストールし、vite-plugin-vue2

yarn add vite vite-plugin-vue2 --save-dev

2.8.2.vite.config.jsプロジェクトのルート ディレクトリにファイルを作成し、次の内容を追加します。

const { createVuePlugin } = require('vite-plugin-vue2')

module.exports = {
  plugins: [
    createVuePlugin()
  ]
}

これにより、Vite はビルド時に Vue 2 プラグインをロードするように指示されます。

Vue 2 は ESM をサポートしていないため、ビルド プロセスは Vue 3 プロジェクトほど効率的ではないことに注意してください。したがって、Vite を使用すると、Vue 2 プロジェクトで作業するときにビルド時間が長くなる可能性があります。

2.9、糸のストーリーブックをもう一度開始します

起動に成功し、ページコンポーネントの動作に問題はありません

2.10. story.js ファイル内の要素を使用する

コンポーネント内で要素を使用する場合、コンポーネントにいわゆる「要素環境」を提供し、要素を導入して使用する必要があります。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from "vue";
Vue.use(ElementUI)

正常にテストされました 

2.11. ストーリーによって導入されたコンポーネントはエイリアス/エイリアスを使用します

エイリアスはストーリーの vite 構成ファイル vite.config.js で構成する必要がありますが、基本的に 2 つのプロジェクトであるため、nuxt.config.js の構成は無効です

正常にテストされました  

3. 導入

上記ではunfetchのpackage.jsonのexportsの指定エントリを変更していますが、yarn build-storybookは変更の有無に関わらず正常に実行できるため、コードの取得、パッケージ化、サーバーへのデプロイがスムーズに行われるはずです。

yarn build-storybook

パッケージ化後に storybook-static 静的リソースを生成する

http-server を使用してサービスを開始します（通常）

サーバーは nginx を使用して同じものを起動します 

4、詳しい使い方

追加予定

五、ストーリーブックの長所と短所

5.1. 利点

5.1.1. 開発の効率化により、Storybook を使用すると、開発者はアプリケーション全体がデプロイされるのを待たずに、UI コンポーネントをより迅速に開発およびテストできるようになり、Storybook でコンポーネントをテストおよびデバッグするだけで済みます。

5.1.2. 保守性の向上 Storybook は、コンポーネントの保守性を向上させる、理解しやすく管理しやすい UI コンポーネント ライブラリを提供します。

5.1.3. ドキュメントの改善 Storybook は、開発者がコンポーネントの使用法と API をすぐに理解できるように、視覚的なドキュメントを生成できます。

5.1.4、より良いコラボレーション。Storybook は、チーム内の開発者間でコンポーネントを共有および議論するためのプラットフォームとして使用できます。これにより、チーム メンバーはコンポーネントを理解し、使用することが容易になり、同時にコラボレーションやコミュニケーションも向上します。

5.1.5. スケーラビリティが向上し、Storybook は React、Vue、Angular、Ember などの他のツールやフレームワークと統合できます。これにより、開発者は使い慣れたツールやフレームワークを使用し、Storybook を独自のワークフローに比較的簡単に統合できるようになります。

5.2. 欠点

5.2.1. Storybook はローカル開発ツールであるため、運用アプリケーションの構築とデプロイには使用できませんが、パッケージ化された静的リソースはデプロイに使用できます。

5.2.2. Storybook はすべてのブラウザやデバイスの環境をシミュレートできるわけではないため、場合によってはアプリケーション内の環境を正確にシミュレートできない場合があります。

5.2.3. Storybook は完全なテスト フレームワークではなく、コンポーネントの外観と動作のみをテストでき、完全なエンドツーエンドのテストを実行することはできません。

5.2.4. Storybook では、すべてのコンポーネントが正しく表示およびテストされるようにするために、開発者による手動構成が必要です。

5.2.5、Storybook は、特に小規模なプロジェクトの場合、追加のオーバーヘッドと複雑さを生成する可能性があります。

5.2.6. Storybook は独立した開発環境であり、完全なルーティング機能が含まれていないため、複雑なルーティングを処理できません。コンポーネント ストーリーで複雑なルーティングを処理する必要がある場合は、いくつかの制限に遭遇する可能性があります。

5.2.7. 一部のフロントエンド フレームワークのみがサポートされている Storybook は、React、Vue、Angular などのさまざまなフロントエンド フレームワークをサポートしていますが、すべてのフロントエンド フレームワークが完全にサポートされているわけではありません。一部のフレームワークでは、適切に動作するために追加の構成やプラグインが必要になる場合があります。

5.2.8. アプリケーションとの直接統合はありません。Storybook は分離された開発環境を提供するように設計されているため、アプリケーションの他の部分と直接統合することはできません。アプリケーションの他の部分と対話する必要がある場合は、追加の構成または開発作業が必要になる場合があります。

5.2.9. 手動構成が必要な場合があります Storybook にはいくつかの自動構成オプションが用意されていますが、場合によってはニーズを満たすために手動構成が必要になる場合があります。より高度な機能やカスタム構成が必要な場合は、さらに時間と労力がかかる場合があります。

Storybook にはいくつかの制限がありますが、それでもコンポーネントの開発には非常に便利なツールです。
開発者は、ニーズに応じてプロジェクトに適しているかどうかを評価できます。

6. プロセス記録

記録 1. ストーリーブックを理解する

Storybook は、コンポーネントを開発およびテストするためのツールであり、開発者はコンポーネントをアプリケーションに統合する前に、コンポーネントを独立して開発およびテストできます。

7.交換と修正を歓迎します

参考リンク

Nuxt モジュールを Storybook Answers に組み込む - Code World

Nuxt.js_vue.js_weixin_0010034-Vue で Storybook を使用するための (ほぼ) 包括的なガイド

インストール - NuxtJS | Nuxt.js 中国語 Web サイト