• <ol id="gebcs"></ol>
    <track id="gebcs"><i id="gebcs"></i></track>

    以.vue為后綴的文件 內部書寫規范

    時間:2022-06-28 11:21:29 類型:vue
    字號:    

      template 模塊

      1.標簽上不要寫多余的屬性(默認就是以 html 來解析)

    <!-- Not recommended -->
    <template></template>
    <!-- Recommended -->
    <template></template>

      2. template 里 html 標簽上的屬性書寫規則

      2.1 超過一個屬性時,屬性換行對齊;

      2.2 v-xx指令放最前,自有屬性放最后;

    <!-- Not recommended -->
    <input type="text" class="hf-input" placeholder="請輸入驗證碼" v-model="form.imageCode" />
    <!-- Recommended -->
    <input
      v-model="form.imageCode"
      type="text"
      class="hf-input"
      placeholder="請輸入驗證碼"
    />

      script 模塊

      1. import 放在最頂部,并省略掉 .js,.json 和 .vue 后綴(已在webpack的resolve.extensions中做了配置)

    <!-- Not recommended -->
    import mockData from '@/mockdata/userMock.js'
    <!-- Recommended -->
    import mockData from '@/mockdata/userMock'

      2. export 對象中屬性定義順序

      name 當前模塊名字

      components 便于查找引用了哪些組件(單個換行,以,結尾

    <!-- Recommended -->
    components: {
      norecord,
      TimePicker,
    },

      props 可接受的從父組件傳遞過來的參數列表

      props 值必須為對象;

      如果是必傳項,要設置 required:true;

      如果有默認值(最好都有默認值),要設置 default 的值;

      為 props 的每個字段添加注釋,方便后期維護

    <!-- Recommended -->
    props: {
      // 學生數量
      stuCount: Number,
      // 是否正在加載(帶有默認值)
      isLoading: {
        type: Boolean,
        default: false,
      },
      // 是否正在創建(如果是必傳項)
      isCreating: {
        type: Boolean,
        required: true,
        default: false,
      },
    },

      data 記得是一個 function,保證每個實例可以維護一份被返回對象的獨立的拷貝

      computed 計算屬性

      watch 監聽器

      filters 過濾器

      directives 指令

      mixins 混入

      methods 方法

      方法按頁面結構從上至下開始定義;

      屬于某一個功能項的盡量放在一起,并加上此功能項的起止注釋;

      頁面初始化方法寫在最后;

      公用方法寫在頁面初始化方法前,頁面其他功能項方法后;

    <!-- Recommended -->
    methods: {
        // 添加課程
        addClass() {
     
        },
        // 刪除課程
        delClass() {
     
        },
     
        /** 上傳模塊的功能 start */
        // 上傳成功
        uploadSuc() {
     
        },
        // 上傳失敗
        uploadFail() {
            
        }, 
        /** 上傳模塊的功能 end */
     
        /** 共用方法 start */
        // 轉換成樹結構
        convertToTree() {
     
        },
        // 表單校驗
        checkForm() {
     
        },
        /** 共用方法 end */
     
        // 初始化一些信息
        init() {
     
        },
    },

      created/mounted/updated 等各類生命周期函數

    <!-- Recommended -->
    methods: {
        
    },
    /** 生命周期勾子函數 start */
    beforeCreated() {
     
    },
    created() {
     
    },
    mounted() {
     
    },
    /** 生命周期勾子函數 end */

      style 模塊

      @import 寫在最前;

      樣式書寫順序與頁面結構一致;

      嵌套層級最多請不要超過3層;

      慎重考慮是否添加 scoped 屬性。


    黄片基地 <