Automatic method and system for converting uni-app project into pure vue.js project

Abstract

The invention discloses an automatic method and system for converting an uni-app project into a pure vue.js project. The method comprises the steps that whether a project folder is an uni-app project or not is judged; if the item file content in the item folder is a unii-app item, copying the item file content in the item folder to obtain a folderA item file to be converted, and sequentially performing directory adjustment, unii specific component replacement, unii specific API conversion and unii specific route-to-Vue Router route configuration on the folderA item file and code content according to an intelligent conversion rule set configuration file preset by a system; a target folderA project file is obtained; performing manual adjustment on the target folderA project file according to a developer, and performing test verification on code contents of each part in the manually adjusted target folderA project file; and determining whether the item folder is successfully converted according to a verification result. Automatic processing of core transformation links such as code structure reconstruction, component library replacement, API calling conversion and routing system migration is achieved, and meanwhile the integrity of service logic is kept.

Description

Technical Field

[0001] The present invention belongs to the technical field of web software development, and particularly relates to an automated method and system for converting a uni-app project into a pure vue.js project. Background Art

[0002] In the context of the current rapid development of the software industry, Internet enterprises, especially start-ups, generally adopt cross-platform development frameworks to build application systems covering multiple terminals in order to quickly capture the market. Such enterprises usually choose uni-app as the core development framework. This framework is based on the Vue.js technology system and supports synchronously outputting multi-terminal applications such as iOS, Android, Web (responsive), WeChat / Alipay mini-programs, etc. from a single codebase. According to the official data of uni-app, the monthly active users of mobile applications developed using this framework have exceeded 1.4 billion, and its developer ecosystem and business case maturity rank among the top in the cross-platform development field.

[0003] However, with the expansion of enterprise scale and the iteration of product functions, users' requirements for application performance continue to upgrade. Since uni-app introduces an abstraction layer and a cross-platform runtime mechanism to achieve multi-terminal compatibility, it often faces performance bottlenecks in complex business scenarios. For example, for web pages with similar functions, the web side of a project using uni-app needs to load more than about 200KB of additional framework code (such as uni-core.js), while a pure vue.js project only needs the core library (about 33KB), resulting in a 30%-50% increase in the first-screen loading time of the web side. Another example is that the CSS animations of uni-app need to be rendered through the composition layer of the webview, and complex animations (such as Bezier curve paths) will cause a decrease in the frame rate due to cross-layer communication, while a pure vue.js project can achieve more efficient animation control by combining the browser's built-in requestAnimationFrame API. To address these challenges, many technical teams choose to upgrade the architecture of the original uni-app project and split it into independent projects for specific platforms. Taking the transformation of the web side as an example, the conventional technical solution requires senior architects to strip the uni-app-specific implementations from the existing codebase, including but not limited to cross-platform API calls, conditional compilation logic, platform-specific components, etc., and reconstruct them into a pure vue.js technology stack project. This process involves systematic projects such as codebase migration, dependency reconstruction, and performance optimization. Depending on the complexity of the project, the traditional manual transformation cycle usually takes 1-4 weeks and there is a risk of architecture adaptation errors. Summary of the Invention

[0004] The present invention provides an automated method and system for converting a uni-app project into a pure vue.js project to solve the technical problems of long manual transformation cycle and the risk of architecture adaptation errors.

[0005] In a first aspect, the present invention provides an automated method for converting a uni-app project into a pure vue.js project, including:

[0006] Obtain a project folder and determine whether the project folder is a uni-app project;

[0007] If it is a uni-app project, copy the content of the project files in the project folder to obtain the folderA project files to be converted, and sequentially perform directory adjustment, replacement of uni-specific components, conversion of uni-specific APIs, and conversion of uni-specific routes to VueRouter route configurations on the folderA project files and code content according to a preset intelligent conversion rule set configuration file to obtain the target folderA project files;

[0008] Manually adjust the target folderA project files by the developer, and test and verify the code content in the manually adjusted target folderA project files;

[0009] Determine whether the project folder is successfully converted according to the verification result.

[0010] In a second aspect, the present invention provides an automated system for converting a uni-app project into a pure vue.js project, including:

[0011] A judgment module configured to obtain a project folder and determine whether the project folder is a uni-app project;

[0012] A conversion module configured to, if it is a uni-app project, copy the content of the project files in the project folder to obtain the folderA project files to be converted, and sequentially perform directory adjustment, replacement of uni-specific components, conversion of uni-specific APIs, and conversion of uni-specific routes to Vue Router route configurations on the folderA project files and code content according to a preset intelligent conversion rule set configuration file to obtain the target folderA project files;

