在Nuxt.js中使用Storybook管理组件

[yuxino]

Nuxt和Storybook的安装

这个这里不做介绍，请自己安装。

Nuxt.js是做什么的

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

Nuxt.js 是一个Vue的服务端渲染应用框架。

StoryBook是做什么的 ?

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

Storybook是一个UI组件的开发环境。允许你去浏览组件库，观察组件的不同状态，并可以以交互方式开发和测试组件。

准备拿Storybook做什么 ?

我们准备拿Storybook来管理公司内部的公用组件，避免重复造轮子。减少劳动力，提升开发效率。

我们期待的样子是怎样的 ?

这里有一份别人的DEMO。这个Demo里面添加了很多Addon。Addon就是面板上的功能。就是你能看见的STORY,ACTION LOGGER,NOTES等等功能。他这里比较多，但是我只要一部分。

我想要哪一些ADDON ?

我们家的项目只需要下面的。

• 用来查看源代码的 STORY
• 用来查看触发什么事件的 ACTION LOGGER
• 用来查看各种设备上的样子的 VIEWPORT
• 用来作为提示的 NOTES

直接安装到开发依赖就好了。

yarn add @storybook/addon-actions -D
yarn add @storybook/addon-links -D
yarn add @storybook/addon-notes -D
yarn add @storybook/addon-storysource -D

你想了解更多的Addon。

公司Nuxt.js项目结构

公司项目结构大概如下。已经精简掉了不需要的部分。把components拆分成了baseComponents和businessComponents。分表代表公用组件和业务组件(或者一些只有该页面会用到的组件，但是过于庞大拆分了出来)。

├── .storybook
├── assets
├── baseComponents
├── businessComponents
├── layouts
├── pages
├── middleware
├── nuxt.config.js
├── pages

一般的的Vue项目可能会类似于这样。在page下面丢components代表业务组件。但是由于Nuxt.js的特殊性。丢在page下面的文件和文件夹都会变成路由。所以不能这么做，取而代之的用了上面的做法。

├── .storybook
├── assets
├── components
├── layouts
├── pages
├────pageA
├──────components
├────────componentsA.vue
├──────index.vue
├── middleware
├── nuxt.config.js
├── pages

因为改成了这样子所以要修改配置文件nuxt.config.js。在扩展方法(extend)里面加上这一段。方便我们在项目中使用别名。

Object.assign(config.resolve.alias, {
  baseComponents: path.resolve(__dirname, 'baseComponents'),
  businessComponents: path.resolve(__dirname, 'businessComponents')
})

配置Storybook

创建.storybook文件夹。添加下面的配置文件就好了。

webpack.config.js

const path = require("path");
const rootPath = path.resolve(__dirname, "../");

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.resolve.alias["@"] = rootPath;
  defaultConfig.resolve.alias["~"] = rootPath;
  defaultConfig.resolve.alias["assets"] = `${rootPath}/assets`;
  // 同样是设置别名
  defaultConfig.resolve.alias["baseComponents"] = `${rootPath}/baseComponents`;
  defaultConfig.resolve.alias["businessComponents"] = `${rootPath}/businessComponents`;
  // addon-storysource需要添加额外的配置
  // 因为有引用SASS所以这里添加了Loader
  defaultConfig.module.rules.push(
    {
      test: /_story\.js$/,
      loaders: [require.resolve("@storybook/addon-storysource/loader")],
      enforce: "pre"
    },
    {
      test: /\.scss$/,
      use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
      ]
    }
  );
  return defaultConfig;
};

config.js

NuxtLink是nuxt的组件因为某些组件用到了，所以这里全局注册一下，同样这里还用了ElmentUI。看项目视情况删除就好了。这里我最后一个Function是加载文件的。意思是匹配baseComponents下面叫做_story.js的文件作为storybook的例子。

import { configure } from '@storybook/vue'

import Vue from 'vue'
import Vuex from 'vuex' // Vue plugins
import Element from 'element-ui'
import '../node_modules/element-ui/lib/theme-chalk/index.css'
import '~/assets/styles/index.scss'
import NuxtLink from 'nuxt/lib/app/components/nuxt-link';

// Install Vue plugins.
Vue.use(Vuex)
Vue.use(Element)
Vue.component('nuxt-link', NuxtLink);

// 加载所有指定文件
function requireAll(requireContext) {
  return requireContext.keys().map(requireContext)
}

// 加载指定的文件
function loadStories() {
  requireAll(require.context("../baseComponents", true, /_story\.js$/))
}

configure(loadStories, module)

addons.js

注册addons

import '@storybook/addon-storysource/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-notes/register';

全部引进来就好啦。

_story.template

这是一个可选的文件。我拿来复制粘贴用的模板文件。

import { storiesOf } from '@storybook/vue';

import Component from './';

const BasicExample = `
  <component>
    ...
  </baseComponents>
`

storiesOf('Component', module)
  .add('basic example', () => ({
    components: { Component },
    template: BasicExample
  }))

baseComponents目录结构

呀至于怎么玩看你们团队。这个只是参考目录。

├── baseComponents
├────componentA
|──────_story.js
|──────componentA.vue
|──────index.js

Script加上启动命令

往package.json的scripts加上这个。端口可以自己定。这里是9001, 我最喜欢的数字，才怪，乱打的。

"storybook": "start-storybook -p 9001 -c .storybook"

最后

终端启动。

yarn storybook

然后 Enjoy it .