Front-end development method and system based on vue and npm publishing component

Abstract

The invention relates to the technical field of computers, in particular to a front-end development method and system based on vue and npm publishing components, and the method comprises the following steps: building a front-end engineering project; developing an assembly use manual page; component registration: after the components are packaged and developed and a guide page is used, traversing a component list and performing component registration by using vue.component (); a theme color self-defining function is realized; packaging and issuing; mounting and using a component library; the front-end development method and system based on the vue and npm release component have the beneficial effects that flexible packaging of the component is realized, for example, a service component is packaged according to a service demand; and the theme color of the component library is not constant, and can be self-defined and configured by modifying the style variable.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a front-end development method and system based on Vue and npm publishing components. Background Art

[0002] With the increase of business modules and changes in teams in applications, as well as the good development prospects of micro front-ends, it is particularly important to develop a public component library to encapsulate and manage common components.

[0003] Component encapsulation in traditional projects can only be used within the project, has poor inter-project compatibility, and is not convenient for version management.

[0004] In order to solve the problem that traditional component packaging has poor versatility and is inconvenient for version management, a front-end development solution based on Vue and npm to realize component packaging and publishing is proposed. Summary of the invention

[0005] The purpose of the present invention is to provide a front-end development method and system based on vue and npm publishing components to solve the problems raised in the above background technology.

[0006] To achieve the above object, the present invention provides the following technical solution: a front-end development method based on vue and npm publishing components, the method comprising the following steps:

[0007] Build front-end engineering projects;

[0008] Development component manual page;

[0009] Component registration: After the component is encapsulated and the user guide page is developed, traverse the component list and use vue.component() to register the component;

[0010] Implement theme color customization function;

[0011] Package and publish;

[0012] Installation and use of component library.

[0013] Preferably, the specific operations of building a front-end engineering project include:

[0014] Use vue-cli scaffolding to build the component library front-end project, webpack packaging and construction, and npm to introduce relevant plug-ins. The plug-ins used are echarts, element-ui, vue-template-compiler, and highlight.js.

[0015] Preferably, the specific operations of developing a component user manual page include:

[0016] According to the UI design of the page, build the project code structure, divide the components into web components and large-screen components. The left side of the manual page is the navigation and the right side is the usage guide area. All components that need to be registered are encapsulated into components and their respective usage instructions are added for easy display in the guide area. Then, all components are traversed in the usage guide area for introduction and display.

[0017] Preferably, the specific operations for implementing the theme color customization function include:

[0018] Install the node-sass and sass-loader plug-ins, use the define style variable function in scss to define the variable $--color-bg, and reference this variable in other style development. By modifying the variable value, the theme color customization function can be implemented.

[0019] Preferably, the specific operation of packaging and publishing includes: packaging the component library through the npmrunpackage statement, and then publishing it to npm using npmpublish. Before publishing, it is necessary to register for an npm account and switch the npm source: npm configset registry=https: / / registry.npmjs.org;

[0020] The specific operations for installing and using the component library include: opening the code project where the component library needs to be installed, and using npminstall+component library name to install the component library; importing the component library and registering it globally using vue.use(); installing scss to modify style variable values ​​for theme color style configuration; introducing components into the page for use, and customizing component configuration according to the component configuration details in the user guide.

[0021] A front-end development system based on Vue and npm publishing components, the system comprising:

[0022] Project building module, used to build front-end engineering projects;

[0023] Manual development module, used to develop component manual pages;

[0024] The registration module is used to traverse the component list and register the component using vue.component() after the component is encapsulated and the user guide page is developed;

[0025] Custom module, used to realize theme color customization function;

[0026] Release module, used for packaging and publishing;

[0027] Database installation module, used for installation and use of component libraries.

[0028] Preferably, the project building module uses vue-cli scaffolding to build the component library front-end project, webpack packaging and construction, and npm introduces relevant plug-ins. The plug-ins used are echarts, element-ui, vue-template-compiler, and highlight.js.

[0029] Preferably, a manual development module is used to build an engineering code structure according to the UI design of the page, and the components are divided into web components and large-screen components. The left side of the manual page is the navigation and the right side is the usage guide area. All components that need to be registered are encapsulated into components and their respective usage instructions are added for easy display in the guide area. Then, all components are traversed in the usage guide area for introduction and display.

[0030] Preferably, a custom module is used, and two plug-ins, node-sass and sass-loader, are installed. The variable $--color-bg is defined using the define style variable function in scss. Other style developments reference this variable, and the theme color customization function is implemented by modifying the variable value.

[0031] Preferably, to publish a module, package the component library through the npmrunpackage statement, and then use npmpublish to publish it to npm. Before publishing, you need to register for an npm account and switch the npm source: npmconfig set registry = https: / / registry.npmjs.org;

