VUE-based component development and display method

A component development and component technology, applied in software design, software maintenance/management, version control, etc., can solve problems such as complex requirements, achieve the effects of expanding code duplication, reducing development technical difficulty, and strong maintainability

Pending Publication Date: 2021-01-01
BEIJING SHOUGANG AUTOMATION INFORMATION TECH
View PDF0 Cites 3 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

But the situation we are facing is that the requirements are getting more and more complex. When they can no longer meet our needs, it is necessary to develop a set of component libraries belonging to our own team.

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • VUE-based component development and display method
  • VUE-based component development and display method
  • VUE-based component development and display method

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0033] Create a basic project development environment through Vue-cli scaffolding, plan and modify directories suitable for the division of component library files, and adjust configuration files to support directory modification;

[0034] Write functional components one by one, where functional components can include any components such as common forms, lists, menus, pop-up boxes, and paging;

[0035] Create a sample block component to make the sample demo have a unified output. The sample block refers to a Vue component that declares description, code block slot and control bar, and receives an object property including html / script / style content;

[0036] Modify the webpack configuration, add a loader for the markdown document .md file, and filter and parse the document;

[0037] Write component examples and component descriptions, properties, and event callback instructions;

[0038] Configure the compilation library mode, package and publish to npm and reference and use c...

Embodiment 2

[0040] Step S1: Create a component project and plan the directory structure, and adjust the project configuration to support the directory structure;

[0041] Create a project project through Vue-cli, use the create command in the specified directory to create a default project, change the src folder in the project default generation directory to examples for example display, and add a new packages folder for writing and storing components. Add vue.config.js to the root directory of the project, and modify the settings of the entry pages item as follows to build a multi-page application;

[0042] First modify the src directory to the above examples directory;

[0043] Then modify the chainWebpack option in the configuration to support the processing of the packages directory;

[0044] Extend the webpack configuration to add the packages folder to the compilation;

[0045] Among them, Vue.config.js is an optional configuration file provided by Vue-cli. When this file exists, ...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

No PUM Login to view more

Abstract

The invention discloses a VUE-based component development and display method. The method comprises the steps of creating a component engineering configuration environment, realizing a user-defined component library, displaying component functions, code blocks and configuration instructions, packaging and publishing to npm. The technical problem that an existing open source UI component library cannot meet increasingly complex requirements and develop an internal component library of a team in the software development process is solved, controllability is enhanced, component configuration and functions are displayed in an example and source code mode by researching various component display modes, developers can quickly master and use components, and the working efficiency of website developers is improved.

Description

technical field [0001] The invention relates to the technical field of WEB software development, in particular to a VUE-based component development and display method. Background technique [0002] The main reason for the low efficiency and high maintenance cost of the traditional development method is that in many cases, a system is made into a whole application, and often with the growth or change of the business, the complexity of the system will increase exponentially. The situation is that a small change or the addition of a small function may cause the modification of the overall logic, causing the whole body to be affected. [0003] In response to this disadvantage, the industry has already made some explorations. We hope that a large and complex scene can be broken down into several small parts. These small parts do not interfere with each other and can be developed and maintained separately. They can be freely combined. Take a host computer as an example, a comple...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Application Information

Patent Timeline
no application Login to view more
Patent Type & Authority Applications(China)
IPC IPC(8): G06F8/20G06F8/71
CPCG06F8/24G06F8/71
Inventor 白璐孙伟红李艳春王岩张响
Owner BEIJING SHOUGANG AUTOMATION INFORMATION TECH
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap