3分でNuxt.js(+TailwindCSS) + StorybookでAtomic Designする環境を作る
1934 ワード
はじめに
これはNuxt.js + Storybookの環境を作りたいけど色々めんどくさい人のために作った雛形です。
とりあえずサンプル用に Button
だけ作成してます。
Let's 3分クッキング✊😸
GitHub
手順
Git for WindowsとかTerminalを起動して作業ディレクトリで下記コマンドを順番に入力します。
git clone https://github.com/tsuengineer/nuxt-storybook.git
cd nuxt-storybook
npm i
npx nuxt storybook
最後のコマンドの実行が終わると勝手にブラウザが起動するはずですが、localhost:3003
でも開けます
Storybookの画面
うまくいくとこんな感じの画面が表示されます。
ボタンに関するソースコードは /components/atoms/Button
ディレクトリの中にあります。
このボタンを実際に使ったところ
下記コマンドを実行したあとに localhost:3000
にアクセスすると右下に(青い)ボタンが表示されます。
どうやってButtonコンポーネントをimportしてるかは /pages/index.vue
の中見ればわかると思います。
npm run dev
以上です😽
Author And Source
この問題について(3分でNuxt.js(+TailwindCSS) + StorybookでAtomic Designする環境を作る), 我々は、より多くの情報をここで見つけました https://qiita.com/tsu_eng/items/b5992180e02f4e62667e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .