vue中如何生成组件的文档说明

摘要:
对于vue组件,编写相应的组件文档,并使用vuePress直接通过markdown文件动态生成相应的组件演示、代码预览和描述。准备前安装vuepress和npmivuepress-D。然后安装vuepress插件演示容器和npmivuepress-plugin-demo-container-D。单元exports={title:“TestComponent”,//左上角的title description:“Justatestdemo.”,//元内容插件:['demo container'],//引用的“vuepress插件演示容器”插件themeConfig:{//主题配置,您可以直接查看文档侧边栏:[//侧边栏配置{title:“UI组件”,路径:'/UI/',可折叠:true,子项:['/UI/test']},{title:“businesscomponent”,路径:“/Function/”,collapsable:true,children:['/Function/test']}}enhanceApp.js。“/˃exportdefault{}```:::查看效果npmrundocs:dev,直接查看组件文档。到目前为止,简单的组件预览文档基本可以使用,其他所需的功能可以根据官网的api进行配置。

针对vue组件,编写对应的组件文档

  • 使用vuepress直接通过markdown文件去动态生成对应的组件演示和代码预览以及说明。

准备工作

  • 先安装vuepressnpm i vuepress -D
  • 接着安装vuepress-plugin-demo-containernpm i vuepress-plugin-demo-container -D
  • 整理项目目录:

    root

    docs

    .vuepress

    config.js

    enhanceApp.js

    ui

    test.md

    bussiness

    test.md

    src
    ...

  • package.json中新增命令。
    "scripts": {
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
    }
    

主要配置

  1. config.js

    module.exports = {
        title: 'Test Component', // 左上角的标题
        description: 'Just a test demo.', // meta内容
        plugins: ['demo-container'], // 引用的`vuepress-plugin-demo-container`插件
        themeConfig: { // 主题配置,可以直接看文档
            sidebar: [ // 侧边栏配置
                {
                    title: 'UI组件',
                    path: '/UI/',
                    collapsable: true,
                    children: [
                        '/UI/test'
                    ]
                },
                {
                    title: '业务组件',
                    path: '/Function/',
                    collapsable: true,
                    children: [
                        '/Function/test'
                    ]
                }
            ]
        }
    }
    
  2. enhanceApp.js

    // 通过该文件,把需要用的组件进行全局的注册,因为在markdown中的文件不能使用import引入组件,必须要提前注册好全局的组件
    import HelloWorld from '../../src/components/HelloWorld.vue';
    
    export default ({ 
        Vue
    }) => {
        Vue.component('HelloWorld', HelloWorld);
    }
    // 昨天发现同时注册多个组件的时候好像有问题,只好换一种方式来实现,将组件通过一个文件抛出,然后使用Vue.use去完成组件的注册
    import components from '../../src/components/index.js';
    const customPlugin = {};
    customPlugin.install = function(Vue, options = {}) {
        const { components } = options;
        for(let key in components) {
            if(Object.prototype.hasOwnProperty.call(components, key)) {
                Vue.component(key, components[key]);
            }
        }
    }
    
    export default ({ 
        Vue
    }) => {
        Vue.use(customPlugin { components })
    }    
    
  3. test.md::: demo [some comments]开始标志,可以在demo后面加一些注释,:::结尾标志,用了这个开始结尾标志的就会自动去渲染它的示例以及代码块,script标签中一定要有export default {},不然不会展示它的示例效果。为了展示这块代码,所以把三个`号分开了,实际写的时候是要挨在一起的。

    ### Test2
    
    ::: demo
    ` ` `vue
    <template>
        <HelloWorld msg="Nice to meet you, Jane!" />
    </template>
    <script>
    export default {}
    </script>
    ` ` `
    :::
    

查看效果

  • npm run docs:dev,直接查看你的组件文档,至此,简单的组件预览文档已经可以基本使用了,其它需要的功能可以自己对着官网的api去配置。

免责声明:文章转载自《vue中如何生成组件的文档说明》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Maven高级,依赖传递和解决冲突,版本锁定,提取统一版本号PHP面试题之优化下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

深入理解vue的watch

深入理解vue的watch vue中的wactch可以监听到data的变化,执行定义的回调,在某些场景是很有用的,本文将深入源码揭开watch额面纱 前言 watch的使用 watch的多种使用方式 传值函数 传值数组 传值字符串 传值对象 传值对象的其他作用 源码分析watch 初始watch 创建Watcher watchWatcher 立即...

VUE JS 闹钟函数

心跳函数:秒表 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 clearInterval() 方法可取消由 s...

Vue.js 诞生及发展史

前言 前端现在可以说是百花齐放,开发的效率是不断的提升,前端的三大主流框架 Vue 、Angular 、React 其中 Angular 是2009年诞生的,一开始出来挺火的,后面随着版本的升级,Angular的变化比较大,增加了使用学习的成本,渐渐的失去了优势,React和Vue的原理基本上是一样的,诞生比Vue早,所以Vue结合了Angular和Rea...

Vue项目的全局环境设置

webpack自动有三种模式可以在package.json文件中看到 第一种方法 通过.env文件设置 1 .env.development文件,这是开发环境下的配置文件。 2 .env.production 文件,这是生产环境下的配置文件。 3 .env 文件,这是一些全局的属性。 直接新建文件名为以上的文件,在输入npm run dev时会自动执行de...

vue中如何实现pdf文件预览?

  今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe、embed、vueshowpdf(测试了不咋好用)、pdf等,本文说一下pdf插件的使用过程。 说明:iframe标签这种,对于有...

Vue中进行断点调试的两种方式(使用外部浏览器和VsCode Debug for Chrome 插件)

场景 在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点,然后逐步或者逐过程进行调试。 但是在Vue中如果想要进行调试时,如果是在js中调试的话,可以直接添加一个debugger,然后在浏览器中打开检查进行断点调试。 但是如果在vue界面的话则没法逐步查看变量的值。 比如: 在Vue页面中,点击搜索按钮时 <el-butt...