A jsdoc3 plugin use `@vuedoc/md`

Related tags

Docs jsdoc-vuedoc
Overview

jsdoc-vuedoc

A jsdoc plugin use @vuedoc/md.

Dependencies

Installation

npm i jsdoc-vuedoc -D

options

add jsdoc-vuedoc node to jsdoc.json.

Use:

This plugin just extract the component's info into markdown format, and instert it into the @vuedoc's position.

Not affect other jsdoc features of the code.

  1. add @vuedoc tag to comment.
  2. add @exports componentName tag to comment.

just add @vuedoc tag, @exports tag, to the to document in you vue SFC.

/**
 * sidebar component description
 * @vuedoc
 * @exports component/SideBar
 */
export default {}

如何使用jsdoc?

  • 安装jsdoc: npm i jsdoc -D
  • 安装模板:npm i sherry-docstrap -D, 原来的docstrap有点小bug还未修复,所以自己暂时发布一个。
  • 在项目目录下建了配置文件:下面有示例,适当修改。
  • 在pacakge.json 里添加一个script: "jsdoc": "rm -rf public/jsdoc && node_modules/.bin/jsdoc -c jsdoc.json", public/jsdoc为发布位置,适当修改
  • 生成文档: npm run jsdoc

jsdoc.json

{
  "plugins": [
    "node_modules/jsdoc-vuedoc",
    "plugins/markdown",
    "plugins/summarize"
  ],
  "jsdoc-vuedoc": {
    "tag": "vuedoc"
  },
  "markdown": {
    "tags": ["author", "classdesc", "description", "param", "property", "returns", "see", "throws"]
  },
  "recurseDepth": 10,
  "source": {
    "include": ["fe/src"],
    "includePattern": ".+\\.(js|vue)$",
    "excludePattern": "(^|\\/|\\\\)_"
  },
  "sourceType": "module",
  "tags": {
    "allowUnknownTags": true,
    "dictionaries": ["jsdoc", "closure"]
  },
  "templates": {
    "logoFile": "",
    "cleverLinks": false,
    "monospaceLinks": false,
    "dateFormat": "ddd MMM Do YYYY",
    "outputSourceFiles": true,
    "outputSourcePath": true,
    "systemName": "DocStrap",
    "footer": "",
    "copyright": "DocStrap Copyright © 2012-2015 The contributors to the JSDoc3 and DocStrap projects.",
    "navType": "vertical",
    "theme": "cosmo",
    "linenums": true,
    "collapseSymbols": false,
    "inverseNav": true,
    "protocol": "html://",
    "methodHeadingReturns": false
  },
  "markdown": {
    "parser": "gfm",
    "hardwrap": true
  },
  "opts": {
    "template": "node_modules/sherry-docstrap/template",
    "encoding": "utf8",
    "destination": "./public/jsdoc/",
    "recurse": true,
    "readme": "README.md",
    "tutorials": "./docs/"
  }
}

效果

效果.

You might also like...
A stupidly simple to use temporary mail host with an easy to use JSON/WS API

A stupidly simple to use temporary mail host with an easy to use JSON/WS API Yes, there are hundreds of these. It's just fun to learn new things

A module for nuxtjs that make define and use variables in component easier by use js object or json file.

nuxt-global-var A module for nuxtjs that make defining and using variables in component easier by using js object or json file. How to use Install Wit

🚀 Easy to use, no need to set size, support rotation, photoswipe based vue swipe plugin

vue-pswipe a Vue plugin for PhotoSwipe without set image size online example install npm install vue-pswipe usage // main.js import Photoswipe from '

Vue.js 2.x plugin that helps to use id-related attributes with no side-effect

VueUniqIds A Vue.js plugin that helps to use id-related attributes with no side-effect It is a trend to use components. Components are cool, they are

A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element

v-suggest A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine in

Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.
Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.

Vue Tour Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js. It provides a quick and easy way to guide your users thro

A plugin to use animate.css animations as Vue2 transitions

animated-vue A plugin to use animate.css animations as Vue2 transitions Demo: Coming soon! Installation and usage Install animated-vue and animate.css

A Vue.js plugin to use webworkers in a simply way.

VueWorker A Vue.js plugin to use webworkers in a simply way. Changelog 1.2.1 Highlights: Fix README examples See full changelog here. Why Create and u

A mock plugin for vite.use mockjs.

vite-plugin-mock English | 中文 Provide local and prod mocks for vite. A mock plugin for vite, developed based on mockjs. And support the local environm

A mock plugin for vite.use mockjs.

vite-plugin-mock English | 中文 Provide local and prod mocks for vite. A mock plugin for vite, developed based on mockjs. And support the local environm

use vue plugin easy create chrome extension template
use vue plugin easy create chrome extension template

vue-cli-plugin-chrome-extension-cli English | 简体中文 | 繁體中文 Start a chrome extension project with Vue-CLI with ease! support vue2 vue3 TypeScript and Ja

A Vue plugin for simple use of the Zeye-server open-source mediasoup WebRTC SFU server

Getting Started Pronouced like [zaɪ]Client Designed to work in pair with my fork of mediasoup-demo-server VueZeyeClient relies heavily on vuex. Everyt

Plugin for working with Vuex. Allows to use localeStorage to store state. It is possible to

vuex-masked-modules Plugin for working with Vuex. Allows to use localeStorage to store state. It is possible to "mask" data in the localStorage cell.

