Atomic Design & Storybook을 사용하여 앱을 만들기 위한 Vue CLI 3.0 플러그인

Vue Atomic Design Plugin Atomic Design 방법론을 따르는 독자적인 Vue CLI 3 플러그인입니다. 자세한 내용은 Brad Frost의 이fantastic article written를 참조하십시오.

관련 프로젝트:

vue-cli-plugin-atomic-design-component - Atomic Design 기반 Vue 구성 요소 라이브러리

vue-cli-plugin-scss-base - Vue 프로젝트를 위한 스타터 SCSS 기반

설치하는 방법

먼저 Vue Cli 3를 설치해야 합니다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

그런 다음 다음 명령을 입력하여 플러그인을 추가할 수 있습니다.

vue add atomic-design

동화책

Vue Atomic Design은 Storybook을 디자인 시스템 도구로 사용합니다. 원래 React용으로 제작된 Storybook은 UI 구성 요소를 분리하여 생성하기 위한 도구입니다. Storybook을 사용하는 장점은 스타일 가이드와 프로젝트를 동시에 유지 관리하지 않고도 만들 수 있다는 것입니다. 이는 소규모 및 대규모 응용 프로그램 모두에 좋습니다.
플러그인을 설치하면 스토리북이 구성되고 다음을 실행하여 사용할 수 있습니다.
yarn run serve:storybook
또는 정적 스타일 가이드 생성:
yarn run build:storybook

구조

Atomic 디자인은 Vue.js와의 훌륭한 조합인 구성을 통해 구성 요소를 그룹화하는 매우 깨끗한 접근 방식을 가지고 있습니다.

Atomic Design 구조를 요약하면 다음과 같다.

원자

원자는 기본 html 태그입니다. div , p 또는 기타와 같은 하나의 태그만 렌더링하는 Vue 구성 요소.

// atoms/Button.vue

<template>
  <button class="a-button" @click="$emit('click')">
    <slot></slot>
  </button>
</template>

// atoms/Input.vue

<template>
  <input class="a-input" type="text" v-model="value" @input="$emit('input') />
</template>

분자

분자는 두 개 또는 여러 개의 원자의 조합입니다.

// molecules/SearchForm.vue

<template>
  <form class="m-search-form">
    <Input @input="handleInput"/>
    <Button @click="handleSearch">Search</Button>
  </form>
</template>

유기체

유기체는 원자, 분자 및 기타 유기체의 조합입니다.

// organsims/Header.vue

<template>
  <header class="o-header">
    <Logo />
    <Navigation />
    <SearchForm />
  </header>
</template>

템플릿

유기체, 분자 및 원자의 조합으로 완전한 페이지를 형성합니다. 템플릿에는 더미 자리 표시자 콘텐츠만 있습니다.

// templates/PageTemplate.vue

<template>
  <div class="o-page-template">
    <Hero />
    <Posts />
    <Comments />
  </div>
</template>

페이지

페이지는 본질적으로 실제 대표 콘텐츠가 있는 템플릿의 인스턴스입니다. 이것은 일반적으로 Vuex가 템플릿에 연결하는 지점입니다. 이 접근 방식의 이점은 데이터와 UI를 분리하는 것이며 데이터의 실제 출처에 관계없이 UI를 만들 수 있습니다. 이것은 또한 테스트를 훨씬 쉽게 만듭니다.

// pages/PostPage.vue

<template>
  <PageTemplate
    :posts="posts"
    :hero="hero"
    :comments="comments"
  />
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    mapState({
      posts: state => state.posts.postList,
      hero: state => state.home.hero,
      comments: state => state.comments.commentList,
    })
  }
}
</script>

폴더 구조

구성을 단순화하기 위해 각 구성 요소에는 3개의 파일이 있는 이름의 폴더가 있습니다. index.vue , index.stories.js 및 index.test.js . 이 구조를 사용하면 모든 테스트, 스토리 및 구성 요소가 혼란 없이 같은 위치에 있게 됩니다. 예를 들어:

-- components
   -- atoms
      -- Button
         -- index.vue
         -- index.stories.js
         -- index.test.js
      -- Input
         -- index.vue
         -- index.stories.js
         -- index.test.js
   -- molecules
      -- SearchInput
         -- index.vue
         -- index.stories.js
         -- index.test.js

이 구조를 따르면 모든 스토리가 런타임에 생성됩니다.

동화책

스토리 모듈의 이름을 '{Category} - {Component Name}'으로 지정하여 스토리북 스토리를 분류할 수 있습니까? 예를 들어:

storiesOf('Atom - Button', module)
  .add('default', () => ({
    components: { Button },
    template: `
      <Button />
    `
  }));

뷰엑스

이 플러그인은 Vuex 스토어 구성에 modular 접근 방식을 취합니다. 앱의 각 기능은 자체 상태, 변형, 작업 및 게터를 포함하는 모듈로 분리됩니다. 예를 들어:

-- storeModules
   -- Posts
     -- index.js
   -- Users
     -- index.js
   -- Users
     -- index.js

예를 들어 storeModules/users/index.js에는 다음이 포함됩니다.

const state = {
  userList: [],
  currentUser: null
}

const mutations = {
  setUsers (state, payload) {
    state.userList = payload
  },

  setCurrentUsers (state, payload) {
    state.currentUser = payload
  }
}

const actions = {
  async getUsers ({ commit }, username) {
    let response = await fetch(`//api.github.com/users`)
    let users = await response.json()
    commit('setUsers', users)
  }
}

export default {
  state,
  mutations,
  actions
}

그런 다음 앱에서 다음과 같이 이 모듈을 참조할 수 있습니다.

<template>
  <div>
    {{ $store.state.users.userList }}
  </div>
</template>

<script>
  created() {
     $store.dispatch('users/getUsers');
  }
<script>

storeModule 폴더 아래에 폴더를 생성하기만 하면 되며 폴더 이름은 네임스페이스로 사용됩니다. Webpack에서 자동으로 수행되기 때문에 이러한 모듈을 스토어로 수동으로 가져올 필요가 없습니다.