Vueプロジェクト作成
TypeScriptじゃなくて、JavaScriptを選択。
まあTypeScriptがいいんでしょうが。
$ npm create vite@latest
Need to install the following packages:
create-vite@4.0.0
Ok to proceed? (y) y
✔ Project name: … vue-storybook-material
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript
Scaffolding project in /Users/myname/vue-storybook-material...
Done. Now run:
cd vue-storybook-material
npm install
npm run dev
最後の3行を実行してプロジェクトを起動する。
cd vue-storybook-material
npm install
npm run dev
VITE v4.0.1 ready in 504 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
➜ press h to show help
Local: http://127.0.0.1:5173/
とあるので、http://127.0.0.1:5173/にアクセスして、下のような画面が表示されたらOK。
storybookをインストールする
$ npx storybook init
Need to install the following packages:
storybook@6.5.14
Ok to proceed? (y) y
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
storybook init - the simplest way to add a Storybook to your project.
• Detecting project type. ✓
Detected vite project, setting builder to @storybook/builder-vite
• Adding Storybook support to your "Vue 3" app
attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
added 1629 packages, and audited 1663 packages in 42s
250 packages are looking for funding
run `npm fund` for details
22 high severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
. ✓
• Preparing to install dependencies. ✓
up to date, audited 1663 packages in 3s
250 packages are looking for funding
run `npm fund` for details
22 high severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
. ✓
🔎 checking possible migrations..
🔎 found a 'npm7' migration:
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ We've detected you are running npm 8.15.0 │
│ which has peer dependency semantics which Storybook is incompatible with. │
│ │
│ In order to work with Storybook's package structure, you'll need to run `npm` with the │
│ `--legacy-peer-deps=true` flag. We can generate an `.npmrc` which will do that automatically. │
│ │
│ More info: https://github.com/storybookjs/storybook/issues/18298 │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'npm7' migration on your project? … yes
✅ ran npm7 migration
✅ migration check successfully ran
To run your Storybook, type:
npm run storybook
For more information visit: https://storybook.js.org
storybookの実行
storybookの実行
$ npm run storybook
> vue-storybook-material@0.0.0 storybook
> start-storybook -p 6006
info @storybook/vue3 v6.5.14
info
info => Loading presets
info => Ignoring cached manager due to change in manager config
ℹ ｢wdm｣: wait until bundle finished:
ℹ ｢wdm｣: Hash: 0d8803a91d059fb38736
Version: webpack 4.46.0
Time: 7499ms
Built at: 2022/12/16 15:19:20
Asset Size Chunks Chunk Names
0.manager.bundle.js 287 KiB 0 [emitted] [big]
1.manager.bundle.js 128 KiB 1 [emitted]
2.manager.bundle.js 892 KiB 2 [emitted] [big]
3.manager.bundle.js 83.9 KiB 3 [emitted]
4.manager.bundle.js 15.8 KiB 4 [emitted]
5.manager.bundle.js 295 KiB 5 [emitted] [big]
6.manager.bundle.js 1.36 KiB 6 [emitted]
index.html 4.62 KiB [emitted]
main.manager.bundle.js 4.69 KiB main [emitted] main
runtime~main.manager.bundle.js 8.95 KiB runtime~main [emitted] runtime~main
vendors~main.manager.bundle.js 4.57 MiB vendors~main [emitted] [big] vendors~main
Entrypoint main [big] = runtime~main.manager.bundle.js vendors~main.manager.bundle.js main.manager.bundle.js
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-links/manager.js ./node_modules/@storybook/addon-docs/manager.js ./node_modules/@storybook/addon-controls/manager.js ./node_modules/@storybook/addon-actions/manager.js ./node_modules/@storybook/addon-backgrounds/manager.js ./node_modules/@storybook/addon-viewport/manager.js ./node_modules/@storybook/addon-toolbars/manager.js ./node_modules/@storybook/addon-measure/manager.js ./node_modules/@storybook/addon-outline/manager.js ./node_modules/@storybook/addon-interactions/manager.js 160 bytes {main} [built]
[./node_modules/@storybook/addon-actions/manager.js] ./node_modules/@storybook/addon-actions/manager.js + 5 modules 96.4 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-actions/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-actions/dist/esm/manager.js 3.42 KiB [built]
| ./node_modules/@storybook/addon-actions/dist/esm/containers/ActionLogger/index.js 7.4 KiB [built]
| ./node_modules/@storybook/addon-actions/dist/esm/components/ActionLogger/index.js 2.97 KiB [built]
| ./node_modules/react-inspector/dist/es/react-inspector.js 81.7 KiB [built]
| ./node_modules/@storybook/addon-actions/dist/esm/components/ActionLogger/style.js 793 bytes [built]
[./node_modules/@storybook/addon-backgrounds/manager.js] ./node_modules/@storybook/addon-backgrounds/manager.js + 6 modules 15.2 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-backgrounds/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/manager.js 826 bytes [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/constants.js 185 bytes [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/containers/BackgroundSelector.js 6.55 KiB [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/containers/GridSelector.js 3.51 KiB [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/components/ColorIcon.js 399 bytes [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/helpers/index.js 3.57 KiB [built]
[./node_modules/@storybook/addon-controls/manager.js] ./node_modules/@storybook/addon-controls/manager.js + 3 modules 6 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-controls/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-controls/dist/esm/manager.js 1.23 KiB [built]
| ./node_modules/@storybook/addon-controls/dist/esm/constants.js 74 bytes [built]
| ./node_modules/@storybook/addon-controls/dist/esm/ControlsPanel.js 4.57 KiB [built]
[./node_modules/@storybook/addon-docs/manager.js] ./node_modules/@storybook/addon-docs/manager.js + 2 modules 1.02 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-docs/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-docs/dist/esm/manager.js 625 bytes [built]
| ./node_modules/@storybook/addon-docs/dist/esm/shared.js 380 bytes [built]
[./node_modules/@storybook/addon-interactions/manager.js] ./node_modules/@storybook/addon-interactions/manager.js + 22 modules 110 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-interactions/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-interactions/dist/esm/manager.js 388 bytes [built]
| ./node_modules/@storybook/addon-interactions/dist/esm/constants.js 100 bytes [built]
| ./node_modules/@storybook/addon-interactions/dist/esm/Panel.js 11.3 KiB [built]
| ./node_modules/@storybook/addon-interactions/dist/esm/components/StatusIcon/StatusIcon.js 1.85 KiB [built]
| ./node_modules/@storybook/addon-interactions/dist/esm/components/Subnav/Subnav.js 5.2 KiB [built]
| ./node_modules/@storybook/addon-interactions/dist/esm/components/Interaction/Interaction.js 5.7 KiB [built]
| ./node_modules/@storybook/instrumenter/dist/esm/types.js 221 bytes [built]
| ./node_modules/@storybook/instrumenter/dist/esm/instrumenter.js 33.8 KiB [built]
| ./node_modules/@storybook/addon-interactions/dist/esm/theme.js 215 bytes [built]
| ./node_modules/@storybook/addon-interactions/dist/esm/components/StatusBadge/StatusBadge.js 1.79 KiB [built]
| ./node_modules/@storybook/addon-interactions/dist/esm/components/MethodCall.js 19.2 KiB [built]
| ./node_modules/@storybook/addon-interactions/dist/esm/components/MatcherResult.js 7.49 KiB [built]
| ./node_modules/@devtools-ds/object-inspector/dist/esm/index.js 103 bytes [built]
| ./node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.js 1.37 KiB [built]
| + 8 hidden modules
[./node_modules/@storybook/addon-links/manager.js] ./node_modules/@storybook/addon-links/manager.js + 2 modules 662 bytes {vendors~main} [built]
| ./node_modules/@storybook/addon-links/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-links/dist/esm/manager.js 398 bytes [built]
| ./node_modules/@storybook/addon-links/dist/esm/constants.js 225 bytes [built]
[./node_modules/@storybook/addon-measure/manager.js] ./node_modules/@storybook/addon-measure/manager.js + 3 modules 3.99 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-measure/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-measure/dist/esm/manager.js 484 bytes [built]
| ./node_modules/@storybook/addon-measure/dist/esm/constants.js 290 bytes [built]
| ./node_modules/@storybook/addon-measure/dist/esm/Tool.js 3.12 KiB [built]
[./node_modules/@storybook/addon-outline/manager.js] ./node_modules/@storybook/addon-outline/manager.js + 3 modules 4.15 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-outline/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-outline/dist/esm/manager.js 626 bytes [built]
| ./node_modules/@storybook/addon-outline/dist/esm/constants.js 76 bytes [built]
| ./node_modules/@storybook/addon-outline/dist/esm/OutlineSelector.js 3.35 KiB [built]
[./node_modules/@storybook/addon-toolbars/manager.js] ./node_modules/@storybook/addon-toolbars/manager.js + 11 modules 19.5 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-toolbars/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/manager.js 467 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/constants.js 76 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarManager.js 1.44 KiB [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuList.js 5.42 KiB [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/utils/normalize-toolbar-arg-type.js 1.05 KiB [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuButton.js 625 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/hoc/withKeyboardCycle.js 5.09 KiB [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/utils/get-selected.js 1000 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuListItem.js 979 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/utils/create-cycle-value-array.js 573 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/utils/register-shortcuts.js 2.69 KiB [built]
[./node_modules/@storybook/addon-viewport/manager.js] ./node_modules/@storybook/addon-viewport/manager.js + 5 modules 18.8 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-viewport/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-viewport/dist/esm/manager.js 514 bytes [built]
| ./node_modules/@storybook/addon-viewport/dist/esm/constants.js 316 bytes [built]
| ./node_modules/@storybook/addon-viewport/dist/esm/Tool.js 11 KiB [built]
| ./node_modules/@storybook/addon-viewport/dist/esm/shortcuts.js 3.81 KiB [built]
| ./node_modules/@storybook/addon-viewport/dist/esm/defaults.js 2.98 KiB [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/manager/index.js] ./node_modules/@storybook/core-client/dist/esm/manager/index.js + 4 modules 22.9 KiB {vendors~main} [built]
| ./node_modules/@storybook/core-client/dist/esm/manager/index.js 335 bytes [built]
| ./node_modules/@storybook/core-client/dist/esm/manager/provider.js 5.17 KiB [built]
| ./node_modules/@storybook/core-client/dist/esm/manager/conditional-polyfills.js 762 bytes [built]
| ./node_modules/@storybook/channel-postmessage/dist/esm/index.js 13.2 KiB [built]
| ./node_modules/@storybook/channel-websocket/dist/esm/index.js 3.26 KiB [built]
[./node_modules/@storybook/ui/dist/esm/index.js] 498 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
+ 885 hidden modules
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.31 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled successfully.
╭──────────────────────────────────────────────────╮
│ │
│ Storybook 6.5.14 for Vue3 started │
│ 8.73 s for manager and 1.47 s for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://192.168.0.6:6006/ │
│ │
╰──────────────────────────────────────────────────╯
15:19:38 [vite] ✨ new dependencies optimized: vue/dist/vue.esm-bundler.js
15:19:38 [vite] ✨ optimized dependencies changed. reloading
正常に終了すればブラウザが勝手に立ち上がります。
コンポーネントを作成する
src/components/Card.vueを作成して以下のように記述。
src/components/Card.vue
<template>
<div class="card">
<h4 class="title">{{ title }}</h4>
<p class="secondary-text">{{ subText }}</p>
</div>
</template>
<script>
export default {
name: "Card",
props: {
title: String,
subText: String,
},
};
</script>
<style>
.card {
background-color: #fff;
border-radius: 0.2rem;
box-shadow: rgb(150, 150, 150) 0px 1px 5px;
width: 350px;
padding: 0.8rem;
}
</style>
src/components/Card.stories.jsを作成して以下のように記述。
フォーマットはstorybookの公式ドキュメントから。
https://storybook.js.org/docs/vue/get-started/setup
src/components/Card.stories.js
// Card.stories.js
import Card from "./Card.vue";
//👇 This default export determines where your story goes in the story list
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: "Card",
component: Card,
};
//👇 We create a “template” of how args map to rendering
const Template = (args) => ({
components: { Card },
setup() {
//👇 The args will now be passed down to the template
return { args };
},
template: '<Card v-bind="args"/>',
});
export const FirstStory = Template.bind({});
// 作成したコンポーネントのPropsのサンプル値を渡す。
FirstStory.args = {
/* 👇 The args you need here will depend on your component */
title: "Primary",
subText: "Secondary",
};
すると、、、
ブラウザで確認
Propsの値はブラウザで変更できるよう。
下の方に入力欄があるので好きな値を渡すこともできる。
これは確かに便利！！
アトミックデザインとかの場合、organismsとかでいろんなコンポーネントを読み込むと思うけど、そういう時はどうなる？？って既に気になってますが、まあいい感じにできるんでしょうね！！