1.0.3 • Published 5 years ago

vue-component-docs v1.0.3

Weekly downloads
1
License
MIT
Repository
-
Last release
5 years ago

Isolated Vue component development environment with a living style guide

Vue Styleguidist, 基础上增加了对组件依赖关系的分析,依赖分析使用了 call-dependency

npm.io

如何使用

1. 安装 vue-component-docs

npm install --save-dev vue-component-docs

2. 添加配置文件

vue-component-docs 默认情况下以项目根目录下的 styleguide.config.js 做为配置文件。也可以自定义配置文件名称,再通过 --config 参数指定即可。

详细的配置文档

Note: 在 Vue-styleguidist 在基础上,增加了四个配置,用于实现组件依赖分析 1. showDependency, Type: Boolean,是否展示引用组件的文件, 默认false。 2. dependencyTreeDirs, Type: Array, 分析引用关系的目录,必填(如果 showDependency 为 true)。 3. baseDir, Type: String, 计算文件相对路径的基础路径,必填。 4. fileExtensions, Type: Array, 分析引用关系的文件扩展类型, 默认 default: 'js', 'vue'

3. 添加 npm scripts

{
  "scripts": {
+    "docs:dev": "vue-docs server", // 本地开发,可通过 --config 指定配置文件,eg: "vue-docs server --config xxx.config.js"
+    "docs:build": "vue-docs build" // 构建静态文件
  }
}

然后,你可以本地启动了或者打包组件文档了!

4. 现在,你需要写组件文档了~

给组件写文档,需要做两部分工作: 1. 组件内添加注释:描述组件和 props Usage:

<script>
/**
 * 我是一个组件
 */
export default {
  props: {
    /**
     * @model
     */
    value: {
      type: String,
      required: true
    },
    /**
     * 大小
     */
    size: {
      type: Stirng,
      default: 'mini'
    }
  }
}
</script>
  1. 添加同名 markdown 文件,用于展示组件示例

    Usage:

    组件示例

    const data = {
      value: ''
    };
    const size = 'small';
    
    <hfe-demo
      v-model="data.value"
      :size="size"
    ></hfe-demo>

深入了解请查看 document your components

5. Cookbook

MIT License