精华内容
下载资源
问答
  • vue 生成组件 ue (Gue) Vue js component generator. Vue js组件生成器。 Features 特征 ???? Generate Vue component ????生成Vue组件 ???? Generate test file for the component ????生成组件的测试文件 ...

    vue 生成组件

    ue (Gue)

    Vue js component generator.

    gue

    Vue js组件生成器。

    Features

    特征

    • 📜 Generate Vue component

      📜生成Vue组件

    • 🧰 Generate test file for the component

      🧰生成组件的测试文件

    • ⚙️ Dynamic path for component

      ⚙️组件的动态路径

    • 📁 Configurable root directory for components and tests

      components用于组件和测试的可配置根目录

    • 📝 Custom templates for components and test

      📝用于组件和测试的自定义模板

    正在安装 (Installing)

    Note that this package is published under name of vue-gue

    请注意,此软件包以vue-gue名称发布

    npm i -g vue-gue

    入门 (Getting started)

    Head over to root of your project in terminal, say you want to create a component named footer:

    在终端中转到项目的根目录,说您想创建一个名为footer的组件:

    gue footer

    This will generate footer component in ./src/components/footer.vue

    这将在./src/components/footer.vue生成footer组件

    更改组件目录 (Change directory of component)

    You can define a directory which you want your component to be generated in.

    您可以定义要在其中生成组件的目录。

    gue tab ./menu

    This will generate tab component in ./menu/tab.vue

    这将在./menu/tab.vue生成tab组件

    Consider behavior of directory parameter when you have a config file and you don't. details For a consistent way to change root directory of components see config.

    当您拥有配置文件而没有配置文件时,请考虑目录参数的行为。 详细信息有关更改组件根目录的一致方法,请参见config

    生成测试文件 (Generate test file)

    Now if you want a component and also it's corresponding unit test file you can do:

    现在,如果您需要一个组件及其对应的单元测试文件,则可以执行以下操作:

    gue footer -u

    This will generate footer component in ./src/components/footer.vue and also a test file in ./tests/unit/footer.js

    这将产生footer在组件./src/components/footer.vue并在测试文件./tests/unit/footer.js

    To change any of these directories see config

    要更改任何目录,请参阅config

    用法 (Usage)

    General usage is like:

    一般用法如下:

    gue <componentName> [directory] [options]
    • <componentName> is mandatory.

      <componentName>是必需的。

    • [directory] is optional, and is a relative path.

      [目录]是可选的,并且是相对路径。


      If you have a config file this will be a
      如果您有配置文件,这将是一个

      subdirectory of your componentRoot

      你的componentRoot的 subdirectory


      If you don't, then this will lead to generation of component in exact
      如果您不这样做,则将导致精确生成组件

      direcroty

      direcroty

    • [options] are optional, only available option is -u which will generate test file.

      [选项]是可选的,只有可用的选项是-u ,它将生成测试文件。

    配置文件 (Config file)

    Gue accepts a config file to change default settings. In root directory of project make a file gue.json, and Gue will automatically recognize and use it.

    Gue接受配置文件以更改默认设置。 在项目的根目录中,创建一个文件gue.json ,Gue将自动识别并使用它。

    选件 (Options)

    Here are available options for config file:

    以下是配置文件的可用选项:

    • componentRoot: root directory which components will be generated in. should be relative path.

      componentRoot :将在其中生成componentRoot根目录。应该是相对路径。

    • componentSource: path to custom component template.

      componentSource :自定义组件模板的路径。

    • unitRoot: directory which test will be generated in. should be a relative path.

      unitRoot :将在其中生成测试的目录。应为相对路径。

    • unitSource: path to custom test file template.

      unitSource :自定义测试文件模板的路径。

    An example of a config file with all options:

    具有所有选项的配置文件示例:

    {
      "componentRoot":"./front-end/src/components",
      "unitRoot":"./front-end/test",
      "componentSource":"./myTemplates/myVueTemplate.vue",
      "unitSource":"./myTemplates/myTestTemplate.js"
    }

    Now if you run gue to create a clock component in your project, it'll generate it in ./front-end/src/components/clock.vue. If you run following command in the same project:

    现在,如果运行./front-end/src/components/clock.vue在项目中创建一个clock组件,它将在./front-end/src/components/clock.vue生成它。 如果在同一项目中运行以下命令:

    gue title ./header

    Will generate ./front-end/src/components/header/title.vue

    将生成./front-end/src/components/header/title.vue

    自定义模板 (Custom templates)

    As said you can use custom templates in Gue, define path to them with componentSource and unitSource so that Gue will use them instead of it's default ones.

    如前所述,您可以在Gue中使用自定义模板,使用componentSourceunitSource定义它们的路径,以便Gue将使用它们而不是默认模板。

    变数 (Variables)

    In your component template you can use variable <%NAME%> and Gue will replace it with name of component when generating. And also in test template you use <%NAME%> and <%PATH%> which will be replaced with path where component is located, relative to path of test file. Here is an example of custom component template:

    在您的组件模板中,您可以使用变量<%NAME%>并且Gue在生成时会将其替换为组件名称。 同样在测试模板中,您使用<%NAME%><%PATH%> ,它们将被替换为相对于测试文件路径的组件所在的路径。 这是自定义组件模板的示例:

    <template>
      <div class="app">
        Hey I'm a component generated with Gue, my name is <%NAME%>
      </div>
    </template>
    
    export default {
    name: "<%NAME%>",
    data() {
      return {
        someData: "a sample"
      }
    }
    <style scoped>
    </style>

    To see other examples look at templates folder.

    要查看其他示例,请查看模板文件夹

    翻译自: https://vuejsexamples.com/vue-js-component-generator/

    vue 生成组件

    展开全文
  • vue组件为json文件 Vuedoc分析器 (The Vuedoc Parser) Generate a JSON documentation ... 为SFC Vue组件生成JSON文档。 安装 (Install) npm install --save @vuedoc/parser 特征 (Features) Extract the comp...

    vue中组件为json文件

    Vuedoc分析器 (The Vuedoc Parser)

    Generate a JSON documentation for a SFC Vue component.

    为SFC Vue组件生成JSON文档。

    安装 (Install)

    npm install --save @vuedoc/parser

    特征 (Features)

    • Extract the component name (from the name field or from the filename)

      提取组件名称(从名称字段或文件名中提取)

    • Extract the component description

      提取组件描述

    • Keywords Support: You can define your own keywords with the @ symbol like

      关键字支持:您可以使用@符号定义自己的关键字,例如



      @author Jon Snow

      @author Jon Snow

    • Extract component model

      提取组件模型

    • Extract component props

      提取道具

    • Extract component data

      提取组件数据

    • Extract computed properties with dependencies

      提取具有依赖性的计算属性

    • Extract component events

      提取组件事件

    • Extract component slots

      提取组件插槽

    • Extract component methods

      提取成分方法

    • Class Component Support

      类组件支持

    • Vue Property Decorator Support

      Vue属性装饰器支持

    • JSDoc Support (@param and

      JSDoc支持( @param



      @return tags)

      @return标签)

    选件 (Options)

    namedescription
    filenameThe filename to parse. Required unless filecontent is passed
    filecontentThe file content to parse. Required unless filename is passed
    encodingThe file encoding. Default is 'utf8'
    featuresThe component features to parse and extract.
    Default features: ['name', 'description', 'keywords', 'slots', 'model', 'props', 'data', 'computed', 'events', 'methods']
    loadersUse this option to define custom loaders for specific languages
    defaultMethodVisibilityCan be set to 'public' (default), 'protected', or 'private'
    ignoredVisibilitiesList of ignored visibilities. Default: ['protected', 'private']
    stringifySet to true to disable parsing of literal values and stringify literal values. Default: false
    名称 描述
    文档名称 要解析的文件名。 必需的 ,除非filecontent传递
    文件内容 要解析的文件内容。 除非传递filename否则为必需
    编码方式 文件编码。 默认为'utf8'
    特征 该组件具有解析和提取功能。
    默认功能: ['name', 'description', 'keywords', 'slots', 'model', 'props', 'data', 'computed', 'events', 'methods']
    装载机 使用此选项可以为特定语言定义自定义加载程序
    defaultMethodVisibility 可以设置为'public' ( 默认 ), 'protected''private'
    被忽略的可能性 忽略的可见性列表。 默认值: ['protected', 'private']
    串化 设置为true将禁用对文字值的解析并对文字值进行字符串化。 默认值: false

    Note for stringify option

    注意stringify选项

    By default Vuedoc Parser parses literal values defined in the source code. This means:

    默认情况下,Vuedoc Parser解析源代码中定义的文字值。 这表示:

    const binVar = 0b111110111 // will be parsed as binVar = 503
    const numVar = 1_000_000_000 // will be parsed as numVar = 1000000000

    To preserve literal values, set the stringify option to true.

    要保留文字值,请将stringify选项设置为true

    用法 (Usage)

    See test/fixtures/checkbox.vue for an Vue Component decoration example.

    有关Vue组件装饰示例,请参见test / fixtures / checkbox.vue

    const Vuedoc = require('@vuedoc/parser')
    const options = {
      filename: 'test/fixtures/checkbox.vue'
    }
    
    Vuedoc.parse(options)
      .then((component) => console.log(component))
      .catch((err) => console.error(err))

    This will print this JSON output:

    这将打印此JSON输出:

    {
      "name": "checkbox" // The component name
      "description": "A simple checkbox component" // The component description
      // Attached component keywords
      "keywords": [
        { "name": "author", "description": "Sébastien" }
      ],
      "props": [ ... ],
      "data": [ ... ],
      "computed": [ ... ],
      "slots": [ ... ],
      "events": [ ... ],
      "methods": [ ... ]
    }

    See test/fixtures/checkbox-result.json for the complete result.

    有关完整结果,请参见test / fixtures / checkbox-result.json

    句法 (Syntax)

    添加组件名称 (Add component name)

    By default, Vuedoc Parser use the component's filename to generate the component name.

    默认情况下,Vuedoc Parser使用组件的文件名来生成组件名称。

    To set a custom name, use the name field like:

    要设置自定义名称,请使用name字段,例如:

    export default {
      name: 'my-checkbox'
    }

    You can also use the @name keyword to set the component name:

    您还可以使用@name关键字设置组件名称:

    /**
     * @name my-checkbox
     */
    export default {
      // ...
    }

    添加组件说明 (Add component description)

    To add a component description, just add a comment before the export default statement like:

    要添加组件描述,只需在export default语句之前添加一个注释,例如:

    /**
     * Component description
     */
    export default {
      ...
    }

    注释模型,道具,数据和计算出的属性 (Annotate model, props, data and computed properties)

    To document props, data or computed properties, use comments like:

    要记录道具,数据或计算的属性,请使用如下注释:

    export default {
      props: {
        /**
         * Component ID
         */
        id: {
          type: String,
          required: true
        }
      },
      data () {
        return {
          /**
           * Indicates that the control is checked
           */
          isChecked: false
        }
      },
      computed: {
        /**
         * Indicates that the control is selected
         */
        selected () {
          return this.isChecked
        }
      }
    }

    Vuedoc Parser will automatically extract required and default values for properties and computed properties dependencies. It will also detect type for each defined data field.

    Vuedoc Parser将自动提取属性和计算的属性依赖项的required值和default值。 它还将检测每个定义的数据字段的类型。

    You can set a custom default value of an prop by using the keyword @default.

    您可以使用关键字@default来设置道具的自定义默认值。

    export default {
      props: {
        /**
         * Custom default value
         * @default { anything: 'custom default value' }
         */
        custom: {
          type: String,
          default: () => {
            // complex code
            return anythingExpression()
          }
        }
      }
    }

    To document a v-model prop, a proper way is to use the Vue's model field if you use Vue +2.2.0.

    要记录v-model道具,正确的方法是如果使用Vue +2.2.0,则使用Vue的模型字段

    export default {
      /**
       * Use `v-model` to define a reactive value of the checkbox
       */
      model: {
        prop: 'checked',
        event: 'change'
      }
    }

    You can also use the @model keyword on a prop if you use an old Vue version:

    如果您使用旧的Vue版本,也可以在@model上使用@model关键字:

    export default {
      props: {
        /**
         * The checkbox model
         * @model
         */
        model: {
          type: Array,
          required: true
        }
      }
    }

    To document Vue array string props, just attach a Vuedoc comment to each prop:

    要记录Vue数组字符串道具,只需在每个道具上附加一个Vuedoc注释:

    export default {
      props: [
        /**
         * Checkbox ID
         */
        'id',
    
        /**
         * The checkbox model
         */
        'value'
      ]
    }

    By default, all extracted things have the public visibility. To change this for one entry, add @protected or @private keyword.

    默认情况下,所有提取的内容都具有public可见性。 要更改一项,请添加@protected@private关键字。

    export default {
      data: () => ({
        /**
         * This will be ignored on parsing
         * @private
         */
        isChecked: false
      })
    }

    注释方法,事件和位置 (Annotate methods, events and slots)

    To document methods or events, just add comments before:

    要记录方法或事件,只需在以下位置添加注释:

    export default {
      methods: {
        /**
         * Submit form
         */
        check () {
          /**
           * Emit the `input` event on submit
           */
          this.$emit('input', true)
        }
      }
    }

    Vuedoc Parser automatically extracts events from component hooks:

    Vuedoc Parser会自动从组件挂钩中提取事件:

    export default {
      created () {
        /**
         * Emit on Vue `created` hook
         */
        this.$emit('created', true)
      }
    }

    Use the JSDoc @param and @return tags to define parameters and returning type:

    使用JSDoc @param@return标记定义参数和返回类型:

    export default {
      methods: {
        /**
         * Submit form
         *
         * @param {object} data - Data to submit
         * @return {boolean} true on success; otherwise, false
         */
        submit (data) {
          /**
           * Emit the `loading` event on submit
           *
           * @arg {boolean} status - The loading status
           */
          this.$emit('loading', true)
    
          return true
        }
      }
    }

    Note: @arg is an alias of @param

    注意: @arg@param的别名

    The parser is also able to extract events and slots from template:

    解析器还能够从模板中提取事件和插槽:

    <template>
      <div>
        <!-- Emit the `input` event on submit -->
        <button @click="$emit('input', $event)">Submit</button>
        <!-- Default slot -->
        <slot></slot>
        <!-- Use this slot to set the checkbox label -->
        <slot name="label">Unnamed checkbox</slot>
        <!--
          Slot with keywords and
          multiline description
    
          @prop {User} user - The current user
          @prop {UserProfile} profile - The current user's profile
        -->
        <slot name="header" v-bind:user="user" v-bind:profile="profile"/>
      </div>
    </template>

    Usage with non primitive name

    非原始名称的用法

    You can use special keywords @method and @event for non primitive name:

    您可以将特殊关键字@method@event用作非原始名称:

    <script>
      const METHODS = {
        CLOSE: 'closeModal'
      }
    
      const EVENTS = {
        CLOSE: 'close'
      }
    
      export default {
        methods: {
          /**
            * Close modal
            * @method closeModal
            */
          [METHODS.CLOSE] () {
            /**
              * Emit the `close` event on click
              * @event close
              */
            this.$emit(EVENTS.CLOSE, true)
          }
        }
      }
    </script>

    注释渲染功能中定义的插槽 (Annotate slots defined in Render Functions)

    To annotate slots defined in Render Functions, just attach the keyword @slot to the component definition:

    要注释在“渲染功能”中定义的插槽,只需将关键字@slot附加到组件定义:

    /**
     * A functional component with slots defined in render function
     * @slot title - A title slot
     * @slot default - A default slot
     */
    export default {
      functional: true,
      render(h, { slots }) {
        return h('div', [
          h('h1', slots().title),
          h('p', slots().default)
        ])
      }
    }

    You can also use the keyword @slot to define dynamic slots on template:

    您也可以使用关键字@slot在模板上定义动态广告位:

    <template>
      <div>
        <template v-for="name in ['title', 'default']">
          <!--
            @slot title - A title slot
            @slot default - A default slot
          -->
          <slot :name="name" :slot="name"></slot>
        </template>
      </div>
    </template>

    关键字提取 (Keywords Extraction)

    You can attach keywords to any comment and then extract them using the parser.

    您可以将关键字附加到任何注释,然后使用解析器将其提取。

    Usage

    用法

    /**
     * Component description
     *
     * @author Arya Stark
     * @license MIT
     */
    export default { ... }

    Note that the description must alway appear before keywords definition

    请注意,描述必须始终出现在关键字定义之前

    Parsing result:

    解析结果:

    {
      "name": "my-checkbox",
      "description": "Component description",
      "keywords": [
        {
          "name": "author",
          "description": "Arya Stark"
        },
        {
          "name": "license",
          "description": "MIT"
        }
      ]
    }

    使用Mixins (Working with Mixins)

    Since Vuedoc Parser don't perform I/O operations, it completely ignores the mixins property.

    由于Vuedoc Parser不执行I / O操作,因此它将完全忽略mixins属性。

    To parse a mixin, you need to parse its file as a standalone component and then merge the parsing result with the result of the initial component:

    要解析mixin,您需要将其文件解析为一个独立的组件,然后将解析结果与初始组件的结果合并:

    const Vuedoc = require('@vuedoc/parser')
    const merge = require('deepmerge')
    
    const parsers = [
      Vuedoc.parse({ filename: 'mixinFile.js' })
      Vuedoc.parse({ filename: 'componentUsingMixin.vue' })
    ]
    
    Promise.all(parsers)
      .then(merge.all)
      .then((mergedParsingResult) => console.log(mergedParsingResult))
      .catch((err) => console.error(err))

    Using the keyword @mixin

    使用关键字@mixin

    You can use the special keyword @mixin to force parsing named exported component:

    您可以使用特殊关键字@mixin强制解析命名的导出组件:

    import Vue from 'vue';
    
    /**
     * @mixin
     */
    export const InputMixin = Vue.extend({
      props: {
        id: String,
        Value: [ Boolean, Number, String ]
      }
    });

    使用options.features解析控件 (Parsing control with options.features)

    options.features lets you select which Vue Features you want to parse and extract.

    options.features使您可以选择要解析和提取的Vue功能。

    The default value is defined by Vuedoc.Parser.SUPPORTED_FEATURES array.

    默认值由Vuedoc.Parser.SUPPORTED_FEATURES数组定义。

    Usage

    用法

    Only parse name, props, computed properties, slots and events:

    仅解析namepropscomputed propertiesslotsevents

    const Vuedoc = require('@vuedoc/parser')
    
    const options = {
      filename: 'test/fixtures/checkbox.vue',
      features: [ 'name', 'props', 'computed', 'slots', 'events' ]
    }
    
    Vuedoc.parse(options)
      .then((component) => Object.keys(component))
      .then((keys) => console.log(keys))
      // => [ 'name', 'props', 'computed', 'slots', 'events' ]

    Parse all features except data:

    解析除data外的所有功能:

    const Vuedoc = require('@vuedoc/parser')
    
    const options = {
      filename: 'test/fixtures/checkbox.vue',
      features: Vuedoc.Parser.SUPPORTED_FEATURES.filter((feature) => feature !== 'data')
    }
    
    Vuedoc.parse(options)
      .then((component) => Object.keys(component))
      .then((keys) => console.log(keys))
      // => [ 'name', 'description', 'keywords', 'model',
      //      'props', 'computed', 'events', 'methods', 'slots' ]

    语言处理 (Language Processing)

    加载程序API (Loader API)

    abstract class Loader {
      public static extend(loaderName: string, loaderClass: Loader);
      public abstract load(source: string): Promise<void>;
      public emitTemplate(source: string): Promise<void>;
      public emitScript(source: string): Promise<void>;
      public emitErrors(errors: Array<string>): Promise<void>;
      public pipe(loaderName: string, source: string): Promise<void>;
    }

    内置装载机 (Build-in loaders)

    LanguageLoad by default?Package
    HTMLYes@vuedoc/parser/loader/html
    JavaScriptYes@vuedoc/parser/loader/javascript
    PugNo@vuedoc/parser/loader/pug
    TypeScriptNo@vuedoc/parser/loader/typescript
    VueYes@vuedoc/parser/loader/vue
    语言 默认加载?
    HTML @ vuedoc / parser / loader / html
    JavaScript @ vuedoc / parser / loader / javascript
    哈巴狗 没有 @ vuedoc /解析器/加载器/ pug
    打字稿 没有 @ vuedoc /解析器/加载器/打字稿
    Vue @ vuedoc /解析器/加载器/ vue

    TypeScript的用法 (TypeScript usage)

    The Vuedoc Parser package contains a loader for TypeScript. To use it, you need to:

    Vuedoc Parser软件包包含TypeScript的加载程序。 要使用它,您需要:

    • install typescript and @types/node dependencies according the

      根据安装安装typescript@types/node依赖项



      official documentation

      官方文件

    • import and load the loader @vuedoc/parser/loader/typescript

      导入并加载加载程序@vuedoc/parser/loader/typescript

    const Vuedoc = require('@vuedoc/parser')
    const TypeScriptLoader = require('@vuedoc/parser/loader/typescript')
    
    const options = {
      filename: 'DatePicker.ts',
      loaders: [
        /**
         * Register TypeScriptLoader
         * Note that the name of the loader is either the extension
         * of the file or the value of the attribute `lang`
         */
        Vuedoc.Loader.extend('ts', TypeScriptLoader)
      ]
    }
    
    Vuedoc.parse(options).then((component) => {
      console.log(component)
    })

    创建一个自定义加载器 (Create a custom loader)

    The example below uses the abstract Vuedoc.Loader class to create a specialized class to handle a template with the CoffeeScript language. It uses the Pug language for templating:

    下面的示例使用抽象的Vuedoc.Loader类创建专门的类来处理使用CoffeeScript语言的模板。 它使用Pug语言进行模板制作:

    const Vuedoc = require('@vuedoc/parser')
    const PugLoader = require('@vuedoc/parser/loader/pug')
    const CoffeeScript = require('coffeescript')
    
    class CoffeeScriptLoader extends Vuedoc.Loader {
      load (source) {
        const outputText = CoffeeScript.compile(source);
    
        // don't forget the return here
        return this.emitScript(outputText);
      }
    }
    
    const options = {
      filecontent: `
        <template lang="pug">
          div.page
            h1 Vuedoc Parser with Pug
            // Use this slot to define a subtitle
            slot(name='subtitle')
        </template>
    
        <script lang="coffee">
          ###
          # Description of MyInput component
          ###
          export default
            name: 'MyInput'
        </script>
      `,
      loaders: [
        /**
         * Register CoffeeScriptLoader
         * Note that the name of the loader is either the extension
         * of the file or the value of the attribute `lang`
         */
        Vuedoc.Loader.extend('coffee', CoffeeScriptLoader),
    
        // Register the Pug loader
        Vuedoc.Loader.extend('pug', PugLoader)
      ]
    }
    
    Vuedoc.parse(options).then((component) => {
      console.log(component)
    })

    Output

    输出量

    {
      name: 'MyInput',
      description: 'Description of MyInput component',
      slots: [
        {
          kind: 'slot',
          visibility: 'public',
          description: 'Use this slot to define a subtitle',
          keywords: [],
          name: 'subtitle',
          props: []
        }
      ],
      // ...
    }

    解析输出接口 (Parsing Output Interface)

    type ParsingOutput = {
      name: string;               // Component name
      description: string;        // Component description
      inheritAttrs: boolean;
      keywords: Keyword[];        // Attached component keywords
      model?: ModelEntry;         // Component model
      slots: SlotEntry[];         // Component slots
      props: PropEntry[];         // Component props
      data: DataEntry[];          // Component data
      computed: ComputedEntry[];  // Computed properties
      events: EventEntry[];       // Events
      methods: MethodEntry[];     // Component methods
      errors: string[];           // Syntax and parsing errors
    };
    
    enum NativeTypeEnum {
      string,
      number,
      bigint,
      boolean,
      bigint,
      any,                        // for an explicit `null` or `undefined` values
      object,                     // for an array or an object
      CallExpression              // for a value like `new Date()`
    };
    
    type Keyword = {
      name: string;
      description: string;
    }
    
    interface Entry {
      kind: 'computed' | 'data' | 'event' | 'method' | 'model' | 'prop' | 'slot';
      visibility: 'public' | 'protected' | 'private';
      description: string;
      keywords: Keyword[];
    }
    
    interface ModelEntry extends Entry {
      kind: 'model';
      prop: string;
      event: string;
    }
    
    interface SlotEntry extends Entry {
      kind: 'slot';
      name: string;
      props: SlotProp[];
    }
    
    type SlotProp = {
      name: string;
      type: string;
      description: string;
    };
    
    interface ModelEntry extends Entry {
      kind: 'model';
      prop: string;
      event: string;
    }
    
    interface PropEntry extends Entry {
      kind: 'prop';
      name: string;               // v-model when the @model keyword is attached
      type: string | string[];    // ex. Array, Object, String, [String, Number]
      nativeType: NativeTypeEnum;
      default?: string;
      required: boolean = false;
      describeModel: boolean;     // true when the @model keyword is attached
    }
    
    interface DataEntry extends Entry {
      kind: 'data';
      name: string;
      type: NativeTypeEnum;
      initial?: string;
    }
    
    interface ComputedEntry extends Entry {
      kind: 'computed';
      name: string;
      dependencies: string[];     // list of dependencies of the computed property
    }
    
    interface EventEntry extends Entry {
      kind: 'event';
      name: string;
      arguments: EventArgument[];
    }
    
    type EventArgument = {
      name: string;
      description: string;
      type: string;
    };
    
    interface MethodEntry extends Entry {
      kind: 'method';
      name: string;
      params: MethodParam[];
      return: MethodReturn;
    }
    
    type MethodParam = {
      type: string;
      name: string;
      description: string;
      defaultValue?: string;
    }
    
    type MethodReturn = {
      type: string = 'void';
      description: string;
    };

    翻译自: https://vuejsexamples.com/generate-a-json-documentation-for-a-vue-file-component/

    vue中组件为json文件

    展开全文
  • 动态生成组件 <!-- 动态组件由 vm 实例的 `componentId` property 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件 --> <...
    • 有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里实现类似tab页的效果:
    上述效果也可以通过 Vue 的 元素加一个特殊的 is attribute 来实现:
    	<!-- 组件会在 `currentTabComponent` 改变时改变 -->
    	<component v-bind:is="currentTabComponent"></component>
    
    • 在上述示例中,currentTabComponent 可以包括已注册组件的名字,或
      一个组件的选项对象
    你也可以通过v-bind给所有可能动态生成的组件绑定该属性
    <component v-bind:is="currentTabComponent" data="dataSource"></component>
    

    所有动态生成的组件就都可以接收到这个属性绑定的值
    一般如果动态组件使用较多我可能会喜欢使用mixin进行混入,改天再出一个mixin教程吧~~

    is接收参数类型 string | Object

    异步组件

    在动态组件上使用 keep-alive
    当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。
    在这里插入图片描述
    你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent 实例。

    重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 元素将其动态组件包裹起来。
    	<!-- 失活的组件将会被缓存!-->
    	<keep-alive>
    	  <component v-bind:is="currentTabComponent"></component>
    	</keep-alive>
    

    来看看修改后的结果:
    在这里插入图片描述

    现在这个 Posts 标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。你可以在这个示例查阅到完整的代码。
    注意这个 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。
    参考vue官方文档
    动态组件
    https://cn.vuejs.org/v2/guide/components.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6

    异步组件
    https://cn.vuejs.org/v2/guide/components-dynamic-async.html

    展开全文
  • 公司现役组件库项目,公共资源或者新老项目切换仓库 ... |-- button.vue // 新增一个button组件,记得带上name |-- icon // 新增一个icon组件,记得带上name packages/index.js // 所有组件的入口 import

    公司现役组件库项目,公共资源或者新老项目切换仓库

    调整 src 目录结构

    |--src
    |-- App.vue
    |-- main.js
    |-- packages // 新建此文件夹用来存放组件
           |-- index.js  // 组件入口
           |-- button.vue  // 新增一个button组件,记得带上name
           |-- icon    // 新增一个icon组件,记得带上name
    

    packages/index.js

    // 所有组件的入口
    
    import Button from './button.vue'
    import Icon from './icon.vue'
    
    // 全局注册
    const install = Vue => {
    	Vue.component(Button.name, Button)
    	Vue.component(Icon.name, Icon)
    }
    
    // 防止使用者直接以<script></script>方式引入
    
    if (typeof window.Vue !== 'undefined') {
    	install(Vue) // 直接通过script方式引入组件
    }
    export default {
    	install
    }
    

    测试组件

    import okrUi from './packages/index'
    Vue.use(okrUi)
    

    app.vue 直接使用

    <okr-icon></okr-icon>
    <okt-btn></okt-btn>
    

    接下来就简单了,只要在 packages 中新增组件就可以,在 index.js 中注册即可

    关于发布

    okr-ui 目录下新建.npmignore

    src // 源码不发
    public // 公用资源不发
    test // 测试代码不发
    

    package.json

      "private": false, // 私有的改成false
      "version": "0.1.0", // 版本必须每次不一样
    

    测试组件

    https://vue-test-utils.vuejs.org/zh/installation/testing-single-file-components-with-karma.html

    Karma 是一个启动浏览器运行测试并生成报告的测试运行器。 Mocha 框架撰写测试,同时用 chai 作为断言库。

    • 安装依赖
      npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha
    • 安装 chai
      npm install --save-dev karma-chai

      官方的配置案例

    var webpackConfig = require('./webpack.config.js')
    
    module.exports = function(config) {
    	config.set({
    		frameworks: ['mocha'],
    
    		files: ['test/**/*.spec.js'], // 匹配所有的spec文件
    
    		preprocessors: {
    			'**/*.spec.js': ['webpack', 'sourcemap']
    		},
    		webpack: webpackConfig,
    		reporters: ['spec'],
    		browsers: ['ChromeHeadless'] // 打开一个无头的浏览器, 单纯用Chrome会闪动
    	})
    }
    

    组件打包

    package.json 新增命令
    "lib":"vue-cli-service build --target lib -name okr-ui ./src/packages/index.js"
    添加引用入口 package.json

    • 打包后所有的组件都在 umd.min.js 中
      "main":"./dist/okr-ui.umd.min.js"

    生成组件文档

    使用 vuepress

    • 根目录下新建 doc 文件夹

      初始化
      npm init -y
      安装 vuepress
      npm i vuepress -D
      配置 packages.json 新增 script

        "docs:dev":"vuepress dev docs",
        "docs:build":"vuepress build docs"
    

    安装依赖工具
    cnpm install element-ui highlight.js node-sass sass-loader --save

    配置 vue-press

    1. doc 根目录下新建 docs(固定)
    2. docs 下新建 README.md(固定)
    3. docs 下新建 components 用于存放组件描述文件(固定)
    4. components 下新建 button.md(此处以 button 组件为例)

      README.md(内容格式固定)

    ---
    home: true
    actionText: 欢迎 →
    actionLink: /components/button  // 以button为例
    features:
    - title: okr组件库  // 名称
      details: okr组件库,用公共组件存放,新老项目过度组件存放 // 组件库描述
    ---
    

    button.md
    ## 按钮组件
    运行命令
    npm run docs:dev

    跑起来的内容是不是很熟悉???但是比较丑是不是?

    美化组件库文档界面

    1. 在 docs 下新建文件夹.vuepress
    2. 在.vuepress 中新增配置文件 config.js
    module.exports = {
    	title: 'okr-ui', // 网站标题
    	description: 'okr公共组件库', // 网站描述
    	dest: './build', // 设置输出目录
    	port: '8088', // 端口
    	themeConfig: {
    		// 主题配置
    		nav: [
    			{
    				text: '主页',
    				link: '/'
    			} // 导航条
    		],
    		sidebar: {
    			// 侧边栏配置
    			'/components/': [
    				{
    					collapsable: true, // 默认折叠
    					children: ['button']
    				}
    			]
    		}
    	}
    }
    
    1. 在.vuepress 文件里新建 styles 文件夹,并在 styles 中新建文件 palette.styl(固定)
    $codeBgColor
    	=
    	#fafafa
    	$accentColor=#3eaf7c
    	$textColor=#2c3e50
    	$borderColor=#eaecef
    	$arrowBgColor=#ccc
    	$badgeTipColor=#42b983
    	$badgeWarningColor=darken(#ffe564,35%)
    	$badgeErrorColor=#da5961
    	.content
    	pre {
    	margin: 0 !important;
    }
    .theme-default-content:not(.custom) {
    	max-width: 1000px !important;
    }
    
    1. .vuepress 目录下新建 enhanceApp.js(固定)入口定义文件

      enhanceApp.js

    import Vue from 'vue'
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import hljs from 'highlight.js'
    import 'highlight.js/styles/googlecode.css'
    // 自定义指令
    Vue.directive('highlight', function (el) {
    	let blocks = el.querySelectorAll('pre code')
    	blocks.forEach(block => {
    		hljs.highlightBlock(block)
    	})
    })
    
    export default ({ Vue, options, router, siteData }) => {
    	Vue.use(Element)
    	// 变更20210310,解决build异常问题提
    	Vue.mixin({
    		mounted() {
    			import('okr-ui')
    				.then(function (m) {
    					Vue.use(m.default)
    				})
    				.then(() => {
    					import('okr-ui/dist/okr-ui.css') // 组件库样式
    				})
    		}
    	})
    }
    
    • okr-ui 没有安装怎么引用?
      • 去 okr-ui 根目录执行npm link 此命令是将该项目链接到全局
      • 然后在 docs 的文件中npm link okr-ui 此命令是将全局注册的 okr-ui 拉进来进行使用
      • 经过以上两步就能免发布使用了

    测试

    1. .vuepress 下新建 components,此文件加下皆为全局组件
    2. 新建 button 文件夹/button 文件夹/test.vue
    3. 在 docs 根目录下的 conponents 的 button.md 进行测试

      button.md
      <button-test></button-test> 这样就会去.vuepress 组件中找到 button/test.vue 组件(固定写法)

    运行命令 npm run docs:dev

    • corejs 丢失 npm i core-js@2
    • okr-ui 找不到???注意你的组件库中 package.json 中 main 属性有没有指定文件?

    测试真实组件库中的组件

    • 还记得刚才在 doc 文档库中已经引入了 okr-ui 了对吧,已经引用了吧?直接测试组件吧
    • 比如我们在 okr-ui 中写了 okr-btn 这个按钮组件吧?

      docs/.vuepress/components/button/test.vue
      <okt-btn></okt-btn> 看页面是不是有了?

    <template>
    	<div>
    		<okt-btn></okt-btn>
    	</div>
    </template>
    

    实现类似于 element-ui 组件库的文档体验

    在 .vuepress 下 components 中新建组件文档展示模板 demo-block.vue

    <template>
    	<div
    		class="demo-block"
    		:class="[blockClass, { hover: hovering }]"
    		@mouseenter="hovering = true"
    		@mouseleave="hovering = false"
    		ref="demoBlockContainer"
    	>
    		<div style="padding:24px">
    			<slot name="source"></slot>
    		</div>
    		<div class="meta" ref="meta">
    			<div class="description" v-if="$slots.default">
    				<slot></slot>
    			</div>
    			<div class="highlight">
    				<slot name="highlight"></slot>
    			</div>
    		</div>
    		<div class="demo-block-control" ref="control" @click="isExpanded = !isExpanded">
    			<transition name="arrow-slide">
    				<i :class="[iconClass, { hovering: hovering }]"></i>
    			</transition>
    			<transition name="text-slide">
    				<span v-show="hovering">{{ controlText }}</span>
    			</transition>
    		</div>
    	</div>
    </template>
    <style lang="scss">
    .demo-block {
    	border: solid 1px dashed;
    	border-radius: 3px;
    	transition: 0.2s;
    	&.hover {
    		box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
    	}
    	code {
    		font-family: Menlo, Monaco, Consolas, Courier, monospace;
    	}
    	.demo-button {
    		float: right;
    	}
    	.source {
    		padding: 24px;
    	}
    	.meta {
    		background-color: #fafafa;
    		border-top: solid 1px #eaeefb;
    		overflow: hidden;
    		height: 0;
    		transition: height 0.2s;
    	}
    	.description {
    		padding: 20px;
    		box-sizing: border-box;
    		border: solid 1px #ebebeb;
    		border-radius: 3px;
    		font-size: 14px;
    		line-height: 22px;
    		color: #666;
    		word-break: break-word;
    		margin: 10px;
    		background-color: #fff;
    	}
    	p {
    		margin: 0;
    		line-height: 26px;
    	}
    	::v-deep code {
    		color: #5e6d82;
    		background-color: #e6effb;
    		margin: 0 4px;
    		display: inline-block;
    		padding: 1px 5px;
    		font-size: 12px;
    		border-radius: 3px;
    		height: 18px;
    		line-height: 18px;
    	}
    }
    .highlight {
    	pre {
    		margin: 0;
    
    		code {
    			color: black !important;
    		}
    	}
    	code.hljs {
    		margin: 0;
    		border: none;
    		max-height: none;
    		border-radius: 0;
    		line-height: 1.8;
    		color: black;
    		&::before {
    			content: none;
    		}
    	}
    }
    .demo-block-control {
    	border-top: solid 1px #eaeefb;
    	height: 44px;
    	box-sizing: border-box;
    	background-color: #fff;
    	border-bottom-left-radius: 4px;
    	border-bottom-right-radius: 4px;
    	text-align: center;
    	margin-top: -1px;
    	color: #d3dce6;
    	cursor: pointer;
    	&.is-fixed {
    		position: fixed;
    		bottom: 0;
    		width: 868px;
    	}
    	i {
    		font-size: 16px;
    		line-height: 44px;
    		transition: 0.3s;
    		&.hovering {
    			transform: translate(-40px);
    		}
    	}
    	> span {
    		position: absolute;
    		transform: translate(-30px);
    		font-size: 14px;
    		line-height: 44px;
    		transition: 0.3s;
    		display: inline-block;
    	}
    	&:hover {
    		color: #409eff;
    		background-color: #f9fafc;
    	}
    	& .text-slide-enter,
    	& .text-slide-leave-active {
    		opacity: 0;
    		transform: translate(10px);
    	}
    	.control-button {
    		line-height: 26px;
    		position: absolute;
    		top: 0;
    		right: 0;
    		font-size: 14px;
    		padding-left: 5px;
    		padding-right: 25px;
    	}
    }
    </style>
    <script type="text/babel">
    export default {
    	name: 'DemoBlock',
    	data() {
    		return {
    			hovering: false,
    			isExpanded: false,
    			fixedControl: false,
    			scrollParent: null,
    			langConfig: {
    				'hide-text': '隐藏代码',
    				'show-text': '显示代码',
    				'button-text': '在线运行',
    				'tooltip-text': '前往jsfiddle.net 运行此示例'
    			}
    		}
    	},
    	props: {
    		jsfiddle: Object,
    		default() {
    			return {}
    		}
    	},
    	methods: {
    		scrollHandler() {
    			const { top, bottom, left } = this.$refs.meta.getBoundingClientRect()
    			this.fixedControl =
    				bottom > document.documentElement.clientHeight && top + 44 <= document.documentElement.clientHeight
    		},
    		removeScrollHandler() {
    			this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler)
    		}
    	},
    	computed: {
    		lang() {
    			return this.$route.path.split('/')[1]
    		},
    		blockClass() {
    			return `demo-${this.lang} demo-${this.$router.currentRoute.path.split('/').pop()}`
    		},
    		iconClass() {
    			return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
    		},
    		controlText() {
    			return this.isExpanded ? this.langConfig['hide-text'] : this.langConfig['show-text']
    		},
    		codeArea() {
    			return this.$refs['demoBlockContainer'].getElementsByClassName('meta')[0]
    		},
    		codeAreaHeight() {
    			if (this.$refs['demoBlockContainer'].getElementsByClassName('description').length > 0) {
    				return (
    					this.$refs['demoBlockContainer'].getElementsByClassName('description')[0].clientHeight +
    					this.$refs['demoBlockContainer'].getElementsByClassName('highlight')[0].clientHeight +
    					20
    				)
    			}
    			return this.$refs['demoBlockContainer'].getElementsByClassName('highlight')[0].clientHeight
    		}
    	},
    	watch: {
    		isExpanded(val) {
    			this.codeArea.style.height = val ? `${this.codeAreaHeight + 1}px` : '0'
    			if (!val) {
    				this.fixedControl = false
    				this.$refs.control.style.left = '0'
    				this.removeScrollHandler()
    				return
    			}
    			setTimeout(() => {
    				this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__warp')
    				this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler)
    				this.scrollHandler()
    			}, 200)
    		}
    	},
    	mounted() {
    		console.log(this.$refs.demoBlockContainer)
    		this.$nextTick(() => {
    			console.log(this.$refs['demoBlockContainer'])
    			let highlight = this.$refs['demoBlockContainer'].getElementsByClassName('highlight')[0]
    			if (this.$refs['demoBlockContainer'].getElementsByClassName('description').lenght === 0) {
    				highlight.style.width = '100%'
    				highlight.borderRight = 'none'
    			}
    		})
    	},
    	beforeDestroy() {
    		this.removeScrollHandler()
    	}
    }
    </script>
    
    

    在 docs/components 下
    使用模板/插槽

    重新运行代码,是不是体验很棒??

    代码地址

    git@github.com:sunhailiang/publish-ui.git

    展开全文
  • 前言 在我们团队开发时一定会有一些公共组件诞生出来,那么...npm的说话时:Vue-Styleguidist是Vue组件的样式指南生成器。它列出了组件,并根据Markdown文件显示了可编辑的实时使用示例。您可以使用它来生成静态HTML页
  • vue拖拽组件生成代码布局 VuePress (VuePress) Minimalistic docs ... 具有基于Vue组件的布局系统的简约文档生成器。 Minimalistic Vue-powered static site generator 简约的Vue供电的静态网站生成器 View d...
  • Vue组件文档自动化生成

    千次阅读 2020-05-20 12:22:12
    一个可以提供自动化文档的生成,并提供组件预览,这个库叫做 Vue Styleguidist 使用参考 使用Vue Styleguidist编写组件文档
  • Vue文件组件生成JSON文档。 目录 道具专用标签 道具输入界面 注释数据 注释计算的属性 注释方法 注释事件 注释广告位 忽略解析项目 关键字提取 支持的标签 使用Mixins 使用options.features解析控件 语言处理 ...
  • 生成组件道具的文档 生成组件数据的文档 生成计算属性及其相关性的文档 生成组件事件的文档 生成组件插槽的文档 生成组件方法的文档 支持JSDoc,类组件,Vue属性装饰器,TypeDoc 支持@description
  • 有关详细文档:vuese.org Overvi vuese vue组件文档的一站式解决方案,我们的支持者文档支持此项目有关详细文档:vuese.org概述Vuese自动为您的vue组件生成文档,并提供各种解决方案来生成组件文档以满足您的不同...
  • 使用form-create动态生成vue自定义组件和嵌套表单组件 [github]| [说明文档] maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreate.maker.create('i-button').props({ ...
  • 自动为您的vue组件生成文档,并提供各种解决方案来生成组件文档以满足您的不同需求。 @ vuese / cli 是一个非常易于使用的命令行工具。 如果你想快速构建一个文档站点为您的vue组件或只是想生成markdown为您的文档...
  • Vue动态生成表单组件vue-form-maker

    千次阅读 2018-12-25 10:30:52
    Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 整体组件布局方式借鉴了form-create的写法 在此表示感谢 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的...
  • Vue.Draggable 文档总结

    万次阅读 多人点赞 2018-04-03 21:38:15
    Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销...
  • 组件只做了简单的传值处理,...vue 使用组件 ——在外层用v-for 循环,传不同值进charts 即可 <!-- 传入对应的数据给子组件 --> id='charts +index' index=index xss=removed> <!-- 传入对应的数据给子
  • 阐明一个库,使您可以轻而易举地“了解”您的Vue组件。 演示:https://mattrothenberg.github.io/vue-elucidate-example演示Vi阐明一个库,使您可以轻而易举地“阐明”您的Vue组件。 演示:...
  • Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的render函数 要做这一个组件 其实并不难 看一下Vue官方示例 ...
  • AngularJS,React,Vue和Vanilla组件文档生成器。 安装 $ npm install @glorious/pitsby -g 用法 设置 Pitsby基于两种类型的文件: (pitsby.config.js) 负责告诉Pitsby文档文件在哪里,并通知应包含在文档中的...
  • vue动态生成表单组件vue-generate-form

    千次阅读 2018-12-25 13:04:50
    Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明所以要根据数据来生成表单 只能使用Vue的render函数要做这一个组件 其实并不难 看一下Vue官方示例 再找...
  • vue 签名组件

    千次阅读 2019-10-30 11:37:01
    临时帮朋友写个移动端的项目, 发现 它的项目中有个 pdf 文档的 签名功能, 也是折腾了一下签名组件 签名组件原理: 利用原生canvas 配合 移动端的事件, touchstart, touchend, touchmove, 进行 在canvas 画布上画线, ...
  • 1.静态资源要放在.vuepress/public目录下,比如创建一个assets/img/目录。把图片文件放在目录下面。 2.本地开发的时候,每次更新文件后,需要运行 vuepress dev .命令重新发布。 3.运行vuepress build .命令会编译...
  • vue pdf组件调节大小 Vue可移动 (Vue Moveable) A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable. 创建可移动,可拖动,可调整大小,可缩放,可旋转,可变形的Vue组件...
  • Pimcore使用WYSIWYG编辑器来编辑与Vue组件不兼容的文档。 为了缓解这种情况,此生成器在前端打开一个网页,解析其内容,然后创建Pimcore Areabricks。 这是使用Vue中的数据属性完成的。 创建这些Areabricks可使编辑...
  • 使用form-create动态生成vue自定义组件和嵌套表单组件 [github]| [说明文档] 示例 let rule = [ { type:'row', children:[ { type:'i-col', props:{ span:12 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,762
精华内容 8,704
关键字:

vue生成组件文档

vue 订阅