---

title: vue组件开发模板
date: 2016-11-21

• 开发模板
• 规范

---

本文介绍vue组件开发的模板，在使用vue技术开发的项目中采用此模板进行组件开发。

vue基础组件开发要求

目标：1、可移植；2、快速安装

vue业务组件开发模板

<template>
  <!-- 功能描述 -->
  <div class="your class">
      // 组件代码
      <my-compnent1 :props1></my-compnent1>
      <my-compnent2 :props2></my-compnent2>
      <!--  @slot 描述 -->
      <slot name="title"></slot>
      <!--  /描述 -->
      <!--  带权限的button以及国际化示例，通用组件不需要国际化 -->
      <addButton :class="{ disabled: !hasPermission.add }">{{$t(i18nSource.btnText)}}</addButton>
      <!--  /带权限的button以及国际化示例，通用组件不需要国际化  -->
  </div>
  <!-- /功能描述 -->
</template>
<script>
  /**
   * @fileOverview 模块描述
   * @author 姓名
   * @date 时间（yyyy.MM.dd HH:mm:ss）
   */

  import 模块 from '文件路径';

  export default{
    components:{

    },
    props: {
    /**
     * @props attribute1 {类型} 属性说明，包括取值范围以及要求
     * @default 默认值
     * @required
     */
       attribute1: {    // 属性
        type: 类型,
        default: 默认值
      },
    /**
     * @props attribute2 {类型} 属性说明，包括取值范围以及要求
     * @default 默认值
     */
      attribute2: {    // 属性
        validator (value) {
          // 验证，通用的验证方法应放在验证工具validator.js中
        },
        default(){
          return 默认值
        }
      },
    /**
     * @props i18nSource {Object} 需要国际化的路径对象
     * @default {btnText: ''}
     */
      i18nSource: {
       validator (value) {
         // 验证为对象
       },
       default(){
          return {btnText: ''}
        }
      }
    },
    data () {
      return {
        /**
         * @eventOn 监听的事件
         * @event {on-previous} 事件的描述，如获取上一页信息
         * @event {on-next}  事件的描述，如获取下一页信息
         */
        eventOn:{
          'on-previous':'on-previous', 
          'on-next':'on-next'
        },
        /**
         * @eventEmit  发布的事件
         * @event {on-getData}  {@return {类型} 事件的返回值说明} 
         */
        eventEmit:{
          'on-getData':'on-getData'
        }
      }
    },
    computed: {
      /**
       * 说明
       * @return {Number} 返回值
       */
      computedAtrribute: function () {
        return // 返回值
      },
      /**
       * 权限
       * @return {Object} 返回所有权限的对象
       */
      hasPermission(){
         let permissions = {
            add: false
         }
         permissions.add = this.$store.state.permissions.indexOf(your module permission code)  < 0 ? false : true
         return permissions
      }
    },
    /**
     * 生命周期钩子
     * 描述干了什么
     */
    beforeCreate created beforeMount mounted etc.,
    methods: {
      /**
       * 说明
       * @param {Number} arg1 描述
       * @param {Array} arg2 描述，如果array有类型限制在描述中说明
       * @param {String | Number} arg3 描述
       * @return {Number} 返回值
       */
      methodName: function (arg1, arg2, arg3) {
        // 代码
        return // 返回值
      }
   },
   ready () {
       // 代码
    },
    watch: function() {
      // 代码
    }
 }
</script>

开发工具中设置

如图打开WebStorm依次选择File，Settings，Editor，File and Code Templates，在右侧新加一种文件类型，并在空白处将模板复制进去。

webS设置文件初始模板