[0032] Database installation module, open the code project where the component library needs to be installed, use npminstall+component library name to install the component library; import the component library and vue.use() to register it globally; install scss to modify the style variable value to configure the theme color style; introduce the component into the page for use, and customize the component configuration according to the component configuration details in the user guide.

[0033] Compared with the prior art, the present invention has the following beneficial effects:

[0034] The front-end development method and system based on vue and npm publishing components proposed in the present invention realize flexible packaging of components, for example, packaging business components according to business needs; the theme color of the component library is not fixed, and can be customized by modifying style variables; through npm management and publishing, users can install and use any version through npm at any time and anywhere; support the packaging of echarts chart components, realize the packaging of default echarts component styles, and support users to pass in echarts configurations for style override. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] Figure 1 The figure is a flow chart of the method of the present invention. DETAILED DESCRIPTION

[0036] In order to make the purpose and technical solution of the present invention clearly and completely described, and the advantages more clearly understood, the embodiments of the present invention are further described in detail with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are part of the embodiments of the present invention, rather than all of the embodiments, and are only used to explain the embodiments of the present invention, and are not used to limit the embodiments of the present invention. All other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0037] For example, see Figure 1 The present invention provides a technical solution: a front-end development method based on vue and npm publishing components, the method comprising the following steps:

[0038] Step 1 - Build a front-end engineering project

[0039] Use vue-cli scaffolding to build the component library front-end project, webpack packaging and construction, and npm to introduce relevant plug-ins. The main plug-ins used are echarts, element-ui, vue-template-compiler, highlight.js, etc.

[0040] Step 2 — Develop component manual page

[0041] According to the UI design of the page, build the project code structure. Divide the components into web components and large screen components. The left side of the manual page is the navigation and the right side is the usage guide area. Encapsulate all components that need to be registered into components and add their respective usage instructions for display in the guide area, and then traverse all components in the usage guide area for introduction and display.

[0042] Step 3 - Component Registration

[0043] After the component is encapsulated and the user guide page is developed, traverse the component list and use vue.component() to register the component;

[0044] Step 4 - Implement theme color customization

[0045] You need to install two plug-ins, node-sass and sass-loader. Use the define style variable function in scss to define the variable $--color-bg. Other style development references this variable. By modifying the variable value, you can achieve the theme color customization function.

[0046] Step 5 — Packaging and publishing

[0047] Package the component library through the npm run package statement, and then use npm publish to publish it to npm. Before publishing, you need to register for an npm account and switch the npm source: npm config set registry = https: / / registry.npmjs.org;

[0048] Step 6 - Installation and use of component library

[0049] Open the code project where you need to install the component library:

[0050] 1) Use npminstall+component library name to install the component library;

[0051] 2) Import the component library and register it globally using vue.use();

[0052] 3) Install scss to modify the style variable value to configure the theme color style;

[0053] 4) Introduce components into the page for use, and customize component configuration according to the component configuration details in the user guide.

[0054] Embodiment 2, based on embodiment 1, proposes a front-end development method based on vue and npm to realize component packaging and publishing. The front-end engineering of the component library is realized by vue; it supports custom theme colors of the component library; it supports publishing and installing components through npm; it supports previewing component effects and consulting component usage instructions in the component usage guide; it supports echarts chart component packaging.

[0055] The component front-end project is implemented with vue and built with webpack. It supports custom theme colors for component libraries. After successfully installing and introducing the component library through npm, the style variables of the component library can be changed directly in the project. The project is required to support scss writing. It supports publishing and installation through npm, and uses npm to uniformly manage component versions. It supports previewing effects and reviewing component instructions in the component usage guide. The component library project maintains component classification management. When components are added and updated, the component information in the usage guide will be synchronized in time for users to understand and consult. It supports echarts chart component encapsulation, which can encapsulate the default chart style and support passing in echarts configuration for style override.

[0056] Embodiment 3, based on embodiment 2, proposes a front-end development system based on vue and npm publishing components, the system comprising:

[0057] The project building module is used to build front-end engineering projects; use vue-cli scaffolding to build component library front-end projects, webpack packaging and construction, and npm introduces related plug-ins. The plug-ins used are echarts, element-ui, vue-template-compiler, and highlight.js.

[0058] The manual development module is used to develop the manual page for components. According to the UI design of the page, the project code structure is built, and the components are divided into web components and large-screen components. The left side of the manual page is the navigation and the right side is the usage guide area. All components that need to be registered are encapsulated into components and their respective usage instructions are added for easy display in the guide area. Then, all components are traversed in the usage guide area for introduction and display.

[0059] The registration module is used to traverse the component list and register the component using vue.component() after the component is encapsulated and the user guide page is developed;

