vuejs规范的代码组织顺序 or eslint plugin:vue/recommended

[lanlin]

说明

根据 vue.js 风格指南中 优先级C 推荐的书写顺序整理而来。

用于快速创建组件, 各项属性备忘, 快速查阅顺序要求。

中文文档

eslint plugin:vue/recommended

组件代码 （VueDemo.vue）

<template>
<div>
  <TestDemo
    :is=""
    v-for=""
    v-if=""
    v-else-if=""
    v-else=""

    v-show=""
    v-cloak=""
    v-pre=""
    v-once=""

    id=""
    ref=""
    key=""
    slot=""

    v-model=""
    v-on=""
    v-html=""
    v-text=""
  >
    {{ test }}
  </TestDemo>
</div>
</template>

<script type="text/babel">
import { mapGetters, mapActions } from 'vuex';

/**
 * ----------------------------------------------------------------------------------
 *  VueDemo Component
 * ----------------------------------------------------------------------------------
 *
 * @author lanlin
 * @change 2018/12/07
 */
export default {
  el: null,
  name: 'VueDemo',
  parent: null,
  functional: false,
  delimiters: ['${', '}'],

  comments: false,
  components: {},
  directives: {},
  filters: {},

  extends: null,
  mixins: [],
  inheritAttrs: true,

  model: {
    prop: 'checked',
    event: 'change',
  },

  props: {
    // 将 value 属性用作其他目的
    value: {
      type: String,
      default: null,
    },

    // 用 checked 替代 value 的位置
    checked: {
      type: Number,
      default: 0,
    },

    age: {
      type: Number,
      default: 0,
      required: true,
      validator(value) { return value >= 0; },
    },
  },

  propsData: {},

  data() {
    return {
      test: '',
    };
  },

  computed: {
    ...mapGetters([
      // ...
    ]),

    // 仅读取
    aDouble() { return this.a * 2; },

    // 读取和设置
    aPlus: {
      get() { return this.a + 1; },
      set(v) { this.a = v - 1; },
    },
  },

  watch: {},

  beforeCreate() {},
  created() {},

  beforeMount() {},
  mounted() {},

  beforeUpdate() {},
  updated() {},

  activated() {},
  deactivated() {},

  beforeDestroy() {},
  destroyed() {},

  methods: {

    // ------------------------------------------------------------------------------

    // map action methods
    ...mapActions([
      // ...
    ]),

    // ------------------------------------------------------------------------------

    testing() {
      // ...
    },

    // ------------------------------------------------------------------------------

  },

  template: '',

  render(h) {
    return h(
      // ...
    );
  },

  renderError(h, err) {
    return h('pre', { style: { color: 'red' } }, err.stack);
  },
};
</script>

<style lang="less">
@import '~src/assets/style/component.less';
</style>