vue怎么實現一個單獨的組件注釋

這篇文章主要介紹“vue怎么實現一個單獨的組件注釋”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue怎么實現一個單獨的組件注釋”文章能幫助大家解決問題。

一個單獨的組件注釋

寫了一個組件 加了一些注釋

效果圖如下

分頁一類的功能都已經寫好了 下面就上代碼，不知道有幾個老哥能看的懂，有不足之處，還望老哥們指正

/**
 * 活動菜單 活動列表
 * 注釋菜單
 * 最后修改 2020/8/8 10:25
 * HTML組成：上中下結構      上為導航      中為展示列表    下為分頁表
 * JS： 
 *   loadActSize 用于載入獲取到一共有多少個活動的API接口 方法為Get
 *   loadActByPage 用于載入獲取單頁的活動
 *   cancelAct 用于撤銷刪除活動
 *   editAct  用于編輯改變活動（在這里封裝后用于將活動的in_banner）屬性轉變為true 從而添加至輪播圖
 *   Pagination 為組件中的分頁組件 （element-UI）
 *   data屬性：
 *     formInline 用于儲存分頁的頁數內容
 *     addToBannerI 用于儲存添加至輪播圖的內容
 *     dialogFormVisible 用于控制撤銷原因填寫框是否出現
 *     form 儲存撤銷原因和活動ID
 *     listData 用于儲存列表中的數據
 *     pageparm 分頁參數
 *   method：
 *     created 創建時調用getdata方法獲取數據
 *     addToBanner 將活動添加到輪播圖
 *     getdata 調用獲取到一頁的輪播圖列表
 *     callFather 更新分頁參數
 *     deleteActivity 撤銷活動
 *     jump 跳轉到新的頁面
 * CSS:
 *    user-search 搜索欄的屬性 
 */
<template>
  <div>
    <!-- 面包屑導航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
      <el-breadcrumb-item>活動列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索篩選 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.deptName" placeholder="輸入活動名稱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加載中" >
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="序號" width="110">
      </el-table-column>
      <el-table-column sortable prop="image" label="圖片" width="100">
        <template slot-scope="scope">
          <el-image :src="scope.row.image"></el-image>
        </template>
      </el-table-column>
      <el-table-column sortable prop="name" label="發起者昵稱" width="200">
      </el-table-column>
      <el-table-column sortable prop="originator_id" label="發起者id" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="jump(scope.row.id)">查看</el-button>
          <el-button size="mini" type="warning" @click="addToBanner(scope.row)">添加至輪播圖</el-button>
          <el-button size="mini" type="danger" @click="dialogFormVisible = true">撤銷</el-button>
          <el-dialog title="收貨地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="刪除原因" :label-width="formLabelWidth">
                <el-input v-model="form.reason" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteActivity(scope.$index,scope.row)">確 定</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分頁組件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
