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 à le mettre à jour en appliquant les modifications du guide français pour cette traduction. Pull requests sont bienvenus.

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 !

Next Chapter
Un simple composant
Construire un simple composant en isolation