基本名词与概念

为了实现和便于理解 Vue Human 的设计理念，所以在 Vue 的基础上增加了一些基本名词和概念。

Element

当你把项目写在 .vue 的文件中时，webpack 和 vue-loader 会将 .vue 文件解析成 .js 文件。

那么如果我们去深究的话，这个 js 文件返回的是什么？类似如下的一个 JS 对象。

{
  name: 'xxx',
  // ...
}

那么这个 JS 对象，我们就命名他为一个 element。

如果拿 vue 扩展这个 element，就是：

import element from 'vue-human/suites/someElement'

const Component = vue.extend(element)

形成 Component 的一个类，用于实例化新的组件，如下：

const component = new Component
// 通常 vue 的文档里喜欢将他命名为 vm，
// 但是在 vue-human 项目中，我们更爱命名为 component
// const vm = new Component

那么上面介绍的是 element，那么 Element 是什么？

import Element from 'vue-human/utils/Element'

export new Element({
  name: 'xxx'
})

在 vue-human 概念里，定义组件时，不是直接定一个基础对象 {}，而是实例化一个 Element 对象。这样我们可以方便的拓展这个 element。

如果看到 iconElement from 'vue-human/suites/icon/icon' 这样的使用就很好理解了。

Suites

Suites 又是什么概念呢？当有多个 element 的时候，我要一个个引入，很麻烦，这个时候就可以用到 Suites 的概念了。最常见的定义：

import Suites from 'vue-human/utils/Suites'
import icon from 'vue-human/suites/icon/icon'
import button from 'vue-human/suites/button/button'
// more and more

export default new Suites([
  icon,
  button
  // more and more
])

那么就可以带着这个套件一起用了

import core from 'vue-human/suites/core'

// 某一个业务里，不需要使用 Element 来定义
export default {
  componets: {
    ...core.map()
  }
}

Popup

为了实现浮层功能，定义两个和 Popup 相同命名的文件，但是两个文件的功能有些不同，容易混杂。分别是：

vue-human/suites/popup/popup.vue
vue-human/utils/Popup.js

第一个文件是 popup 浮层基础组件，控制定位和黑色覆盖层，全局化和项目级的 Popup 都可以使用。

第二个文件是控制全局化的 Popup 的基础类，仅用于全局化的 Popup。

全局化的 Popup

Message, Confirm, Alert, LoadingMask 都属于全局化的 Popup，由 utils 目录里的类文件创建和管理，可能会获得不了 this.$router，this.$stroe 这样的快捷变量。

项目级的 Popup

项目级的 Popup，由开发者定义在项目 .vue 文件中，通过 prop 传值修改。为了方便开发者快速开发，提供了辅助的 ActionSheet 和 Modal 组件。