import {loadActSize,loadActByPage,cancelAct,editAct} from "../../api/basisMG"
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      formInline: {
        page: 1,
        limit: 10,
        size:10,
      },
      addToBannerI:{
        actID:'',
        activity:{
          in_banner:true
        },
        image:{}
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
          actID:1,
          reason: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
      // 刪除
      userparm: [], //搜索權限
      listData: [], //用戶數據
      // 分頁參數
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 11
      }
    }
  },
  // 注冊組件
  components: {
    Pagination
  },
  /**
   * 數據發生改變
   */
  /**
   * 創建完畢
   */
  created() {
    this.getdata(this.formInline)
  },
  /**
   * 里面的方法只有被調用才會執行
   */
  methods: {
    //添加至輪播圖
    addToBanner(act){
      console.log(act)
      this.addToBannerI.actID=act.id
      console.log(this.addToBannerI)
      editAct(this.addToBannerI)
      .then(res=>{
        console.log(res)
      })
    },
    // 獲取公司列表
    getdata(parameter) {
      
      this.loading = true
      /***
       * 調用接口，注釋上面模擬數據 取消下面注釋
       */
      loadActSize(parameter).then(res=>{
        console.log(res);
        this.pageparm.total = res.data
        loadActByPage(parameter)
        .then(res => {
          console.log(res);
          this.loading = false
          this.listData = res.data
          // 分頁賦值
          this.pageparm.currentPage = this.formInline.page
          this.pageparm.pageSize = this.formInline.limit
        
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜單加載失敗，請稍后再試！')
        })
      })  
      
    },
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //刪除活動
    deleteActivity(index,row){
      this.dialogFormVisible = false
      this.$confirm('是否確認刪除該活動','提示',{
        confirmButtonText:'確定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() =>{
        console.log(index);
        console.log(this.listData)
        this.form.actID = this.listData[index].id
        cancelAct(this.form)
        .then(res=>{
          console.log(res)
        })
        this.$message({
          type:'success',
          message:'刪除了該活動'
        });
      }).catch(() =>{
        this.$message({
          type:'info',
          message:'已取消刪除該活動'
        })
      })
    },
    jump(activityId){
        this.$router.push({path:"/Activity/activityDetail",query:{activityId:activityId}});
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

vue代碼注釋規范,代碼規范

其實關于這一點我是深惡痛絕呀，你說我們吧eslint開了，來敲代碼，就能把你的代碼給規范了吧，關于組件命名和src結構都是按照VUE目錄給的(項目成員已構造)，功能注釋和調試代碼（模擬數據的部分，已注釋，用于和客戶方展示，判定好才可刪除）和后期需求優化的地方注釋。

開發過程上到svn是不是要每日update和晚上commit來管理代碼呢，當然是。可是當我把這部分注釋留在svn庫里就不行了，同事說我代碼不規范呀，給我郁悶的。

我就想知道你以后維護代碼是要從倉庫里面拉出來看的吧，你回頭維護還要再想想是吧。倉庫里面只能有功能注釋不能有其他的注釋，說是有其他的不規范，我的媽，我問你要怎么管理你這部分東西，對方提出把代碼存到你的本地文件夾里面，svn里上傳無注釋的（僅有功能注釋），我是手動狗頭了，老鐵。如果是這個樣子，我咋開發東西呀，一口如何吃個大胖子。（注釋在weabpck打包的時候會被壓縮去掉的不在dist文件里面），當然我也覺得盡量少的注釋會很簡潔，可問題是你咋確定你的思路效果就是客戶需要的呢，比如你有個顏色ui給的不好，那你要注釋一下此處顏色要改吧，等需求給你了新的，你再來改的吧，不行，我的嗎。有部分table你要本地看，但是沒數據接口，你要上假數據吧，不行，你調試可以有但是上svn不能有，我的媽，我問你咋搞，你讓我每次提交代碼都要手動在電腦文件夾copy出來一份，改掉代碼結構再上傳？每天都要干這個事，不累呀。我有非功能注釋就是為了review來慢慢完善再去掉的。哎呀，吐槽了這么多，跑題了。下面說主要的注釋部分規范。

注釋規范

總的說一下，就是注釋盡量少，(顯得我們專業，但維護性很差)，注釋要為功能性的，不能有類似待完善的說明，這種說明要自己偷偷的寫出來，不放到代碼里面。我看我以后還是寫個說明文檔，放在本地，把哪部分功能需要完善的地方（文件路徑和部分代碼和關鍵字方便定位代碼區）給寫在文檔里面。剛好可以和SA來對接。嗯，就這么干。這比同事的專業方式（存文件夾）要強多了。

最后得說明一點，就是最好有一個解釋文件，可以是readme里面，也可以是單獨文件，用來說明每一部分的功能（中文）和作者和代碼修改狀態，我比較推薦在readme里面寫

1.TEMPLATE結構內容注釋

（1）大區塊之間需要回車換行，且有有單獨的中文注釋

2.STYLUS注釋

（1）每個大區塊的樣式的需要有單獨的中文注釋

（2）每個大區塊樣式之間需要回車換行

（3）在STYLUS自定義函數庫文件類似于mixin.styl，則需要對每個語言函數進行單獨的批注，或者一些功能類似的語言函數可以根據功能分類注釋

3.SCRIPT注釋

（1）盡可能多用單行注釋，注釋需要與被注釋的地方對齊

（2）生命周期created()、mounted()下的所有方法調用需要單獨注釋，methods里面涉及接口調用的方法一定要注釋，filters里面的過濾器需要注釋說明功能

命名規范：

1.組件文件夾命名：

（1）按照功能英文命名，過長則用 ” - ” 連接

（2）其內部的組件名稱和樣式名稱與文件夾同名

（3）其風格一致

2.靜態資源文件夾static命名：

（1）英文命名，過長則用 ” - ” 連接

（2）其主目錄需要創建一個解釋文件（annotation.txt/annotation.md），在這個解釋文件中使用中文批注好每個目錄的內容，以及每個目錄正在被哪些組件調用

3.圖片文件命名：

（1）如果是精靈圖，則需按功能命名

（2）如果是列表渲染圖片，則需要按照1-100編號命名

（3）如果是ICON圖片，則需要添加 ”icon-”前綴

解釋文件：

1.定義：一個對當前目錄下所有的文件夾的一個解釋性文檔，中文批注每個文件夾下的組件功能或者資源類型，如果是資源類型文件夾，則還需批注調用該文件夾的組件名稱和路徑

2.名稱：統一命名annotation.txt/annotation.md 

關于“vue怎么實現一個單獨的組件注釋”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。