개요

이것은 아래에 링크된 비디오 자습서에 대한 동반 문서로 빠른 개요입니다.

로그인 및 계정 생성을 위한 이벤트를 생성하는 두 개의 입력 필드가 있는 LoginForm 구성 요소에 대한 스토리를 생성합니다.

Ionic Vue 프로젝트가 Storybook과 함께 작동하도록 하기 위해 따라야 할 몇 가지 추가 단계가 있습니다. 운 좋게도 첫 번째 스토리에 대한 Storybook 프로젝트 구성을 받으면 나머지 스토리를 생성할 수 있습니다. .

갑시다

프로젝트 루트에 storybook을 설치하고 실행합니다.

npx sb@next init

npm run storybook

.storybook/preview.js에 ionic 스타일을 추가해야 프로젝트의 모든 스토리에 기본 테마와 함께 모양과 느낌이 적용됩니다.

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';

/* Theme variables */
import '../src/theme/variables.css';

스토리를 IonApp로 래핑하고 IonicVue가 앱에 삽입되도록 하려면 몇 가지 추가 설정을 수행해야 합니다.

아래에서 진행되는 것은 필요한 이온 구성 요소인 IonApp 및 IonVue를 가져온 다음 데코레이터와 함께 스토리북에서 가져온 앱 개체를 활용하는 것입니다. IonicVue가 주입된 스토리를 렌더링하고 IonicApp으로 스토리를 래핑하는 컨테이너를 생성하고 있습니다.

스토리 수준에서 이 작업을 수행할 수 있었지만 모든 스토리를 마무리해야 한다는 것을 알고 있기 때문에; 나는 프로젝트의 최상위 수준에서 그것을했다
.storybook/main.js에 변경 사항을 추가해야 합니다.

// IONIC SETUP
import {IonApp, IonicVue} from "@ionic/vue"

import { app } from '@storybook/vue3'
app.use(IonicVue)

export const decorators = [
  (story) => ({
    components: { story, IonApp },
    template: '<ion-app><story/> </ion-app>'
  })
];

이야기의 마법 중 일부는 구성 요소가 예상대로 작동하는지 확인할 수 있도록 생성된 구성 요소에서 이벤트를 가져오는 것입니다.

이 구성 요소에서 우리는 사용자가 로그인 버튼이나 계정 생성 버튼을 클릭했을 때를 알아야 합니다. 이벤트와 함께 전달되는 양식 필드의 내용도 필요합니다.

우리의 LoginForm은 두 개의 이벤트login 및 createAccount를 내보냅니다. 이벤트를 스토리북 내부에서 볼 수 있는 작업으로 변환하기 위해 "Action argType annotation "을 사용할 수 있습니다. 기본적으로 인수를 스토리북 콘솔에 표시할 수 있는 작업으로 바꿉니다.

    argTypes: {
      onLogin: { action: "onLogin" },
      onCreateAccount: { action: "onCreateAccount" },
  }

스토리의 모든 인수는 스토리북 컨테이너의 구성 요소에 바인딩됩니다.

<div class='ion-padding'><login-form v-bind='{...args}'/></div>

See the documentation https://storybook.js.org/docs/vue/essentials/actions#action-argtype-annotation

마지막 이야기src/stories/IonicTest.stories.js

// import the component for use in story
import LoginForm from "../LoginForm.vue";

// set up the story container
export default {
  title: "Example/LoginForm",
  component: LoginForm,
    argTypes: {
      onLogin: { action: "onLogin" },
      onCreateAccount: { action: "onCreateAccount" },
  },
};

// create the base template
const Template = (args) => ({
  components: { LoginForm },
  setup() {
    return { args };
  },
  // Then, those values can be accessed directly in the template
  template: "<div class='ion-padding'><login-form v-bind='{...args}'/></div>",
});

export const Basic = Template.bind({})

LoginForm.vue에 대한 최종 코드

<template>
  <div>
    <h2>
      LOGIN FORM
    </h2>
    <p>
      <ion-item>
        <ion-input type="text" v-model="credentials.email" />
      </ion-item>
      <ion-item>
        <ion-input
          type="password"
          v-model="credentials.password"
          autocomplete="new-password"
        />
      </ion-item>
      <ion-button @click="handleLogin">LOGIN</ion-button>
      <ion-button @click="handleCreateAccount">CREATE ACCOUNT</ion-button>
    </p>
  </div>
</template>

<script lang="ts">
import { IonButton, IonInput, IonItem } from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "LoginForm",
  emits: ["login", "createAccount"],
  setup(props, { emit }) {
    const credentials = ref<any>({
      email: "",
      password: ""
    });

    return {
      credentials,
      handleLogin: () => emit("login", { ...credentials.value }),
      handleCreateAccount: () => emit("createAccount", { ...credentials.value })
    };
  },
  components: {
    IonButton,
    IonInput,
    IonItem
  }
});
</script>

<style lang="scss" scoped>
</style>

Home.vue가 포함된 LoginForm 컴포넌트의 최종 코드입니다.

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true" class="ion-padding">
      <login-form @createAccount="doCreateAccount" @login="doLogin" />
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar
} from "@ionic/vue";
import { defineComponent } from "vue";
import LoginForm from "./LoginForm.vue";

export default defineComponent({
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    LoginForm
  },
  setup() {
    return {
      doLogin: (params: any) => {
        console.log("doLogin", params);
      },
      doCreateAccount: (params: any) => {
        console.log("doCreateAccount", params);
      }
    };
  }
});
</script>

<style scoped>
</style>

동영상

소스 코드

아론크사운더스 / ionic-vue3-storybook-1

ionic-vue3-storybook-1

비디오 - https://youtu.be/AMzanfFB0BM
Ionic 및 VueJS와 함께 Storybook을 사용하는 방법
#ionic#vuejs #스토리북
vuejs 스토리북 및 ionic 프레임워크 구성을 위한 소개 영상입니다.
로그인 및 계정 생성을 위한 이벤트를 내보내는 두 개의 입력 필드가 있는 LoginForm 구성 요소에 대한 스토리를 생성합니다.

💥 링크

스토리북 - https://storybook.js.org/docs/vue/get-started/introduction

이온 뷰 - https://ionicframework.com/docs/vue/overview

비디오 - https://youtu.be/AMzanfFB0BM

💥 추가 콘텐츠

🎓 Udemy 과정 - https://www.udemy.com/user/aaronsaunders/

🎓 검로드 코스/콘텐츠 - https://www.gumroad.com/fiwic

💥 소셜 미디어

트위터 -

페이스북 - https://www.facebook.com/ClearlyInnovativeInc

인스타그램 -

데브투 -

🌐 www.fiwic.com

View on GitHub