精华内容
下载资源
问答
  • vue中组件为json文件_为Vue文件组件生成JSON文档
    千次阅读
    2020-07-29 14:13:55

    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文件

    更多相关内容
  • 今天小编就为大家分享一篇在vue中读取本地Json文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本文通过实例代码给大家详细介绍了Vue2.5通过json文件读取数据的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • 主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下
  • 下面小编就为大家分享一篇Vue-cli项目获取本地json文件数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章主要介绍了详解vue 模拟后台数据(加载本地json文件)调试,具有一定的参考价值,有兴趣的可以了解一下
  • 最新的vue读取本地json文件数据,下载解压,运行cmd,cd到这个目录,运行npm yun dev,然后直接访问就能获取数据
  • json文件 vue代码 在JS文件中导入使用一样 <script> //引入文件 import LeftNavigationlist from '~/menu.json' export default { data() { return { LeftNavigationlist : '' } }, mounted() { ...

    Vue中怎样获取json文件中的数据、Vue中怎样获取JS文件中的数据、Vue中怎样获取JS文件中的JSON为undefined

    Vue获取json中的数据

    json文件
    在这里插入图片描述
    vue代码

    <script>
    //引入文件
    import LeftNavigationlist from '~/menu.json'
    
    
    export default {
        data() {
            return {
                LeftNavigationlist : ''
            }
        },
        mounted() {
            this.LeftNavigationlist = LeftNavigationlist.LeftNavigationlist;
        },
    };
    </script>
    

    在JS文件中使用与VUE一样

    Vue获取JS文件中的JSON数据

    JS文件

    var testb = {
    "a": [
        1,2,3
      ]
    }
    

    这样写在vue文件中获取js文件json出来为 undefined

    vue文件

    <script>
    //引入文件
    import test from './test.js'
    
    
    export default {
        data() {
            return {
                test : ''
            }
        },
        mounted() {
            this.test= test.testb;
            alert(this.test);
            //弹出 undefined 
        },
    };
    </script>
    

    解决办法
    将JSON使用 module.exports = { }包裹起来

    module.exports = { 
    	"testb" = {
    	"a": [
    	    1,2,3
    	  ]
    	}
    }
    //这样就可以获取到了
    
    展开全文
  • 本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,...const appData = require('../data.json') // 加载本地json文件 const seller = appData.seller // 获取对应本地数据 const goods = appData.goods
  • 主要介绍了vue实现引入本地json的方法,结合实例形式分析了vue.js加载本地json文件及解析json数据相关操作技巧,需要的朋友可以参考下
  • 本文主要讲v-resourse 获取json数据并传递到DOM,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.demo目录,不要管index.html和index.js 2.html页面 vue-resourse-josn1.1.html展示json中数据 <!...
  • Vue中怎样获取json文件中数据

    千次阅读 2020-12-19 10:26:34
    场景访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json,现在在组件listcate.vue需要获取json数据json文件内容: 文件位置: 实现musictype.json{"currentType":[1,2,11,21,22,23,24,25]}...

    场景

    访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中,

    现在在组件listcate.vue需要获取json数据。

    json文件内容:

    文件位置:

    实现

    musictype.json

    {

    "currentType":[1,2,11,21,22,23,24,25]

    }

    listcate.vue

    注:

    是通过import MusicType from "../assets/data/musictype.json"  引入的

    然后通过  this.musicTypeJSON = MusicType.currentType 赋值给musicTypeJSON,然后通过

    循环遍历取值。

    然后再ListCast_List.vue中直接通过:

    props:{

    musicType:{

    type:[String,Number],

    default:1

    }

    },

    mounted(){

    const ListCateUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.musicType +"&size=3&offset=0"

    this.$axios.get(ListCateUrl)

    .then(res => {

    console.log(res.data)

    this.listCateData = res.data

    })

    .catch(error => {

    console.log(error);

    })

    }

    }

    获取并使用。

    展开全文
  • 修改main.js文件中axios的配置: 在发送请求前将数据用qs模块转化 修改请求头的Content-Type=’application/x-www-form-urlencoded’ 具体配置如下: import axios from 'axios' import qs from 'qs' // 添加请求...
  • 然后我了一个demo $(document).ready(function(){ $.ajax({ type:post, url:, async:true, data:{ }, dataType:json, success:function(data){ var a=new Vue({ el:#detail-info-id, data:{ data:[ ...
  • 自己在做个vue小demo的时候,想模拟从服务器获取json数据的过程,一开始的想法是使用fetch直接获取本地的json文件,无论是install了json-loader还是把json文件放在index.html的目录下或webpck.config.js里output的...
  • Vue中请求本地JSON文件并返回数据

    千次阅读 2022-03-27 16:47:53
    直接在根目录下创建自己的JSON文件,在此我的JSON文件名为data.json 以下是我的JSON文件内容(不多。。。可以自己添加) { "data": { "totalpage": 5, "pagenum": 4, "users": [{ "id": 1, "username...

    1.目录结构

    直接在根目录下创建自己的JSON文件,在此我的JSON文件名为data.json

    以下是我的JSON文件内容(此处是参照的黑马程序员的vue视频教程)

    {
        "data": {
          "totalpage": 5,
          "pagenum": 4,
          "users": [{
              "id": 1,
              "username": "tiger117",
              "mobile": "18616358651",
              "type": 1,
              "email": "tige112@163.com",
              "create_time": "2017-11-09T20:36:26.000Z",
              "mg_state": true,
              "role_name": "炒鸡管理员"
            },
            {
              "id": 2,
              "username": "tiger118",
              "mobile": "18616358651",
              "type": 1,
              "email": "tige112@163.com",
              "create_time": "2017-11-09T20:36:26.000Z",
              "mg_state": true,
              "role_name": "炒鸡管理员"
            },
            {
              "id": 3,
              "username": "tiger119",
              "mobile": "18616358651",
              "type": 1,
              "email": "tige112@163.com",
              "create_time": "2017-11-09T20:36:26.000Z",
              "mg_state": true,
              "role_name": "炒鸡管理员"
            },
            {
              "id": 4,
              "username": "tiger110",
              "mobile": "18616358651",
              "type": 1,
              "email": "tige112@163.com",
              "create_time": "2017-11-09T20:36:26.000Z",
              "mg_state": true,
              "role_name": "炒鸡管理员"
            },
            {
              "id": 25,
              "username": "tiger111",
              "mobile": "18616358651",
              "type": 1,
              "email": "tige112@163.com",
              "create_time": "2017-11-09T20:36:26.000Z",
              "mg_state": true,
              "role_name": "炒鸡管理员"
            }
          ]
        },
        "meta": {
          "msg": "获取成功",
          "status": 200
        }
      }
      

     2.检查一下自己是否安装了 json-server(以下截图代表安装了)

     如果你没有安装 json-server,输入命令 npm install -g json-server 全局安装


    3.安装完成以后我们就可以运行自己的json文件了

    输入命令 json-server data.json(注意这里的 data.json是自己的JSON文件名)

     ps:默认端口是3000,如果你想在其他端口实现可以输入命令 json-server --port 端口号 文件名


     4.看看浏览器里的数据呈现效果吧


     5.为了保险起见,我还特地去 postman 上测试了一下(可以省略这步)


     6.现在我们可以编写代码发送请求来获取数据啦

     注意这是vue项目中的js代码

    <script>
    export default {
      name: 'Users',
      data () {
        return {
          query: '',
          pagenum: 1,
          pagesize: 2,
          userList: []
        }
      },
      created () {
        this.getUserList()
      },
      methods: {
        getUserList () {
          this.$http.get('http://localhost:3000/data').then(res => {
            // console.log(res)
            this.userList = [res.data]
            console.log(this.userList[0].users)
          })
        }
      }
    }
    </script>

    7.在控制台就可以看到我们数据请求回来了


     8.最后,希望跟我一样的小白可以在前端的路上越来越好。大家一起加油吧!!!

    展开全文
  • vue项目如何读取本地json文件数据

    千次阅读 2021-12-30 15:36:39
    所需要的json文件放在该static目录下,使用axios发起get请求获取对应的json文件数据 // 使用get请求获取到static目录下的 buildmenu.json文件数据 axios.get('/static/buildmenu.json').then(res => { ...
  • 本文通过实例代码给大家详细介绍了Vue2.5通过json文件读取数据的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧1.准备工作1.1 webpack.dev.conf.js在 const portfinder = require(‘portfinder')的下面加上...
  • vue 请求直接写入的json文件

    千次阅读 2019-07-30 22:42:01
    https://www.cnblogs.com/web-aqin/p/10768345.html
  • vue获取本地json文件数据

    千次阅读 2021-12-06 19:05:28
    vue cli2和vue cli3搭建的项目两种不同的目录结构; 一种有static目录;静态资源存放在static下 高版本没有static目录,有public目录;...在main.js文件中: import axios from 'axios' // 安装axios后引入 Vu...
  • vue中引用Json文件

    千次阅读 2022-04-20 15:53:55
    我们用import引用文件的时候,被引用的文件都会用export暴漏,比如js,而有一些文件不需要暴漏,如Json、img(图片)、css;...import 引用Json文件 import aaaa from "./a.json" //aaaa是变量,可以随便命名
  • Vue项目引入本地JSON文件

    千次阅读 2021-11-21 02:51:28
    首先将JSON文件移动到assets目录下 通过import其引入 最后直接引用即可
  • 今天小编就为大家分享一篇Vue 实现把表单form数据 转化成json格式的数据,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 使用json文件的三种方式

    千次阅读 2021-11-17 10:03:51
    方式一:在vue文件里import name froom "路径 “ 引入 方式二: 在vue文件通过require引入 ...方式三:将json文件放到 静态资源文件夹 public 通过ajax获取使用 这个适用于项目发布后通过json文件更改一些配置操作 ...
  • 主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,836
精华内容 24,334
关键字:

vue将数据写json文件中