ΠΠΏΠΈΡΠΈΡΠ΅ ΠΎΡΠΈΠ±ΠΊΡ
ΠΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π·Π½Π°ΡΠΎΠΊ Π΄Π»Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠ±ΠΎΡΠΊΠΈ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ±ΠΎΡΠ½ΠΈΠΊΠ° ΡΠ°ΡΡΠΊΠ°Π·ΠΎΠ². ΠΡ ΠΏΡΠΎΠ±ΠΎΠ²Π°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ 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">
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ ΡΠ°Π²ΠΈΠΊΠΎΠ½ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΌΡ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π° Π² ΠΏΠ°ΠΊΠ΅ΡΠ΅.
Π‘ΠΈΡΡΠ΅ΠΌΠ°:
ΠΠΎΡ ΠΌΠΎΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ°. Π‘Π½Π°ΡΠ°Π»Π° Π² ΡΠΊΡΠΈΠΏΡΠ°Ρ
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
. Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΡΠΏΠ°ΡΠΈΠ±ΠΎ! ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠΌ Π»ΡΠ΄ΡΠΌ π
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΠΎΡ ΠΌΠΎΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ°. Π‘Π½Π°ΡΠ°Π»Π° Π² ΡΠΊΡΠΈΠΏΡΠ°Ρ
package.json
:ΠΠ°ΡΠ΅ΠΌ Π²
.storybook/manager-head.html
( ΠΠmanager-header.html
):ΠΠ°ΡΠ΅ΠΌ Π²
public
:ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ!