Vue components for a single JSDoc file

I am trying to run JSDoc on my individual Vue components. I found two plugins that sound like they should work (both are actually based on the same code):

https://www.npmjs.com/package/vue-doc

and

https://www.npmjs.com/package/jsdoc-vue

The plugin breaks when shorthand is used, but this is not a big problem, I can just use shorthand. However, every component of the file on which I am trying to run JSDoc gets this error:

Neighbor JSX elements must be enclosed in a tag

This means that my component does not have a single root element, but they all have. I configured the test component like this, but it does not work:

<template>
  <div>
    {{someData}}
  </div>
</template>

<script>
  export default {
    data () {
      return {
        someData: "Test Data"
      }
    },
    methods: {
      /**
       * Just a test function
       * @function
       */
      testFunction: function () {
        alert("Testing")
      }
    }
  }
</script>

<style lang="stylus">
  div {
    border: 1px solid;
  }
</style>
Run codeHide result

- JSDoc .vue? , , .

+8
2

documentation.js Vue. , . , , HTML , .

, Vue :

<template>
    <div>{{mydata}}</div>
</template>

<script>
export default {
    data: function() {
        return {
            mydata: "hello"
        }
    },
    methods: {
        /**
         * Add two numbers.
         * @param{number} num1 The first number to add
         * @param{number} num2 The second number to add
         * @return{number} The sum of the two numbers.
         */
        addnums: function(num1, num2) {
            return num1 + num2;
        },

        /**
         * Concatenate two strings.
         * @param{string} str1 The first string to concatenate.
         * @param{string} str2 The second string to concatenate.
         * @return{string} The concatentation of the two strings.
         */
        concat: function(str1, str2) {
            return str1 + str2;
        }
    }
}
</script>

documentation build /path/to/file.vue -f html -o docs HTML , :

enter image description here

2019 :

vuese, Vue. document.js , vuese , . .

, .

+2
+1

Source: https://habr.com/ru/post/1672445/


All Articles