[0013] An adjustment module configured to manually adjust the target folderA project files by the developer and test and verify the code content in the manually adjusted target folderA project files;

[0014] A determination module configured to determine whether the project folder is successfully converted according to the verification result.

[0015] In a third aspect, there is provided an electronic device, comprising: at least one processor, and a memory communicatively connected to the at least one processor, wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the steps of the automated method for converting a uni-app project into a pure vue.js project according to any embodiment of the present invention.

[0016] In a fourth aspect, the present invention further provides a computer-readable storage medium, on which a computer program is stored. When the program instructions are executed by a processor, the processor is caused to execute the steps of the automated method for converting a uni-app project into a pure vue.js project according to any embodiment of the present invention.

[0017] The automated method and system for converting a uni-app project into a pure vue.js project of the present application constructs an automated migration solution for converting a uni-app project into a pure Vue.js project based on file reading and management, regular expressions, and AST (Abstract Syntax Tree). Through a preset intelligent conversion rule set, it realizes the automated processing of core transformation links such as code structure reconstruction, component library replacement, API call conversion, and routing system migration, while maintaining the integrity of the business logic. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the drawings in the following description are some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0019] Figure 1 It is a flowchart of an automated method for converting a uni-app project into a pure vue.js project provided by an embodiment of the present invention;

[0020] Figure 2 It is a flowchart of converting a uni-app project into a pure vue.js project provided by an embodiment of the present invention;

[0021] Figure 3 It is a flowchart of a directory adjustment program provided by an embodiment of the present invention;

[0022] Figure 4 It is a flowchart of a component and style replacement program provided by an embodiment of the present invention;

[0023] Figure 5 It is a flowchart of an API conversion program provided by an embodiment of the present invention;

[0024] Figure 6 Flowchart of a routing configuration program provided by an embodiment of the present invention;

[0025] Figure 7 Block diagram of a structure of an automated system for converting a uni-app project into a pure vue.js project provided by an embodiment of the present invention;

[0026] Figure 8 Schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. Detailed implementation manners

[0027] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Apparently, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0028] Please refer to Figure 1 , which shows a flowchart of an automated method for converting a uni-app project into a pure vue.js project of the present application.

[0029] As Figure 1 shown, the automated method for converting a uni-app project into a pure vue.js project specifically includes the following steps:

[0030] Step S101, obtain a project folder and determine whether the project folder is a uni-app project.

[0031] In this step, obtain the folder path of the project folder according to the settings.json file information, and obtain the package.json file under the root directory of the project folder according to the folder path; determine whether there are dependency plugins of @dcloudio / uni-app or @dcloudio / uni-* in the file content of the package.json file.

[0032] Step S102, if it is a uni-app project, copy the project file content in the project folder to obtain the to-be-converted folderA project file, and sequentially perform directory adjustment, replacement of uni-specific components, conversion of uni-specific APIs, and conversion of uni-specific routing to Vue Router routing configuration on the folderA project file and code content according to a preset intelligent conversion rule set configuration file to obtain the target folderA project file.

[0033] In this step, if there are dependency plugins of @dcloudio / uni-app or @dcloudio / uni-* in the file content of the package.json file, the folderA folder is constructed; the project file content in the project folder and the corresponding configuration of the settings.json file are copied to the folderA folder to obtain the folderA project file to be converted.

[0034] It should be noted that the directory adjustment of the folderA project file and code content is carried out in sequence according to the preset intelligent conversion rule set configuration file, including:

[0035] Judge whether there is a src folder under the root directory of the folderA project file;

[0036] If there is a src folder, traverse the src folder and judge whether there is a views folder under the root directory of the src folder;

[0037] If there is no views folder, search for the / ** / page folder, / ** / pages folder, and / ** / view folder under the folderA project file respectively, and copy all the content in the first result folder found to the newly created views folder, where / ** / means

[0038] Judge whether there is a router folder under the root directory of the src folder;

[0039] If there is a router folder, check whether there is an index.js file under the root directory of the router folder;

[0040] If there is no index.js file, search for the / ** / router.js file, / ** / routes / index.js file, and / ** / route / index.js file under the folderA project file respectively, and copy the first result file found to the router folder, and rename the copied router folder to index.js;

[0041] Judge whether there is an assets folder under the root directory of the src folder;

[0042] If there is no assets folder, search for the / ** / asset folder and / ** / static folder under the folderA project file respectively, and copy all the content in the first result folder found to the newly created assets folder.

[0043] Furthermore, the directory adjustment for the folderA project files and code content also includes:

[0044] If the src folder does not exist, create the src folder;

[0045] If the views folder exists, no operation is required on the views folder;

[0046] If the router folder does not exist, create the router folder;

[0047] If the index.js file exists, no operation is required on the index.js file;

