vue怎么實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋

這篇文章主要介紹“vue怎么實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vue怎么實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋”文章能幫助大家解決問(wèn)題。

一個(gè)單獨(dú)的組件注釋

寫(xiě)了一個(gè)組件 加了一些注釋

效果圖如下

分頁(yè)一類(lèi)的功能都已經(jīng)寫(xiě)好了 下面就上代碼，不知道有幾個(gè)老哥能看的懂，有不足之處，還望老哥們指正

/**
 * 活動(dòng)菜單 活動(dòng)列表
 * 注釋菜單
 * 最后修改 2020/8/8 10:25
 * HTML組成：上中下結(jié)構(gòu)      上為導(dǎo)航      中為展示列表    下為分頁(yè)表
 * JS： 
 *   loadActSize 用于載入獲取到一共有多少個(gè)活動(dòng)的API接口 方法為Get
 *   loadActByPage 用于載入獲取單頁(yè)的活動(dòng)
 *   cancelAct 用于撤銷(xiāo)刪除活動(dòng)
 *   editAct  用于編輯改變活動(dòng)（在這里封裝后用于將活動(dòng)的in_banner）屬性轉(zhuǎn)變?yōu)閠rue 從而添加至輪播圖
 *   Pagination 為組件中的分頁(yè)組件 （element-UI）
 *   data屬性：
 *     formInline 用于儲(chǔ)存分頁(yè)的頁(yè)數(shù)內(nèi)容
 *     addToBannerI 用于儲(chǔ)存添加至輪播圖的內(nèi)容
 *     dialogFormVisible 用于控制撤銷(xiāo)原因填寫(xiě)框是否出現(xiàn)
 *     form 儲(chǔ)存撤銷(xiāo)原因和活動(dòng)ID
 *     listData 用于儲(chǔ)存列表中的數(shù)據(jù)
 *     pageparm 分頁(yè)參數(shù)
 *   method：
 *     created 創(chuàng)建時(shí)調(diào)用getdata方法獲取數(shù)據(jù)
 *     addToBanner 將活動(dòng)添加到輪播圖
 *     getdata 調(diào)用獲取到一頁(yè)的輪播圖列表
 *     callFather 更新分頁(yè)參數(shù)
 *     deleteActivity 撤銷(xiāo)活動(dòng)
 *     jump 跳轉(zhuǎn)到新的頁(yè)面
 * CSS:
 *    user-search 搜索欄的屬性 
 */
<template>
  <div>
    <!-- 面包屑導(dǎo)航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首頁(yè)</el-breadcrumb-item>
      <el-breadcrumb-item>活動(dòng)列表</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="輸入活動(dòng)名稱(chēng)"></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="序號(hào)" 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="發(fā)起者昵稱(chēng)" width="200">
      </el-table-column>
      <el-table-column sortable prop="originator_id" label="發(fā)起者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">撤銷(xiāo)</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>
    <!-- 分頁(yè)組件 -->
    <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: [], //搜索權(quán)限
      listData: [], //用戶(hù)數(shù)據(jù)
      // 分頁(yè)參數(shù)
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 11
      }
    }
  },
  // 注冊(cè)組件
  components: {
    Pagination
  },
  /**
   * 數(shù)據(jù)發(fā)生改變
   */
  /**
   * 創(chuàng)建完畢
   */
  created() {
    this.getdata(this.formInline)
  },
  /**
   * 里面的方法只有被調(diào)用才會(huì)執(zhí)行
   */
  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
      /***
       * 調(diào)用接口，注釋上面模擬數(shù)據(jù) 取消下面注釋
       */
      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
          // 分頁(yè)賦值
          this.pageparm.currentPage = this.formInline.page
          this.pageparm.pageSize = this.formInline.limit
        
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜單加載失敗，請(qǐng)稍后再試！')
        })
      })  
      
    },
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //刪除活動(dòng)
    deleteActivity(index,row){
      this.dialogFormVisible = false
      this.$confirm('是否確認(rèn)刪除該活動(dòng)','提示',{
        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:'刪除了該活動(dòng)'
        });
      }).catch(() =>{
        this.$message({
          type:'info',
          message:'已取消刪除該活動(dòng)'
        })
      })
    },
    jump(activityId){
        this.$router.push({path:"/Activity/activityDetail",query:{activityId:activityId}});
    }
  }
}
</script>

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

