00. Vue Storybook

00. Vue Storybook

곰식 홈페이지

1. Vue CLI 설치하기

npm i -g @vue/cli

vue create {디렉토리명}

2. vue storybook 설치하기

npx sb init

3. 생성되는 파일들

.storybook/main.js

module.exports = { "stories": [ "../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", "@storybook/addon-essentials" ] }

.storybook/preview.js

export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, }

package.json

{ "name": "vue-storybook", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" }, "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11" }, "devDependencies": { "@babel/core": "^7.13.14", "@storybook/addon-actions": "^6.2.1", "@storybook/addon-essentials": "^6.2.1", "@storybook/addon-links": "^6.2.1", "@storybook/vue": "^6.2.1", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "babel-eslint": "^10.1.0", "babel-loader": "^8.2.2", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "vue-loader": "^15.9.6", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

4. 실행

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" },

npm run storybook

vue story book 실행모습

from http://theheydaze.tistory.com/399 by ccl(A) rewrite - 2021-04-01 21:26:50