vue 文件的命名和使用

vue 文件

import Element from 'vue-human/util/Element'
import loadingIcon from 'vue-human/components/loading-icon/loading-icon'
import buttonSuit from 'vue-human/components/button'

export default {
  components: {
    ...loadingIcon.inject(),  // 加载 element 对象
    ...buttonSuit.map()   // 加载 suit 对象
  }
}

1. loadingIcon 是一个实例化的对象，所以 l 的命名是小写的；
2. .inject() 方法将会放回一个具名对象，用于 components 的自动加载。

名称规范

// maskElement     - 被 vue 文件定义的配置对象
// MaskComponent   - vue.extend 扩展后组件类
// maskComponent   - MaskComponent 被实例化后的对象
const MaskComponent = vue.extend(maskElement)
const maskComponent = new MaskComponent()

如果数据是异步加载的

• 当 someItems 为 undefined，应该为 loading 状态；
• 当 someItems.length === 0，应该提示用户没有相关的数据；
• 当 someItems.length > 0，则显示数据列表。

import { updateItems } from '../../axios/items'

export default {
  data () {
    return {
      someItems: undefined // 如果数据未加载，则定义为 undefined，并且添加相关的滚动条处理
    }
  },
  methods: {
    updateItems () {
      updateItems().then(response => someItems = response.data)
    }
  }
}