Storybook: Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„Π°Π²ΠΈΠΊΠΎΠ½?

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 18 ΠΌΠ°Ρ€. 2019  Β·  2ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: storybookjs/storybook

ΠžΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΎΡˆΠΈΠ±ΠΊΡƒ

ΠœΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ для статичСской сборки ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ сборника рассказов. ΠœΡ‹ ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ HtmlWebpackPlugin, установив Π·Π½Π°Ρ‡ΠΎΠΊ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ URL-адрСсами Π² preview-header.html ΠΈ manager-header.html , ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π² 'favicon.ico' Π² config.js ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

import {
  configure,
  addParameters,
  addDecorator
} from '@storybook/vue'
import {
  Vue
} from 'vue-property-decorator'
import {
  Centered
} from './components/centered'
import {
  Installer
} from '../src/Installer'
import {
  withKnobs
} from '@storybook/addon-knobs'
import '../src/assets/variables.css'
import '../src/assets/theme.css'
import '../src/assets/base.css'
import '../src/sass/main.scss'
import {
  withInfo
} from 'storybook-addon-vue-info'
// We import the favicon here
import './favicon.ico'

Vue.component('Centered', Centered)

const installer = new Installer(Vue)
installer.install(true)

addParameters({
  options: {
    sortStoriesByKind: true
  }
})

const stories = require.context('../src', true, /.stories.ts$/)

function loadStories() {
  stories.keys().forEach(filename => stories(filename))
}

addDecorator(withKnobs)
addDecorator(withInfo)

configure(loadStories, module)

И preview-header.html (или manager-header.html ):

<link rel="shortcut icon" href="./favicon.ico">

ΠœΡ‹ Ρ‚ΠΎΠΆΠ΅ ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π»ΠΈ эти ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Ρ‹:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

И

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρ„Π°Π²ΠΈΠΊΠΎΠ½ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΌΡ‹ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ Ρ„Π°Π²ΠΈΠΊΠΎΠ½Π° Π² ΠΏΠ°ΠΊΠ΅Ρ‚Π΅.

БистСма:

  • ОБ: MacOS
  • Устройство: Macbook Pro 2019
  • Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€: ВсС
  • Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ: Vue
  • ВСрсия: 5.0.3
question / support ui

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’ΠΎΡ‚ моя установка. Π‘Π½Π°Ρ‡Π°Π»Π° Π² скриптах package.json :

"storybook": "start-storybook -p 9009 -s public"

Π—Π°Ρ‚Π΅ΠΌ Π² .storybook/manager-head.html ( НЕ manager-header.html ):

<link rel="shortcut icon" href="/storybook.ico">
<link rel="icon" type="image/png" href="/storybook.png" sizes="192x192">

Π—Π°Ρ‚Π΅ΠΌ Π² public :

$ ls public/
storybook.ico   storybook.png

НадСюсь, это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚!

ВсС 2 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’ΠΎΡ‚ моя установка. Π‘Π½Π°Ρ‡Π°Π»Π° Π² скриптах package.json :

"storybook": "start-storybook -p 9009 -s public"

Π—Π°Ρ‚Π΅ΠΌ Π² .storybook/manager-head.html ( НЕ manager-header.html ):

<link rel="shortcut icon" href="/storybook.ico">
<link rel="icon" type="image/png" href="/storybook.png" sizes="192x192">

Π—Π°Ρ‚Π΅ΠΌ Π² public :

$ ls public/
storybook.ico   storybook.png

НадСюсь, это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚!

ΠŸΠ»ΠΎΡ…ΠΎ, я ΠΈΠΌΠ΅Π» Π²Π²ΠΈΠ΄Ρƒ .storybook/manager-head.html . Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, спасибо! Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ этого Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ людям πŸ™‚

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ

Π‘ΠΌΠ΅ΠΆΠ½Ρ‹Π΅ вопросы

Gongreg picture Gongreg  Β·  58ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

43081j picture 43081j  Β·  61ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

p3k picture p3k  Β·  61ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

Olian04 picture Olian04  Β·  78ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

dependencies[bot] picture dependencies[bot]  Β·  142ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