A vue plugin for nesting scroller ,you can use it to expand more components such as banner,date-piacker and so on.
A vue plugin for nesting scroller ,you can use it to expand more components such as banner,date-piacker and so on.

v-scroller A mobile Vue plugin for scroller pluginName: v-scroller version: 1.2.5 author: Alan Chen github: [email protected] date: 2018/08/14 T

A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element

v-suggest A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine in

A clean, easy-to-use, iOS UIAlertController-like alert plugin for Vue 2.x.

Vue-Alerts Demo A clean, easy-to-use, UIAlertController-like alert plugin for Vue 2.x. Online Demo You can access the demo here. Download the plugin T

vuex-loading-plugin The plugin which including to your modules loading logic

vuex-loading-plugin The plugin which including to your modules loading logic. When you will handle any actions you triggering loading mutation. When a

Localization plugin for vue.js 3 using vuex as store. Supports usage as plugin or composition API.

vuex-i18n This is a fork from vuex-i18n with enhancements for vue3. The plugin can be used as Plugin or as Composition API. Simple example application

Use Grid-Awesome to generate boilerplate css for grid layouts using the css display: grid; property.

Grid Awesome Use Grid-Awesome to generate boilerplate css for grid layouts using the css display: grid; property. Demo Getting Started git clone https

Comments
  • Considere to upgrade to Vuedoc Markdown 3.0.0

    Considere to upgrade to Vuedoc Markdown 3.0.0

    Just to notice you that the Vuedoc Markdown 3.0.0 has been release on NPM which bring important features and changes. It would be great to consider to upgrade jsdoc-vuedoc dependencies.

    NPM: https://www.npmjs.com/package/@vuedoc/md/v/3.0.0-beta2

    opened by demsking 0
  • Why 'Members' section is available?

    Why 'Members' section is available?

    Hello,

    First of all, great support to jsdoc on Vue applications. What a great tool! I start using it on my own project and everything looks fine but I do not understand why vuedoc duplicates the data variables in a new section called 'Members'. This is the result:

    https://codepen.io/anon/pen/qLEqdM

    Thanks for your support!

    opened by tmmsmoreira 0
  • Feature request: Custom type for props

    Feature request: Custom type for props

    Hi,

    Thanks for the project. I have a feature request please.

    It would be great if we could provide custom types for props, because some props requires complex objects and documenting them would be great.

    Kind Regards,

    For example:

      /**
       * @typedef {Object} Currency
       * @property {string}   symbol   - Symbol of the currency
       * @property {string}   name     - Name of the currency
       */
    
    export default {
      props: {
        /**
         * @model
         * @property {string[]}   selected      - Array of ids of selected options.
         * @property {number}     quantity	    - Number of item requested.
         */
        value: {
          type: Object,
          default: () => ({
            selected: [],
            quantity: 1,
          }),
        },
        
        /**
         * Description for the prop
         * @type Currency
         */
        currency: { type: Object, required: true },
    
        /**
         * Description with Inline type
         * @property {string}    code    - Color code
         * @property {number}    sort    - Sort number of the color
         */
        color: { type: Object, required: true },
      }
    }
    opened by ozum 0
Owner
Season Chen
Season Chen
A simple plugin for jsdoc (`pase vue SFC info to description`)

jsdoc-vue-component A simple plugin for jsdoc (pase vue SFC info to description by AST analysis). Maybe you will try jsdoc-vuedoc, and you have a bett

Season Chen 11 May 7, 2022
Rollup plugin to generate markdown documentation from Vue.js component source with @vuedoc/md.

Rollup plugin to generate markdown documentation from Vue.js component source with @vuedoc/md.

IKEDA Hiroki 2 Jan 27, 2021
Generate a Markdown Documentation for a SFC Vue Component. Contribute: https://gitlab.com/vuedoc/md#contribute

Vuedoc Markdown Documentation Generator Generate a Markdown Documentation for a Vue file Table of Contents Install Features Command line usage Command

null 157 Oct 25, 2022
Generate a JSON documentation for a SFC Vue component. Contribute: https://gitlab.com/vuedoc/parser#contribute

The Vuedoc Parser Generate a JSON documentation for a Vue file component. Table of Contents Install Features Options Usage Syntax Add component name A

null 86 Nov 15, 2022
vue3-use-modal - vue3(vue-next) plugin that provide easy use of modal

vue3-use-modal is vue3(vue-next) plugin that provide easy use of modal. It is not only component based but also lets using modal either asynchronous or synchronous behavior.

Eddie 4 Nov 10, 2022
vuejs and Django integration with hot code reload. Dont use this, use https://github.com/NdagiStanley/vue-django or https://github.com/gtalarico/django-vue-template

hello-vue + Django This is a boilerplate project for using vuejs with Django. Features Django backend in ./backend vuejs (v2) frontend in ./frontend H

Rokas Kupstys 330 Oct 6, 2022
Matteo Bruni 4.4k Nov 26, 2022
Shamim Hossain 52 Nov 15, 2022
Non-commercial use is for personal research use only

PortableArc This template should help get you started developing with Vue 3 in Vite. Recommended IDE Setup VSCode + Volar (and disable Vetur). Type Su

SngBlog 1 Jun 4, 2022
Vue Flag Icons. Use country flags as a Vue component. You can also use in any project without Vue too.

Vue Flag Icons. Use country flags as a Vue component. You can also use in any project without Vue too.

Md Obydullah 2 Mar 22, 2022