vue组件的引用,vue全局注册组件和单独引用有什么区别
这篇文章主要介绍了某视频剪辑软件实现一个单独的组件注释，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
一个单独的组件注释效果图如下某视频剪辑软件代码注释规范，代码规范注释规范1.模板结构内容注释2.唱针注释3.脚本注释
一个单独的组件注释
写了一个组件加了一些注释
效果图如下
分页一类的功能都已经写好了下面就上代码，不知道有几个老哥能看的懂，有不足之处，还望老哥们指正
/**
* 活动菜单活动列表
* 注释菜单
* 最后修改2020/8/8 10:25
* HTML组成：上中下结构上为导航中为展示列表下为分页表
* JS:
* loadActSize用于载入获取到一共有多少个活动的应用程序接口接口方法为得到
* loadActByPage用于载入获取单页的活动
*取消用于撤销删除活动
*编辑行为用于编辑改变活动（在这里封装后用于将活动的in_banner)属性转变为真实的从而添加至轮播图
*分页为组件中的分页组件（元素-用户界面)
*数据属性：
* formInline用于储存分页的页数内容
* addToBannerI用于储存添加至轮播图的内容
* dialogFormVisible用于控制撤销原因填写框是否出现
*表格储存撤销原因和活动身份
*列表数据用于储存列表中的数据
*页面参数分页参数
*方法：
*已创建创建时调用得到一条数据方法获取数据
* addToBanner将活动添加到轮播图
*获取数据调用获取到一页的轮播图列表
*打电话给父亲更新分页参数
*删除活动撤销活动
*跳转跳转到新的页面
* CSS:
*用户搜索搜索栏的属性
*/
模板
差异
！-面包屑导航-
el面包屑分隔符-class=el-icon-arrow-right
El-bread crumb-item:to= { path:/ } 首页/el-breadcrumb-item
埃尔-面包屑-项目活动列表/el-breadcrumb-item
/el-breadcrumb
！-搜索筛选-
El-form:inline= true :model= form inline class= user-search
El-表单-项目标签=搜索：
minline的输入大小= small v-model=。deptname placeholder=输入活动名称/el-input
/El-表单-项目
埃尔-表单-项目
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-表单-项目
/el格式
！-列表-
El-table size= small :data= list data highlight-current-row v-loading= loading border element-loading-text=拼命加载中style= width:100%；
El-table-column align= center type= selection width= 60
/El-表格-列
El-表格-列可排序属性=id 标签=序号宽度=110
/El-表格-列
埃尔-表格-列可排序prop=image label=图片宽度=100
模板槽-范围="范围"
El-image:src= scope。划。图像/El图像
/模板
/El-表格-列
El-表格-列可排序属性=名称标签=发起者昵称宽度=200
/El-表格-列
El-表格-列可排序属性=发起者id 标签=发起者id width=100
/El-表格-列
埃尔-表格-列align=center label=操作最小宽度=300
模板槽-范围="范围"
El-button size= mini type= warning @ click= jump(scope。划。id)查看/el-button
El-button size= mini type= warning @ click= addto banner(范围。行)添加至轮播图/el-button
El-button size= mini type= danger @ click= dialogFormVisible=true 撤销/el-button
el-dialog title=收货地址：可见。sync= dialogFormVisible
el-form :model=form
El-表单-项目标签=删除原因：label-width=formLabelWidth
El-input v-model= form。原因 autocomplete= off /El-input
/El-表单-项目
/el格式
div slot=footer class=对话框-页脚
El-button @ click= dialogFormVisible=false 取消/el-button
El-button type= primary @ click=删除活动(范围 index，scope.row)确定/el-button
/div
/el-dialog
/模板
/El-表格-列
/el-table
！-分页组件-
分页v-bind:child-msg= page parm @ call father= call father /Pagination
/div
/模板
脚本
从导入{loadActSize，loadActByPage，cancelAct，editAct}././api/basisMG
从导入分页././组件/分页
导出默认值{
data() {
返回{
对于在线：{
第一页，
限制：10,
尺码：10,
},
addToBannerI:{
actID: ，
活动：{
in_banner:对
},
图像：{}
},
dialogTableVisible: false，
dialogFormVisible: false，
表单：{
actID:1，
原因： ,
日期1: ,
日期2: ,
发货：假的，
类型：[],
资源： ,
desc:" "
},
formLabelWidth:"120像素",
//删除
userparm: []，//搜索权限
列表数据：[],//用户数据
//分页参数
pageparm: {
当前页面：1,
页面大小：10,
总数：11
}
}
},
//注册组件
组件：{
页码
},
/**
* 数据发生改变
*/
/**
* 创建完毕
*/
已创建(){
this.getdata(this.formInline)
},
/**
* 里面的方法只有被调用才会执行
*/
方法：{
//添加至轮播图
addToBanner(act){
console.log(act)
this.addToBannerI.actID=act.id
console.log(this.addToBannerI)
editAct(this.addToBannerI)。然后(res={
console.log(res)
})
},
//获取公司列表
获取数据(参数){
this.loading=true
/***
* 调用接口，注释上面模拟数据取消下面注释
*/
loadActSize(参数)。然后(res={
控制台。日志(分辨率)；
this.pageparm.total=res.data
loadActByPage(参数)。然后(res={
控制台。日志(分辨率)；
this.loading=false
this.listData=res.data
//分页赋值
这个。页面参数。当前页面=这一页。内嵌表单。页，面，张，版
这个。页面参数。页面大小=this。内嵌表单。限制
})。接住(错误={
this.loading=false
这个message.error(菜单加载失败，请稍后再试!)
})
})
},
调用父级（参数){
这个。内嵌表单。page=parm。当前页
这个。内嵌表单。极限=参数。页面大小
this.getdata(this.formInline)
},
//搜索事件
search() {
this.getdata(this.formInline)
},
//删除活动
删除活动(索引，行){
this.dialogFormVisible=false
这个. $确认(是否确认删除该活动,提示,{
confirmButtonText:确定，
取消按钮文本：取消，
类型："警告"
}).然后(()={
console.log(索引);
console.log(this.listData)
这个。形式。actid=this。列出数据[索引].编号
取消(此表单)。然后(res={
console.log(res)
})
这个消息({
类型："成功",
消息：删除了该活动
});
}).catch(()={
这个消息({
类型："信息",
消息：已取消删除该活动
})
})
},
跳转(活动Id){
这个1000美元路由器。push({路径：/活动/活动详细信息，查询：{活动id:活动id } })；
}
}
}
/脚本
样式范围。用户搜索{
边距-顶部：20px
}。用户角色{
宽度：100%;
}
/风格
vue代码注释规范，代码规范
其实关于这一点我是深恶痛绝呀，你说我们吧埃斯林特开了，来敲代码，就能把你的代码给规范了吧，关于组件命名和科学研究委员会结构都是按照VUE目录给的（项目成员已构造),功能注释和调试代码（模拟数据的部分，已注释，用于和客户方展示，判定好才可删除)和后期需求优化的地方注释。
开发过程上到版本控制是不是要每日更新和晚上犯罪来管理代码呢，当然是。可是当我把这部分注释留在版本控制库里就不行了，同事说我代码不规范呀，给我郁闷的。
我就想知道你以后的维护代码是要被拉出仓库的。回去维修的时候还得再想一想吧？仓库里只能有功能注释，不能有其他注释，说有其他不规范。我妈，我问你这部分东西怎么管理，对方提出把代码保存在你本地文件夹里。svn中没有上传评论(只有功能性评论)。我是手动狗，老铁。如果是这样的话，我怎么开发东西，一口吃个大胖子？(weabpck打包时注释会被压缩并删除，但不在dist文件中)。当然我也认为评论越少越好，但问题是，你怎么能确定你的想法的效果就是客户需要的呢？比如你没有给出一个好的颜色ui，你就要评论说这里的颜色要改。当需求给你一个新的，你可以再换一个。不，我的？有些表您想在本地读取，但是没有数据接口。你必须上传假数据。不，你可以把它们用于调试，但是你不能把它们用于svn。我妈，我问你怎么回事。你让我每次提交代码都在电脑文件夹里手动拷贝一份，然后改变代码结构再上传？每天这样做不累。我有非功能性的评论只是为了慢慢完善，然后去掉审核。啧啧，吐了这么多，跑题了。下面说说主要评论。
注释规范
总之，评论要尽量少(看起来我们很专业，但是可维护性差)。评论应该是功能性的，不应该有类似的说明需要改进。这样的指令应该是我们自己偷偷写的，不要放进代码里。我觉得以后会写一个说明文档，放在本地，在文档里写哪些部分的功能需要改进(一些代码和关键字方便定位的文件路径和代码区)。正好可以和SA对接。好吧，我们开始吧。这比我同事的专业方式(存档)好多了。
最后，最好有一个解释文件，可以是自述文件，也可以是单独的文件，说明各部分的功能(中文)以及作者和代码修改状态。我建议把它写在自述文件中。
1.TEMPLATE结构内容注释
(1)大块之间需要回车，有单独的中文注释。
2.STYLUS注释
(1)每个大块的样式需要有单独的中文标注。
(2)每个大块的样式之间需要回车和换行。
(3)如果手写笔自定义函数库文件类似于mixin.styl，则需要对每个语言函数分别进行注释，或者对一些功能相似的语言函数按照其功能进行注释。
3.SCRIPT注释
(1)尽量使用单行注释，注释需要与被注释的地方对齐。
(created()和mounted()生命周期中的所有方法调用都需要单独注释。方法中接口调用涉及的方法必须注释，过滤器中的过滤器需要注释和解释。
命名规范：
1.命名组件文件夹：
(1)根据功能英语命名；如果太长，则用“-”连接。
(2)其内部组件名称和样式名称与文件夹同名。
(3)其风格一致。
2.静态资源文件夹静态命名：
(1)英文名，如果太长，用“-”连接。
(2)它的主目录需要创建一个解释文件(annotation.txt/annotation.md)，每个目录的内容都用中文标注，哪些组件在调用每个目录。
3.将图片文件命名为：
(1)如果是向导图，要根据其功能来命名。
(2)如果是列表渲染图，需要按照数字1-100命名。
(3)如果是图标图片，需要加上前缀“icon-”
解释文件：
1.定义：当前目录下所有文件夹的说明文件，用中文标注每个文件夹的组件功能或资源类型。如果是资源类型文件夹，还需要标注调用该文件夹的组件的名称和路径。
2.名称：annotation.txt/annotation.md是统一命名的。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。