storybook-vuejs-sample

Preface

This sample project uses Storybook and Vue.js. It is based on vue-kitchen-sink sample.

What is Storybook?

Storybook is the library for creating UI component catalogs. It can confirm the state and behavior of components.

It can see a list of stories in the left panel. And it can see components for each story in the right panel.

Install

Perform the following steps:

Download and install Node.js.
Download and install Visual Studio Code(VS Code).
Install vetur extension for VS Code.
Clone this repository.
Download and install npm packages.
```
npm install
```

Starting Server

Perform the following steps:

Start the development server.
```
npm run storybook
```
When startup is complete, the console shows the following message:
```
info Storybook started on => http://localhost:9009/
```
Access the follwing URL in the Chrome.
http://localhost:9009

Creating a Production Build

Perform the following command:

npm run build

Project Map

The follwing figure is the map of this sample project.

- storybook_sample
  - .storybook            Contains configurations of StoryBook.
    - main.js            Define the add-on settings.
    - manager.js           Define the path of .story files.
    - preview.js          Define configurations for MDX.
  + public
  - src
    + components          Define components of Vue.js.
    + stories             Define a story of each component.
    - App.vue             Define a base view of this project.
    - index.js            Entry point.
  - .babelrc              Babel Configuration.
  - index.html
  - package.json          Define npm packages.
  - webpack.config.js     Define webpack configuration.

Components

There are the following components in this sample.

Component Name	File Name	Description
Button	`commandbutton.vue`	The component that shows a button
Input	`inputbox.vue`	The component that shows a item name and input box.
Label	`labelgroup.vue`	The component that shows a item name and data.
Message	`message.vue`	The component that shows messages.
Modal	`modal.vue`	The component that shows a modal dialog.
Navigation Bar	`navbar.vue`	The component that shows a navigation bar.
Pagenation	`paginate.vue`	The component that shows a pagenation.
Select Box	`selectbox.vue`	The component that shows a select box.

The pagination component refer to this project.

Libraries

This sample uses the following library.

Library Name	Version
Storybook for Vue	6.3.12
Addon Actions	6.3.12
Addon Controls	6.3.12
Addon Viewport	6.3.12
Addon Docs	6.3.12
semantic-ui-css	2.4.1

License

The License of this sample is MIT License.

tibdev78/storybook-vuejs-sample