A simple plugin for jsdoc (`pase vue SFC info to description`)

Related tags

Docs jsdoc-plugin
Overview

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 better experience。

Installation

npm i jsdoc-vue-component -D

Related

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

Options

  • log: true,
  • tag: 'vuedoc'

jsdoc.json

{
  "plugins": [
    "node_modules/jsdoc-vue-component",
    "plugins/markdown",
    "plugins/summarize"
  ],
  "jsdoc-vue-component": {
    "log": true
  },
  "markdown": {
    "tags": ["author", "classdesc", "description", "param", "property", "returns", "see", "throws", "vue"]
  },
  "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...
Vue's template compiler reimplemented in Rust!
Vue's template compiler reimplemented in Rust!

Vue Compiler in Rust Try it out in the wasm playground! Evan says: Maybe in the long run we want the whole transform (and even the Vue compiler!) to b

A starter Project for HacktoberFest 2021. Read the Description to know how to contribute
A starter Project for HacktoberFest 2021. Read the Description to know how to contribute

🔥 HacktoberFest Starter Project 🔥 Use this project to make your first contribution to an open source project on GitHub. Practice making your first p

A lightweight fully fledged Vue.js sprite-sheet animation render engine in a compact SFC plugin format
A lightweight fully fledged Vue.js sprite-sheet animation render engine in a compact SFC plugin format

A lightweight fully fledged Vuejs sprite-sheet animation render engine in a compact SFC plugin format

Application that provides weather information of provinces with Vue.js / Weather info in Turkey with Vue.js

# weather_app ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for

Info addon for Vue components
Info addon for Vue components

Deprecated This addon is deprecated due to the retirement of official addon-info. Storybook now has an alternative addon, called Docs addon(addon-docs

Search info of your favorite movies

Search info of your favorite movies

Movie search - Lets you see top streaming movies, search for movies and view their info

Movie-App Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch

Vue devtool for identifying Vue components and their SFC paths in the DOM
Vue devtool for identifying Vue components and their SFC paths in the DOM

💡 vue-dom-hints A Vue devtool that adds dev hints in the DOM via __vue__ attribute Instantly identify all Vue components in the DOM and where they're

🔨vue-sfc-cli is a powerful tool for developing vue single-file component
🔨vue-sfc-cli is a powerful tool for developing vue single-file component

🔨vue-sfc-cli is a powerful tool for developing vue single-file component

"Compile" your VueJS components (sfc/*.vue) to standalone html/js/css ... python only (no need of nodejs). Support python components too !

vbuild "Compile" your VueJS components (*.vue) to standalone html/js/css ... python only, no need of nodejs. And you can use python components with vb

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

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

A Pastebin for Vue.js SFC with Syntax Highlighting And Code Formatting.

VueBin is a pastebin for Vue.js Single File Components inspired by HasteBin with Out of the box Syntax Highlighting using Shiki and Code Formatting using Prettier

Import types in Vue SFC for defineProps

vite-plugin-vue-type-imports Enables you to import types and use them in your defineProps and defineEmits ⚠️ This Plugin is still in Development and t

A webpack loader which can load i18n block written in JavaScript in a Vue SFC

vue-i18n-js-loader With vue-i18n-js-loader loader, you can write any javascript code in the i18n custom block! This project is based on @intlify/vue-i

Only Vue 3 for now! This plugin includes 3 global components: simple-grid-container,simple-layout-container and simple-grid-item,that will help you to build excellent layout for your app.

Only Vue 3 for now! This plugin includes 3 global components: simple-grid-container,simple-layout-container and simple-grid-item,that will help you to build excellent layout for your app.

A simple stepper with simple actions such as next, back and end to perform simple forms.

Stepper Stepper for Vue. A simple stepper with simple actions such as next, back and finish to perform simple forms. Live Demo Installation npm instal

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

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

Comments
  • vue组件的名称解析有误

    vue组件的名称解析有误

    // props: {}, object if (item.value.type == 'ObjectExpression') { item.value.properties.forEach(prop => { // test: Type if (prop.value.type == 'Identifier') { props.push({ name: prop.key.name, // prop.key.name为undefined,改为prop.key.value即可 type: prop.value.name }); }

    opened by yangcan1930 1
Owner
Season Chen
Season Chen
A jsdoc3 plugin use `@vuedoc/md`

jsdoc-vuedoc A jsdoc plugin use @vuedoc/md. Dependencies [email protected]: That support async/await features. @vuedoc/md. Installation npm i jsdoc-vuedoc -D o

Season Chen 19 Jun 13, 2022
📇 Convert Markdown file to Vue component.

You have other better choices https://github.com/egoist/vmark https://github.com/liril-net/ware-loader vue-markdown-loader Convert Markdown file to Vu

cinwell.li 703 Nov 30, 2022
React inspired style guide generator for Vue.js

?? [20/09/2017] Project discontinued ?? For purpose of having a demo of your Vuejs components please take a look at following projects that do really

Mikhail Kuznetcov 123 Jul 30, 2020
Created from react styleguidist for Vue Components with a living style guide

Isolated Vue component development environment with a living style guide Start documenting now on codesandbox.io Sponsors A big thank you to our spons

Vue Styleguidist 2.3k Nov 22, 2022
A library for documenting Vue components

Elucidate A library that makes it a breeze to "shed light" on your Vue component. Demo: https://mattrothenberg.github.io/vue-elucidate-example Demo Vi

Matt Rothenberg 35 Nov 16, 2022
:sparkles: Markdown files to ALIVE Vue components.

vue-md-loader Introduction Webpack loader for converting Markdown files to ALIVE Vue components. Configurable Markdown-It parser. Built-in syntax high

wxsm 111 Nov 20, 2022
Custom story blocks for Vue single file components

vue-storybook Custom <story> blocks for Vue single file components that work out of the box with Vue CLI 3 and vue-cli-plugin-storybook. yarn add vue-

Matt Rothenberg 151 Aug 3, 2022
🤗 One-stop solution for vue component documentation. Original org: https://github.com/vuese

vuese One-stop solution for vue component documentation This project is supported by our Backers Document For detailed documentation: vuese.org Overvi

vuese 1.6k Nov 29, 2022
Easily build beautiful tutorials with Vue

VueTut Easily build beautiful tutorials with Vue. ?? ⠀Docs ?? ⠀Tutorial/Demo Install npm i vue-tut Setup import VueTut from 'vue-tut'; import 'vue-tut

Electron Vue Window Toolkit 44 Jul 10, 2022
A webpack loader for markdown file transform to vue file.

vue-dotmd-loader A webpack loader for loader markdown file transform to vue file. 中文 Features: Support to import Vue file components and render them i

蓝月萧枫 10 May 18, 2022