[0048] If the assets folder exists, no operation is required on the assets folder.

[0049] Specifically, the replacement of uni-specific components includes:

[0050] Get all vue files and js files in the project folder and remove the other conditional compilation platform identifiers;

[0051] Read the content of the vue files and js files, traverse each platform identifier, construct a regular expression and replace the matched content with an empty string. The matching logic of the regular expression is to remove all the content between the conditional compilation start symbol and the conditional compilation end symbol;

[0052] Convert uni-app components into HTML tags and ElementUI components, read all CSS files, SASS files, LESS files and vue files in the project folder, and convert the rpx unit to the px / rem unit used in the web page.

[0053] The conversion of uni-specific APIs includes:

[0054] Configure the mapping relationship between uni.xxx APIs and browser / vue.js standard APIs in the settings.json file;

[0055] Get all / ** / *.vue files and / ** / *.js files in the folderA project files and define the transform function for the AST conversion code;

[0056] Create a jscodeshift instance according to the TypeScript parser, parse the file content according to the jscodeshift instance, and generate the root node root of the AST;

[0057] Find all call expressions of uni objects according to the root.find method, replace the matched call expressions based on the replaceWith method, and replace the uni objects with the target APIs according to the mapping relationship.

[0058] The conversion of uni-specific routing to Vue Router routing configuration includes:

[0059] Find the first result file of the / ** / pages.json file under the folderA project files;

[0060] Read the content in pages.json to get the variable pagesConfi array;

[0061] Traverse the pagesConfig array according to the map method, generate a routing object for each page configuration, set the path where the routing object is located and the lazy loading import, and finally generate a new vue router routing configuration;

[0062] Write the new vue router routing configuration to the / src / router / index.js file according to the fs.writeFileSync method.

[0063] Step S103, manually adjust the target folderA project files according to the developer, and test and verify the code content in the manually adjusted target folderA project files.

[0064] In this step, remove and modify the redundant files and code content in the target folderA project files according to the developer.

[0065] Step S104, determine whether the project folder is successfully converted according to the verification result.

[0066] In summary, the method of this application constructs an automated migration solution for converting uni-app projects into pure Vue.js projects based on file reading and management, regular expressions, and AST (Abstract Syntax Tree). Through a preset intelligent conversion rule set, it realizes the automated processing of core transformation links such as code structure reconstruction, component library replacement, API call conversion, and routing system migration, while maintaining the integrity of business logic.

[0067] In a specific embodiment, in order to improve the efficiency of the existing architecture evolution, an automated migration solution for converting uni-app projects into pure vue.js projects based on file reading and management, regular expressions, and AST is proposed.

[0068] Such as Figure 2As shown in the figure, when accepting the input of a project folder, it will first determine whether the project is a project developed based on uni-app according to the content of the folder. If it is not, the conversion will be directly terminated. If it is, a project file to be converted, folderA, will be copied according to the content of the project files in the folder. Then, automatic processing operations such as directory adjustment, replacement of uni-specific components (page tags), conversion of uni-specific APIs, and conversion of uni-specific routing to Vue Router routing configuration will be performed on the files and code content in folderA in sequence according to the intelligent conversion rule set configuration file preset by the system. Finally, the processed folderA will be provided to the developer (the total conversion time is about 0.1 - 1 hour). The developer will manually remove and modify some redundant files and code content in folderA (the workload is about 0.5 - 1 working days), and then test and verify the code content in folderA everywhere (the workload is about 1 - 2 working days). After verification without errors, it can be considered that the project technology stack conversion is successful.

[0069] In this case, the automated script programming environment implemented by this solution is Node.js. In the actual implementation process, in addition to Node.js, other programming languages that support file operations can also be used, such as: Java, C, C++, Python, PHP, etc. Specifically, it includes:

[0070] The first step:

[0071] Based on the intelligent conversion rule set configuration file preset by the automated script system (hereinafter referred to as the settings.json file), the developer sets the path of the uni-app project folder to be converted (uniAppProjectPath). The automated script system reads the package.json file in its root directory according to the path of the uni-app project folder to be converted. If the package.json file is successfully read and the dependency plugins of @dcloudio / uni-app or @dcloudio / uni-* are read in the file content, it is considered that the project is a project based on uni-app, and the script execution process can continue. Otherwise, it will prompt the developer that the target folder configured in the settings.json file is not a uni-app project and stop the conversion. The following is the main content of the settings.json file and a section of JS pseudo-code for the judgment logic of this step:

[0072]

[0073]

[0074]

[0075]

[0076]

[0077] Step 2:

