storybook vue学习笔记

1、使用背景

StoryBook 的应用场景是你已经有个 Vue 项目，你想要对项目中的组件做一个交互性的展示。所以如何你一开始就拿个空项目自动安装是无法运行的，会提示你装 Vue 等等依赖。

2、安装方式

分为自动安装和手动安装

（1）自动安装

安装vue-cli3
npm install -g @vue/cli
创建项目

vue create storybook-test

安装storybook，并初始化

cd storybook-test
npx -p @storybook/cli sb init --type vue

（2）手动安装

1、veu-cli创建一个vue项目

vue create storybook-test
npm i
npm run serve

2、安装依赖（增加与@storybook相关的依赖）


# 安装storybook
npm install @storybook/vue --save-dev
#OR
npm install @storybook/vue -S# 安装vue 以及需要的loader
npm install vue --save
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev

3、在package.json 添加启动项

{"scripts": {"storybook": "start-storybook"}}

4、创建storybook的配置文件

增加个.storybook目录，并增加config.js，内容如下

import { configure } from '@storybook/vue';configure(require.context('../src', true, /\.stories\.js$/), module);

在src下面添加stories目录以及App.stories.js，内容如下

import App from '../App.vue'
export default {title: 'App',
};
export const toStorybook = () => ({components: { App },template: '<App />',});toStorybook.story = {name: 'app',};

最后运行项目

npm run stroybook

效果如下

storybook/vue学习笔记相关推荐

菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...
vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...

storybook/vue学习笔记