Vue CLI 3.0 插件，用于使用 Atomic Design 和 Storybook 创建应用程序

Vue Atomic Design 插件是一款遵循原子设计方法论的 Vue CLI 3 插件。请参阅Brad Frost撰写的这篇精彩文章了解更多信息。

如何安装

首先需要安装 Vue Cli 3

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

然后你可以通过输入以下命令来添加插件

vue add atomic-design

故事书

Vue Atomic Design 使用Storybook作为其设计系统工具。Storybook 最初是为 React 创建的，它是一个用于独立创建 UI 组件的工具。使用 Storybook 的优势在于，我们可以同时创建样式指南和项目，而无需同时维护两者，这对于小型和大型应用程序都非常实用。
安装插件后，Storybook 将被配置，您可以通过运行以下命令使用它：

yarn run serve:storybook

或者生成静态样式指南：

yarn run build:storybook

结构

原子设计通过组合对组件进行分组，这种方法非常简洁，与 Vue.js 完美结合

原子设计结构总结如下。

原子

原子是原生 HTML 标签。Vue 组件仅渲染一个标签，例如div，p或其他任何标签。

// 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

按照这个结构，所有的故事都将在运行时创建。

故事书

您可以将故事模块命名为“{类别} - {组件名称}”，从而对故事书故事进行分类。例如：

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

Vuex

此插件采用模块化方式组织 Vuex 存储。应用的每个功能都被拆分成一个模块，每个模块包含各自的状态、变更、操作和 getter。例如：

-- 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 会自动完成导入。

鏂囩珷鏉ユ簮锛�https://dev.to/miladalizadeh/vue-cli-30-plugin-for-creating-apps-using-atomic-design--storybook-42dk