[0060] Custom module, used to realize theme color customization function; install node-sass and sass-loader plug-ins, use the define style variable function in scss to define the variable $--color-bg, other style development references this variable, and realize theme color customization function by modifying the variable value.

[0061] Release module, used for packaging and publishing; package the component library through the npmrunpackage statement, and then use npmpublish to publish it to npm. Before publishing, you need to register for an npm account and switch the npm source: npm config setregistry=https: / / registry.npmjs.org.

[0062] The database installation module is used to install and use the component library. Open the code project where the component library needs to be installed, and use npminstall+component library name to install the component library; import the component library and register it globally using vue.use(); install scss to modify the style variable value for theme color style configuration; introduce the component into the page for use, and customize the component configuration according to the component configuration details in the user guide.

[0063] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A front-end development method based on vue and npm publishing components, characterized by: The method comprises the following steps: Build front-end engineering projects; Development component manual page; Component registration: After the component is encapsulated and the user guide page is developed, traverse the component list and use vue.component() to register the component; Implement theme color customization function; Package and publish; Installation and use of component library.

2. A front-end development method based on vue and npm publishing components according to claim 1, characterized in that: The specific operations of building a front-end engineering project include: Use vue-cli scaffolding to build the component library front-end project, webpack packaging and construction, and npm to introduce relevant plug-ins. The plug-ins used are echarts, element-ui, vue-template-compiler, and highlight.js.

3. A front-end development method based on vue and npm publishing components according to claim 1, characterized in that: The specific operations of the development component manual page include: According to the UI design of the page, build the project code structure, divide the components into web components and large-screen components. The left side of the manual page is the navigation and the right side is the usage guide area. All components that need to be registered are encapsulated into components and their respective usage instructions are added for easy display in the guide area. Then, all components are traversed in the usage guide area for introduction and display.

4. A front-end development method based on vue and npm publishing components according to claim 1, characterized in that: The specific operations to implement the theme color customization function include: Install the node-sass and sass-loader plug-ins, use the define style variable function in scss to define the variable $--color-bg, and reference this variable in other style development. By modifying the variable value, the theme color customization function can be implemented.

5. A front-end development method based on vue and npm publishing components according to claim 1, characterized in that: The specific operations of packaging and publishing include: packaging the component library through the npmrunpackage statement, and then publishing it to npm using npmpublish. Before publishing, you need to register for an npm account and switch the npm source: npm config set registry = https: / / registry.npmjs.org; The specific operations for installing and using the component library include: opening the code project where the component library needs to be installed, and using npminstall+component library name to install the component library; importing the component library and registering it globally using vue.use(); installing scss to modify style variable values ​​for theme color style configuration; introducing components into the page for use, and customizing component configuration according to the component configuration details in the user guide.

6. A front-end development system based on Vue and NPM publishing components according to the front-end development method based on Vue and NPM publishing components according to any one of claims 1 to 5, characterized in that: The system comprises: Project building module, used to build front-end engineering projects; Manual development module, used to develop component manual pages; The registration module is used to traverse the component list and register the component using vue.component() after the component is encapsulated and the user guide page is developed; Custom module, used to realize theme color customization function; Release module, used for packaging and publishing; Database installation module, used for installation and use of component libraries.

7. A front-end development system based on vue and npm publishing components according to claim 6, characterized in that: The project building module uses vue-cli scaffolding to build the component library front-end project, webpack packaging and construction, and npm introduces related plug-ins. The plug-ins used are echarts, element-ui, vue-template-compiler, and highlight.js.

8. A front-end development system based on vue and npm publishing components according to claim 6, characterized in that: Use the manual development module to build the project code structure according to the UI design of the page, and divide the components into web components and large-screen components. The left side of the manual page is the navigation and the right side is the usage guide area. All components that need to be registered are encapsulated into components and their respective usage instructions are added for easy display in the guide area. Then, all components are traversed in the usage guide area for introduction and display.

9. A front-end development system based on vue and npm publishing components according to claim 6, characterized in that: Customize the module, install the node-sass and sass-loader plug-ins, use the define style variable function in scss to define the variable $--color-bg, and reference this variable in other style development. By modifying the variable value, the theme color customization function can be realized.

10. A front-end development system based on vue and npm publishing components according to claim 6, characterized in that: Publish the module, package the component library through the npmrunpackage statement, and then use npmpublish to publish it to npm. Before publishing, you need to register for an npm account and switch the npm source: npm config set registry = https: / / registry.npmjs.org; Database installation module, open the code project where the component library needs to be installed, use npminstall+component library name to install the component library; import the component library and vue.use() to register it globally; install scss to modify the style variable value to configure the theme color style; introduce the component into the page for use, and customize the component configuration according to the component configuration details in the user guide.

Images