[0078] Copy a project file folderA to be converted according to the content of the target uni-app project file and the corresponding configuration in settings.json. The specific method is to first create the folder folderA, and then traverse the source uni-app project file and copy its content to folderA one by one. In this step, it should be noted that the system will not copy some project build files, configuration files, etc. that are not required in the automated conversion (according to the content of the excludePaths item in setttings.json). For example, the automated script system will not copy folders / files such as node_modules and.git by default. In addition, developers can also configure some file / folder paths that do not need to be judged for automatic conversion through the settings.json configuration file, which can speed up the automatic conversion of the automated script (the node_modules folder contains a large number of npm package files, and developers generally do not make additional modifications), and at the same time avoid some unnecessary errors.

[0079] Step 3:

[0080] Traverse the folderA folder and adjust the directory of the files and code content in folderA according to the corresponding configuration in settings.json. Such as Figure 3As shown, the automated script system first checks whether there is a src folder in the root directory of folderA. If not, it will create the src folder. If it exists, it will traverse the src folder. It then checks whether there is a views folder in the root directory of the src folder (usually the folder where the display pages of a front-end project based on vue.js are stored. In this solution, developers can dynamically configure this path through the directoryMapping.views.targetPath property in settings.json). If it exists, it means that the display pages of this project are defaultly stored in the views folder and no additional operations on the views folder are required. If it does not exist, it will search for the / ** / page, / ** / pages, / ** / view folders under folderA (the path of this folder can be dynamically configured through the directoryMapping.views.pathPatterns array in the settings.json file. The search will start from the / src folder first. If not found, it will start searching from the root directory of folderA and finally traverse all subdirectories), and copy all the contents of the first result folder found to the / src / views folder.

[0081] Next, it checks whether there is a / src / router folder (usually the folder where the route configuration of the display pages of a front-end project based on vue.js is stored. Developers can dynamically configure this path through the settings.json file). If not, the / src / router folder needs to be created first. If it exists, it means that the route configuration information of this project is defaultly stored in the router folder. It only needs to check whether there is an index.js file in the root directory of the router folder. If it exists, no configuration is required. The next processing step is the same as when the / src / router folder is not found - search for the / ** / router.js, / ** / routes / index.js, / ** / route / index.js files under the folderA folder (which can be dynamically configured through the settings.json file. The search will start from the / src folder first. If not found, it will start searching from the root directory of folderA and finally traverse all subdirectories), copy the first result file found to the / src / router folder and rename it to index.js.

[0082] Next, check if the / src / assets folder exists (usually the folder for storing static resources in a Vue.js-based front-end project, and developers can dynamically configure this path through the directoryMapping.assets.targetPath property in the settings.json file). If it doesn't exist, the / src / assets folder needs to be created first. Then, search for the / ** / asset and / ** / static folders under the folderA folder (which can be dynamically configured through the directoryMapping.assets.pathPatterns array in the settings.json file. The search starts from the / src folder first. If not found, it will start from the root directory of folderA and finally traverse all subdirectories), and copy the contents of the first found result folder to the / src / assets folder. If it exists, it means that the static resources of this project are defaultly stored in the assets folder and no additional processing is required.

[0083] The following is a piece of JavaScript pseudocode for the judgment logic of this step:

[0084]

[0085]

[0086]

[0087] Step 4:

