Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve a separate component annotation in vue". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to achieve a separate component annotation in vue" can help you solve the problem.

A separate component comment

Wrote a component with some comments.

The effect picture is as follows

Paging and other functions have been written on the following code, I do not know how many brothers can understand, there are deficiencies, but also hope the old buddies to correct

/ * * activity menu activity list * comments menu * Last modified 2020-8-8 10:25 * HTML composition: upper, middle and lower structure for navigation and paging table for display list below * JS: * loadActSize is used to load and get the total number of activities API interface method is Get * loadActByPage is used to load activities to get a single page * cancelAct Used to undelete the activity * editAct is used to edit and change the activity (encapsulated here to change the in_banner of the activity) property to true to add to the rotation map * Pagination is the paging component (element-UI) in the component * data attribute: * formInline is used to store page count content * addToBannerI is used to store the content added to the rotation map * dialogFormVisible is used to control Whether the revocation reason box appears or not * form Storage revocation reason and activity ID * listData is used to store the data in the list * pageparm paging parameters * method: * when created is created, call the getdata method to obtain data * addToBanner adds the activity to the broadcast map * getdata call to get the one-page broadcast chart list * callFather update paging parameters * deleteActivity Undo activity * jump jumps to a new page * CSS: * Properties of user-search search bar * / Home activity list search add View the revocation and cancellation confirmation of adding to the broadcast map 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' / / Delete userparm: [], / / search permissions listData: [], / / user data / / paging parameters pageparm: {currentPage: 1, pageSize: 10, total: 11}}, / / Registration component components: {Pagination} / * data has changed * / / * created * / created () {this.getdata (this.formInline)} The methods in / * will be executed only when called * / methods: {/ / add to addToBanner (act) {console.log (act) this.addToBannerI.actID=act.id console.log (this.addToBannerI) editAct (this.addToBannerI) .then (res= > {console.log (res)})} / / get company list getdata (parameter) {this.loading = true / * call API Note the analog data above and uncomment * / loadActSize (parameter) .then (res= > {console.log (res) below) This.pageparm.total = res.data loadActByPage (parameter) .then (res = > {console.log (res)) This.loading = false this.listData = res.data / / paging assignment this.pageparm.currentPage = this.formInline.page this.pageparm.pageSize = this.formInline.limit}) .catch (err = > {this.loading = false this.$message.error ('menu load failed, please try again later!') })})}, callFather (parm) {this.formInline.page = parm.currentPage this.formInline.limit = parm.pageSize this.getdata (this.formInline)}, / / search event search () {this.getdata (this.formInline)}, / / delete active deleteActivity (index) Row) {this.dialogFormVisible = false this.$confirm ('confirm deletion of this activity', 'prompt', {confirmButtonText:' OK', cancelButtonText:' cancel', 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:' deleted the activity'}) }) .catch (() = > {this.$message ({type:'info', message:' has canceled the deletion of this activity'})}, jump (activityId) {this.$router.push ({path: "/ Activity/activityDetail", query: {activityId:activityId}});} .user-search {margin-top: 20px;} .userRole {width: 100% } vue code annotation specification, code specification

In fact, I hate this point, you say we open the eslint, to knock on the code, we will be able to standardize your code, about the component naming and src structure are given in accordance with the VUE directory (project members have been constructed), functional comments and debugging code (the part of the simulation data, has been annotated, used to show and customer side, determine the place to delete) and later needs optimization.

When it comes to svn during the development process, do you need daily update and evening commit to manage the code? of course it is. But when I leave this part of the comments in the svn library is not good, colleagues said that my code is not standard ah, give me depressed.

I just want to know that you have to pull the maintenance code out of the warehouse in the future, and you have to think about it later. There are only functional comments and no other comments in the warehouse, it is said that there are other irregularities, my mother, I asked you how to manage this part of your stuff, the other side proposed to store the code in your local folder, upload uncommented (only functional comments) in svn, I am a manual dog head, old man. If this is the case, how can I develop things and eat fat people in one bite? (comments in the weabpck packaging will be compressed out of the dist file), of course, I also think that as few comments as possible will be very concise, but the question is how do you make sure that the effect of your ideas is what the customer needs? for example, if you have a color ui that is not good, then you have to comment on the color to change here, and when the demand gives you a new one, you will change it, not mine. There is part of table you want to watch locally, but there is no data interface, you want to put fake data on it, no, you can debug it, but you can't have it on svn. My mother, I asked you what to do. You asked me to manually copy a copy of the code in the computer folder every time I submitted it, change the code structure and upload it again. I have to do this every day. I'm not tired. I have non-functional comments for review to slowly improve and then remove. Alas, after complaining so much, I digress. The main annotated parts of the specification are described below.

Annotation specification

Generally speaking, there are as few comments as possible, (it appears that we are professional, but the maintainability is very poor). Comments should be functional, and there should not be similar instructions to be improved, which should be secretly written by ourselves and not put into the code. I think I'd better write an instruction document in the future, put it locally, and write in the document which part of the function needs to be improved (the file path and part of the code and keywords are convenient to locate the code area). Just in time to dock with SA. Yeah, let's do it. This is much better than the professional way of colleagues (saving folders).

Finally, it is best to have an explanation file, either in readme or separately, to explain the function of each part (in Chinese) and the author and code modification status. I recommend writing it in readme.

Comments on 1.TEMPLATE structure content

(1) enter and line feeds are required between large blocks, and there are separate comments in Chinese

2.STYLUS comment

(1) the style of each block needs to be annotated separately in Chinese.

(2) enter and line feed are required between each block style.

(3) if the STYLUS custom function library file is similar to mixin.styl, each language function needs to be annotated separately, or some language functions with similar functions can be classified and annotated according to their functions.

3.SCRIPT comment

(1) use single-line comments as much as possible, and the comments need to be aligned with the places being commented.

(2) all method calls under created () and mounted () in the life cycle need to be annotated separately. Methods involving API calls in methods must be annotated, and filters in filters need to be annotated to describe the function.

Naming convention:

1. Component folder naming:

(1) it is named in English according to the function, and if it is too long, it is connected with "-".

(2) the internal component name and style name have the same name as the folder

(3) its style is the same.

two。 Static resource folder static naming:

(1) name it in English. If it is too long, it will be connected with "-".

(2) its home directory needs to create an interpretation file (annotation.txt/annotation.md), in which the contents of each directory are annotated in Chinese, and which components are calling each directory.

3. Picture file naming:

(1) if it is a wizard diagram, it needs to be named according to the function.

(2) if the picture is rendered by list, it needs to be named according to the number 1-100.

(3) if it is an ICON image, you need to add the prefix "icon-".

Explain the document:

1. Definition: an explanatory document for all folders under the current directory, annotating the component function or resource type under each folder in Chinese, or, in the case of a resource type folder, the component name and path to which the folder is called

two。 Name: unified naming annotation.txt/annotation.md

That's all for "how vue implements a separate component comment". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.