Are there some samples that integrate the vue-styleguidist with Quasar to produce document for Quasar App Project?



  • if developer want to use vue-styleguidist to generate and maintain the document of the Quasar project and is developing App with Quaser, so he/she prefer a sample demo how to integrate the vue-styleguidist with Quaser.
    so, Are there some samples that integrate the vue-styleguidist with Quasar to produce document for Quasar App Project?
    for example, in the official vue-styleguidist web site:https://vue-styleguidist.github.io/docs/GettingStarted.html.
    and there are some samples how to integrate the vue-styleguidist with vuetify app project to generate the project document:

    the vue-styleguidist need the project tell it how to load your code, so in general, create a styleguide.config.js file in the same directory that your package.json. and put some code such as following(the following code use @vue-cli’s webpack.config:

    module.exports = {
    
    ...
    
    webpackConfig: require('./node_modules/@vue/cli-service/webpack.config'),
    
    ...
    
    }
    

    so the question is how to find the webpack.config.js of the quasar app project?
    Obviously, the file quasar.conf.js isn’t suitable for the case.

    for Class-Style Vue Components, it also SHOULD generate the document, for example:

    <template>
      <button :style="styles" @click="handleClick">
        <!-- @slot Use this slot to place the button content -->
        <slot></slot>
      </button>
    </template>
    <script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator'
    
    @Component
    export default class AppButton extends Vue {
      @Prop(Number)
      size?: number;
    
      /**
       * Sets the button font color
       */
      @Prop(String)
      color?: string;
    
      @Prop(String)
      /** 
       * Sets background color of the button
       * @since 1.2.0
       */
      background?: string;
    
      /** @deprecated Use color instead */
      @Prop(String)
      oldColor?: string;
    
      get styles () {
        return {
          'font-size': this.size,
          color: this.color,
          background: this.background
        }
      }
    
      handleClick (e: Event) {
        /**
         * Triggered when button is clicked
         * @event click
         * @type {Event}
         */
        this.$emit('click', e)
        /** 
         * Event for Alligator's example
         * @event gator
         * @type {Event}
         */
        this.$emit('gator', e)
      }
    }
    </script>
    


  • This post is deleted!



Log in to reply