[0088] Implement the replacement of uni-specific components (page tags) according to the corresponding configuration in settings.json. For example Figure 4As shown below, first, read all the.vue and.js files in the folderA folder (file names end with.vue or.js, start searching from the / src folder first, then from the root directory of folderA, and finally traverse all subdirectories. Specified file directories and file names can be excluded according to the componentMappings.excludeFiles in the settings.json file). Secondly, it is necessary to define the conditional compilation platform identifiers to be removed. These conditional compilation identifier statements support developers to customize the configuration through the platformsToRemove.patterns property in the settings.json. The default ones are WeChat Mini Program, Alipay Mini Program, Baidu Mini Program, Toutiao Mini Program, APP, General Mini Program, Quick App, etc. Next, read the contents of the.vue and.js files, traverse each platform identifier, construct a regular expression and replace the matched content with an empty string. The matching logic of the regular expression is to remove all the content between the conditional compilation start symbol (e.g., #ifdef MP-WEIXIN, WeChat Mini Program) and the conditional compilation end symbol (#endif). The following is a piece of JS pseudo-code for this process:

[0089]

[0090]

[0091]

[0092] Next, convert uni-app components into HTML tags and ElementUI components (the default component library can be dynamically configured based on the componentMappings.library property in the settings.json file. For example, it can be modified to the iView component, antd-vue component, etc.), and additional component conversion rules are supported, which are determined by the key-value pairs in the componentMappings.rules property. Since the uni-app framework is to achieve cross-platform page display, a large number of built-in tags / components are provided in the.vue files where the display pages are originally written. This part of the tags / components can be successfully converted back to html tags and element components. First, it is necessary to obtain all the.vue files in folderA, read the contents of the.vue files in sequence, and convert the built-in tags of uni-app <view> <text> Equivalent conversion to native html tags etc., will <button> <input> Equivalent conversion to <el-button> <el-input>Components such as elementUI component library. After the synonym conversion is completed, note that in the / src / main.js file, configure the global registration for the elementUI component library. The following is a piece of JS pseudocode for this process:

[0093]

[0094]

[0095]

[0096] Next, read all CSS / SASS / LESS files and vue files in the folderX folder, and convert the CSS style units (rpx → px / rem). rpx is a unique size unit for WeChat Mini Programs to solve screen adaptation. When converting the target project into a pure vue project, rpx needs to be converted into the px / rem units used in web pages. The following is a piece of JS pseudocode for this process:

[0097]

[0098] Step 5:

[0099] Implement the conversion of specific APIs according to the apiMapping attribute in the settings.json file. Such as Figure 5 As shown, uni-app may use the APIs self-encapsulated by the framework to implement functions such as HTTP requests, route jumps, local storage caching, and information prompts (toast). Therefore, it is necessary to convert these uni-specific APIs into common APIs for the web side. First, it is necessary to configure the mapping relationship between uni.xxx APIs and browser / vue.js standard APIs in the settings.json file (the apiMappings property under the settings.json file). After that, it is necessary to obtain all the / ** / *.vue and / ** / *.js files in folderA, define a function transform for AST (Abstract Syntax Tree) transformation code. The transform function will receive file information (i.e., the / ** / *.vue and / ** / *.js files in folderA) as parameters. Then, a jscodeshift instance is created using the TypeScript parser (the reason for using the TypeScript parser instead of the JavaScript parser here is that the TypeScript parser can usually handle more syntax features, including the latest ECMAScript proposals and some TypeScript-specific syntax. This makes it more compatible and flexible than a pure JavaScript parser in some cases, even when dealing with JavaScript files). Jscodeshift will parse the file content to generate the root node root of the AST tree. Then, the root.find method is used to find all the call expressions of uni objects, and the matching call expressions are replaced using the replaceWith method provided by JS, and they are replaced with the target APIs according to the apiMappings mapping relationship. Then, relevant plugin libraries are imported (locally imported in the file). The specific approach is to use root.find to search for the import statement of axios (it may also be other plugins, depending on the specific configuration of the settings.json file). If not found, an import statement for axios is added to the root node of the AST tree. Finally, the modified AST tree is converted back into a source code string and returned.

[0100] The following is a piece of JS pseudocode for the judgment logic of this step:

[0101]

[0102]

[0103]

[0104] Step 6:

[0105] According to the routing property configuration in the settings.json file, the uni-specific routing is converted to the Vue Router routing configuration, such as Figure 6 As shown. Because uni-app projects usually configure page routing files in the / src / pages.json file, and pure vue projects usually use vue-router for page routing management, it is necessary to write the file modifications in pages.json to the / src / router / index.js file. If you replace it manually, it usually takes a lot of time, but when it is replaced by an automated script, it is very fast and convenient.

[0106] First, you need to search for the / ** / pages.json file in the folderA folder (first search in the / src file, then search in the root directory of folderA, and finally traverse all subdirectories), get the first result file found, read the content in pages.json to get the variable pagesConfig, and then use the map method that comes with JS to traverse the pagesConfig array, generate a routing object for each page configuration, set the path of the routing object and lazy load import, etc., and finally generate a new vue router routing configuration, and finally use the fs.writeFileSync method to write the generated routing configuration to the / src / router / index.js file.

[0107] The following is a JS pseudo code for the judgment logic of this step:

[0108]

[0109]

[0110] Step 7:

[0111] Based on the processing of the first seven steps, the automated script system provides the processed folderA file project to the developer, who then makes manual adjustments based on the folderA folder content, including removing and modifying some redundant files and code content in folderA. The first is the deletion of redundant files. For example, / src / manifest.json, / src / pages.json, etc. are configuration files exclusive to uni-app and are no longer used after the technology stack conversion. The second is the removal of some code content, and finally the fine-tuning of some content, including the installation of npm packages, the removal of some npm packages that are no longer used, and the restoration of project build files and configuration files excluded by the automated script in the second step.

[0112] Step 8:

[0113] The developer tests and validates the code content in folderA, and organizes relevant testers to conduct functional tests on the overall project. According to the discovered problems, the target project is adjusted for the automation configuration file and manually, and regression tests are carried out until the relevant problems are basically eliminated, which indicates that the conversion of the project's technology stack from uni-app to vue.js this time is successful.

[0114] The above-introduced is this patent: an automated method for converting a uni-app project into a pure vue.js project. The developer only needs to spend a small amount of time configuring the configuration files related to the automated script system, and through the automated script system, the target project is converted from a uni-app-based project into a pure vue.js project. After that, only a small amount of manual fine-tuning work is required to better complete the evolution of the project architecture, greatly improving work efficiency.

[0115] Explanation of professional terms:

[0116] uni-app: uni-app is a cross-platform application development framework based on Vue.js, launched by DCloud. It allows developers to build applications for multiple platforms such as iOS, Android, H5, and various small programs (such as WeChat, Alipay, Baidu, etc.) using a single set of code. Through uni-app, developers can significantly improve development efficiency and reduce maintenance costs, which is especially suitable for projects that need to quickly cover multiple platforms.

[0117] H5: In the Chinese environment, it is generally an abbreviation for HTML5 and is often generalized as "mobile interactive web page".

[0118] uni: In uni-app, uni is a global object, similar to the window object in the browser. It provides many APIs for device interaction, such as making network requests, operating device storage, and obtaining system information.

[0119] JS(js): JS is an abbreviation for JavaScript. JavaScript is a high-level, interpreted, lightweight programming language widely used in web development.

[0120] Vue.js(Vue): Vue.js is a progressive JavaScript framework for building user interfaces. Its core features are lightweight, easy to use, and flexible, aiming to simplify front-end development and help developers efficiently build modern single-page applications (SPAs) and complex front-end interfaces.

[0121] Vue Router: Vue Router is the official routing management library of Vue.js, used to build page navigation and routing functions in single-page applications (SPAs). It allows developers to map URLs to different Vue components, thereby achieving page switching and state management without reloading the entire page.

[0122] Node.js: Node.js is a JavaScript runtime environment based on the Chrome V8 JavaScript engine, which allows developers to run JavaScript code on the server side, no longer limited to running in the browser.

[0123] @dcloudio: @dcloudio is the organization namespace of DCloud's related projects and products on platforms such as GitHub and npm.

[0124] node_modules: node_modules is a directory that is usually automatically generated when developing projects using Node.js and is used to store the project's dependent packages.

[0125] .git folder:.git folder is a key directory used by the Git version control system to track and manage the project history. It contains all the information and metadata related to the Git repository.

[0126] npm: npm (short for Node Package Manager) is the default software package management system written in JavaScript for Node.js.

[0127] AST: Abstract Syntax Tree (AST), or simply called Syntax tree, is an abstract representation of the syntax structure of source code. It represents the syntax structure of a programming language in a tree-like form, and each node on the tree represents a structure in the source code.

[0128] TypeScript: TypeScript is an open-source programming language developed and maintained by Microsoft. TypeScript is a strict superset of JavaScript and provides optional static type checking.

[0129] ECMAScript: ECMAScript is a scripting language specification defined by Ecma International (formerly the European Computer Manufacturers Association) in standard ECMA-262. This language is widely used on the World Wide Web. It is often called JavaScript or JScript, but in fact the latter two are implementations and extensions of the ECMA-262 standard.

[0130] axios: axios is a promise-based network request library that works in Node.js and browsers. It uses the native Node.js http module on the server side and XMLHttpRequests on the client side (browser side).

[0131] See also Figure 7 , which shows a structural block diagram of an automated system for converting a uni-app project into a pure vue.js project in the present application.

[0132] like Figure 7 As shown, the automation system 200 includes a judgment module 210 , a conversion module 220 , an adjustment module 230 and a determination module 240 .

[0133] Among them, the judgment module 210 is configured to obtain a project folder and determine whether the project folder is a uni-app project; the conversion module 220 is configured to, if it is a uni-app project, copy the project file content in the project folder to obtain the folderA project file to be converted, and adjust the directory, replace uni-specific components, convert uni-specific APIs, and convert uni-specific routes to Vue Router routing configurations on the folderA project file and code content in turn to obtain the target folderA project file; the adjustment module 230 is configured to manually adjust the target folderA project file according to the developer, and test and verify the code content of each location in the manually adjusted target folderA project file; the determination module 240 is configured to determine whether the project folder is successfully converted according to the verification result.

[0134] It should be understood that Figure 7 Modules and references documented in Figure 1 Therefore, the operations and features described above for the method and the corresponding technical effects are also applicable to Figure 7 The modules in it will not be described in detail here.

[0135] In some other embodiments, the embodiments of the present invention further provide a computer-readable storage medium, on which a computer program is stored. When the program instructions are executed by a processor, the processor is caused to execute the automated method of converting a uni-app project into a pure vue.js project in any of the above method embodiments;

[0136] As an implementation manner, the computer-readable storage medium of the present invention stores computer-executable instructions, which are set as follows:

[0137] Obtain a project folder and determine whether the project folder is a uni-app project;

[0138] If it is a uni-app project, copy the project file content in the project folder to obtain a folderA project file to be converted, and sequentially perform directory adjustment, replacement of uni-specific components, conversion of uni-specific APIs, and conversion of uni-specific routing to Vue Router routing configuration on the folderA project file and the code content to obtain a target folderA project file;

[0139] Manually adjust the target folderA project file according to the developer, and perform test verification on the code content in the manually adjusted target folderA project file;

[0140] Determine whether the project folder is successfully converted according to the verification result.

[0141] The computer-readable storage medium may include a program storage area and a data storage area. Among them, the program storage area may store an operating system and application programs required for at least one function; the data storage area may store data created according to the use of the automated system for converting a uni-app project into a pure vue.js project, etc. In addition, the computer-readable storage medium may include a high-speed random access memory, and may also include a memory, such as at least one magnetic disk storage device, a flash memory device, or other non-volatile solid-state storage devices. In some embodiments, the computer-readable storage medium may optionally include a memory remotely provided with respect to the processor, and these remote memories may be connected to the automated system for converting a uni-app project into a pure vue.js project through a network. Examples of the above networks include, but are not limited to, the Internet, an enterprise intranet, a local area network, a mobile communication network, and combinations thereof.

[0142] Figure 8 It is a schematic structural diagram of the electronic device provided by the embodiments of the present invention, as Figure 8 As shown in the figure, the device includes a processor 310 and a memory 320. The electronic device may further include an input device 330 and an output device 340. The processor 310, the memory 320, the input device 330, and the output device 340 may be connected through a bus or other means. Figure 8 Taking the connection through the bus as an example. The memory 320 is the above-mentioned computer-readable storage medium. The processor 310 executes various functional applications and data processing of the server by running non-volatile software programs, instructions, and modules stored in the memory 320, that is, implementing the automated method of converting a uni-app project into a pure vue.js project in the above method embodiment. The input device 330 can receive input digital or character information, and generate key signal inputs related to user settings and function controls of the automated system for converting a uni-app project into a pure vue.js project. The output device 340 may include display devices such as a display screen.

[0143] The above electronic device can execute the method provided by the embodiments of the present invention, and has corresponding functional modules and beneficial effects for executing the method. For technical details not described in detail in this embodiment, reference can be made to the method provided by the embodiments of the present invention.

[0144] As an implementation manner, the above electronic device is applied to an automated system for converting a uni-app project into a pure vue.js project, and is used for a client, including: at least one processor; and a memory communicatively connected to the at least one processor; wherein, the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to:

[0145] Obtain a project folder, and determine whether the project folder is a uni-app project;

[0146] If it is a uni-app project, copy the project file content in the project folder to obtain a to-be-converted folderA project file, and sequentially perform directory adjustment, replacement of uni-specific components, conversion of uni-specific APIs, and conversion of uni-specific routing to Vue Router routing configuration on the folderA project file and the code content to obtain a target folderA project file;

[0147] Manually adjust the target folderA project file according to the developer, and test and verify the code content in the manually adjusted target folderA project file;

[0148] Determine whether the project folder is successfully converted according to the verification result.

[0149] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on such an understanding, the essence of the above technical solution, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to execute the methods of each embodiment or some parts of the embodiments.

[0150] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements for some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention. < / el-button> < / button> < / text> < / view>

Claims

1. An automated method for converting a uni-app project into a pure vue.js project, characterized in that: include: Get the project folder and determine whether the project folder is a uni-app project; If it is a uni-app project, the project file content in the project folder is copied to obtain the folderA project file to be converted, and the folderA project file and code content are adjusted in directory, uni-specific components are replaced, uni-specific APIs are converted, and uni-specific routes are converted to Vue Router route configurations according to the preset intelligent conversion rule set configuration file to obtain the target folderA project file; According to the developer manually adjusting the target folderA project file, and testing and verifying the code content in each location of the manually adjusted target folderA project file; Determine whether the project folder is successfully converted based on the verification result.

2. An automated method for converting a uni-app project into a pure vue.js project according to claim 1, characterized in that: The determining whether the project folder is a uni-app project includes: Obtain the folder path of the project folder according to the settings.json file information, and obtain the package.json file in the root directory of the project folder according to the folder path; Determine whether the file content in the package.json file contains any dependent plug-ins of @dcloudio / uni-app or @dcloudio / uni-*.

3. An automated method for converting a uni-app project into a pure vue.js project according to claim 2, characterized in that: If it is a uni-app project, the project file contents in the project folder are copied to obtain the folderA project file to be converted, including: If the package.json file contains dependent plug-ins of @dcloudio / uni-app or @dcloudio / uni-*, then build the folderA folder; Copy the project file content in the project folder and the corresponding configuration of the settings.json file to the folderA folder to obtain the folderA project file to be converted.

4. The automated method for converting a uni-app project into a pure vue.js project according to claim 1, characterized in that: The step of adjusting the directories of the folderA project files and code contents in sequence according to the preset intelligent conversion rule set configuration file includes: Determine whether there is a src folder in the root directory of the folderA project file; If the src folder exists, traverse the src folder and determine whether there is a views folder in the root directory of the src folder; If the views folder does not exist, search for the / ** / page folder, / ** / pages folder, and / ** / view folder under the folderA project file, and copy all the contents of the first result folder found to the newly created views folder; Determine whether there is a router folder in the root directory of the src folder; If the router folder exists, check whether there is an index.js file in the root directory of the router folder; If the index.js file does not exist, search for the / ** / router.js file, / ** / routes / index.js file, and / ** / route / index.js file in the folderA project file respectively, copy the first result file found to the router folder, and rename the copied router folder to index.js; Determine whether there is an assets folder in the root directory of the src folder; If the assets folder does not exist, search for the / ** / asset folder and the / ** / static folder under the folderA project file respectively, and copy all the contents of the first result folder found to the newly created assets folder.

5. An automated method for converting a uni-app project into a pure vue.js project according to claim 4, characterized in that: The directory adjustment of the folderA project files and code contents also includes: If the src folder does not exist, create it; If the views folder exists, there is no need to operate on the views folder; If the router folder does not exist, create it; If the index.js file exists, there is no need to operate on the index.js file; If the assets folder exists, there is no need to operate on the assets folder.

6. The automated method for converting a uni-app project into a pure vue.js project according to claim 1, characterized in that: The uni-specific component replacements include: Get all vue files and js files in the project folder and remove other conditional compilation platform identifiers; Read the contents of the vue file and the js file, traverse each platform identifier, build a regular expression and replace the matched content with an empty string. The matching logic of the regular expression is to remove all the contents of the code block from the start of the conditional compilation to the end of the conditional compilation. Convert uni-app components into HTML tags and ElementUI components or other UI component library components, read all CSS files, SASS files, LESS files and vue files in the project folder, and convert rpx units into px / rem units used by web pages.

7. The automated method for converting a uni-app project into a pure vue.js project according to claim 1, characterized in that: The uni-specific API conversions include: Configure the mapping relationship between uni.xxx API and browser / vue.js standard API in the settings.json file; Get all / ** / *.vue files and / ** / *.js files in folderA project files, and define the transform function of AST conversion code; Create a jscodeshift instance based on the TypeScript parser, parse the file content based on the jscodeshift instance, and generate the root node root of the AST; Find all the call expressions of uni objects according to the root.find method, replace the matched call expressions based on the replaceWith method, and replace the uni objects with the target API according to the mapping relationship.

8. The automated method for converting a uni-app project into a pure vue.js project according to claim 1, characterized in that: The uni-specific routing is converted to Vue Router routing configuration including: Search for the / ** / pages.json file under the folderA project file and obtain the first result file found; Read the content in pages.json to get the variable pagesConfi array; According to the map method, the pagesConfig array is traversed, a routing object is generated for each page configuration, the path of the routing object is set and the lazy loading import is performed, and finally a new vue router routing configuration is generated; The new Vue Router routing configuration is written to the / src / router / index.js file according to the fs.writeFileSync method.

9. The automated method for converting a uni-app project into a pure vue.js project according to claim 1, characterized in that: The manual adjustment of the target folderA project file by the developer includes: The redundant files and code contents in the target folderA project file are removed and modified according to the developer.

10. An automated system for converting a uni-app project into a pure vue.js project, characterized in that: include: A judgment module is configured to obtain a project folder and judge whether the project folder is a uni-app project; The conversion module is configured to copy the project file content in the project folder to obtain the folderA project file to be converted if it is a uni-app project, and perform directory adjustment, uni-specific component replacement, uni-specific API conversion, and uni-specific routing conversion to Vue Router routing configuration on the folderA project file and code content in sequence according to a preset intelligent conversion rule set configuration file to obtain the target folderA project file; An adjustment module is configured to manually adjust the target folderA project file according to the developer, and test and verify the code content at each location in the manually adjusted target folderA project file; The determination module is configured to determine whether the project folder is converted successfully according to the verification result.

Images