vue代碼注釋規(guī)范,代碼規(guī)范

其實(shí)關(guān)于這一點(diǎn)我是深?lèi)和唇^呀，你說(shuō)我們吧eslint開(kāi)了，來(lái)敲代碼，就能把你的代碼給規(guī)范了吧，關(guān)于組件命名和src結(jié)構(gòu)都是按照VUE目錄給的(項(xiàng)目成員已構(gòu)造)，功能注釋和調(diào)試代碼（模擬數(shù)據(jù)的部分，已注釋?zhuān)糜诤涂蛻?hù)方展示，判定好才可刪除）和后期需求優(yōu)化的地方注釋。

開(kāi)發(fā)過(guò)程上到svn是不是要每日update和晚上commit來(lái)管理代碼呢，當(dāng)然是?？墒钱?dāng)我把這部分注釋留在svn庫(kù)里就不行了，同事說(shuō)我代碼不規(guī)范呀，給我郁悶的。

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

注釋規(guī)范

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

最后得說(shuō)明一點(diǎn)，就是最好有一個(gè)解釋文件，可以是readme里面，也可以是單獨(dú)文件，用來(lái)說(shuō)明每一部分的功能（中文）和作者和代碼修改狀態(tài)，我比較推薦在readme里面寫(xiě)

1.TEMPLATE結(jié)構(gòu)內(nèi)容注釋

（1）大區(qū)塊之間需要回車(chē)換行，且有有單獨(dú)的中文注釋

2.STYLUS注釋

（1）每個(gè)大區(qū)塊的樣式的需要有單獨(dú)的中文注釋

（2）每個(gè)大區(qū)塊樣式之間需要回車(chē)換行

（3）在STYLUS自定義函數(shù)庫(kù)文件類(lèi)似于mixin.styl，則需要對(duì)每個(gè)語(yǔ)言函數(shù)進(jìn)行單獨(dú)的批注，或者一些功能類(lèi)似的語(yǔ)言函數(shù)可以根據(jù)功能分類(lèi)注釋

3.SCRIPT注釋

（1）盡可能多用單行注釋?zhuān)⑨屝枰c被注釋的地方對(duì)齊

（2）生命周期created()、mounted()下的所有方法調(diào)用需要單獨(dú)注釋?zhuān)琺ethods里面涉及接口調(diào)用的方法一定要注釋?zhuān)琭ilters里面的過(guò)濾器需要注釋說(shuō)明功能

命名規(guī)范：

1.組件文件夾命名：

（1）按照功能英文命名，過(guò)長(zhǎng)則用 ” - ” 連接

（2）其內(nèi)部的組件名稱(chēng)和樣式名稱(chēng)與文件夾同名

（3）其風(fēng)格一致

2.靜態(tài)資源文件夾static命名：

（1）英文命名，過(guò)長(zhǎng)則用 ” - ” 連接

（2）其主目錄需要?jiǎng)?chuàng)建一個(gè)解釋文件（annotation.txt/annotation.md），在這個(gè)解釋文件中使用中文批注好每個(gè)目錄的內(nèi)容，以及每個(gè)目錄正在被哪些組件調(diào)用

3.圖片文件命名：

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

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

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

解釋文件：

1.定義：一個(gè)對(duì)當(dāng)前目錄下所有的文件夾的一個(gè)解釋性文檔，中文批注每個(gè)文件夾下的組件功能或者資源類(lèi)型，如果是資源類(lèi)型文件夾，則還需批注調(diào)用該文件夾的組件名稱(chēng)和路徑

2.名稱(chēng)：統(tǒng)一命名annotation.txt/annotation.md 

關(guān)于“vue怎么實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。