Intro to Storybook
  • Commencer
  • Un simple composant
  • Composant composite
  • Les données
  • Ecrans
  • Déployer
  • Les tests
  • Modules complémentaires
  • Conclusion
  • Contribuer
Framework:
ReactReact NativeVueAngularSvelteEmber

Tutoriel Storybook pour Vue

Configurer Vue Storybook dans votre environnement de développement
Cette traduction de la communauté n'a pas encore été mise à jour avec la dernière version de Storybook. Aidez-nous à la mettre à jour en appliquant les modifications du guide français pour cette traduction. Les pull requests sont les bienvenues.

Storybook fonctionne avec votre application en mode développement. Il vous aide à créer des composants graphiques isolés de la logique métier et du contexte de votre application. Cette édition de Learn Storybook est pour Vue. D'autres éditions existent pour React, React Native, Angular et Svelte.

Storybook et votre application

Configurer Storybook pour Vue

Nous allons suivre quelques étapes pour configurer votre environnement. Pour commencer, nous allons utiliser le Vue CLI pour créer notre application et activer Storybook ainsi que les tests avec Jest. Exécutons les commandes suivantes :

# Création de notre application, utilisant une configuration utilisant jest :
npx -p @vue/cli vue create taskbox --preset chromaui/vue-preset-learnstorybook

cd taskbox

# Ajout de Storybook:
npx -p @storybook/cli sb init
Tout au long de cette version du tutoriel, nous allons utiliser yarn pour exécuter la majorité de nos commandes.

Si vous avez Yarn d'installé, mais préférez utiliser npm, pas de panique, vous pouvez suivre tout de même le tutoriel sans aucun problème. Ajoutez simplement cette option --packageManager=npm à la première commande ci-dessus et Vue CLI et Storybook seront initialisés en fonction. De plus, pendant que vous progressez dans le tutoriel, n'oubliez pas d'ajuster les commandes avec l'équivalent npm.

Nous pouvons rapidement vérifier que les différentes parties de votre application fonctionnent correctement :

# Exécutez les tests (Jest) dans un terminal :
yarn test:unit

# Exécutez le composant d'exploration sur le port 6006 :
yarn storybook

# Exécutez l'application sur le port 8080 :
yarn serve

Nos trois modalités de notre application : tests automatisés (Jest), le composant de développement (Storybook) et l'application elle-même.

3 modalités

En fonction de la partie de l'application sur laquelle vous travaillez, vous souhaiterez peut-être exécuter une ou plusieurs d'entre elles simultanément. Étant donné que notre objectif actuel est de créer un seul composant d'interface utilisateur, nous allons continuer d'exécuter Storybook.

Réutiliser CSS

Taskbox réutilise les éléments de conception du tutoriel de GraphQL et de React application exemple, nous n'aurons donc pas besoin d'écrire du CSS dans ce tutoriel. Copiez et collez ce CSS compilé dans src/index.css puis importez le dans l'application en modifiant la balise <style> dans le fichier src/App.vue pour qu'elle ressemble à ceci :

<style>
  @import './index.css';
</style>

Taskbox UI

Si vous voulez modifier le style, les fichiers sont fournis dans le projet GitHub.

Ajoutez des ressources

Pour correspondre à la conception souhaitée, vous devrez télécharger les répertoires de polices et d'icônes et placer son contenu dans votre dossier src/assets.

Nous avons utilisé svn (Subversion) pour télécharger facilement des fichiers d'un répertoire à partir de GitHub. Si vous n'avez pas subversion d'installé ou si vous voulez le faire manuellement, vous pouvez récupérer les fichiers directement ici.

svn export https://github.com/chromaui/learnstorybook-code/branches/master/src/assets/icon src/assets/icon
svn export https://github.com/chromaui/learnstorybook-code/branches/master/src/assets/font src/assets/font

Nous devons également mettre à jour nos scripts Storybook pour pointer vers le répertoire public (dans le fichier package.json):

{
  "scripts": {
    "storybook": "start-storybook -p 6006 -s public"
  }
}

Après avoir ajouté le style et les ressources, le rendu de l'application sera un peu étrange. C'est normal. Nous ne travaillons pas sur l'application pour le moment. Nous commençons par construire notre premier composant !

Keep your code in sync with this chapter. View b218a07 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Un simple composant
Construire un simple composant en isolation
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify