一种基于组件化模板的VUE项目平滑升级方法技术

本发明专利技术公开了一种基于组件化模板的VUE项目平滑升级方法，属于计算机软件技术前端领域，包括以下步骤：S1：创建基础框架工程；S2：组件化基础框架工程并打包上传；S3：搭建脚手架工程并引入基础框架工程；S4：打包上传脚手架工程；S5：安装脚手架组件；S6：通过脚手架创建VUE实例工程并安装依赖；S7：升级基础框架工程；S8：实例工程同步平滑升级。本发明专利技术通过搭建组件化的模板工程，将其作为依赖，通过自定义的脚手架搭建工程引入，即实现了工程的创建，实现了项目的平滑升级方法；最终整个工程通过自定义的脚手架、框架模板实现了整个VUE实例工程的平滑升级。工程的平滑升级。工程的平滑升级。

【技术实现步骤摘要】
一种基于组件化模板的VUE项目平滑升级方法


[0001]本专利技术涉及计算机软件技术前端领域，具体涉及一种基于组件化模板的VUE(渐进式框架)项目平滑升级方法。

技术介绍

[0002]随着互联网领域前后端分离架构的需求量不断增加，同时也为了满足MVVM模式的架构模式，更多用户选择了通过搭建VUE工程作为项目的前端。然而在使用VUE作为前端工程的架构方案时，面临的一个巨大问题是无法进行平滑升级，当项目需要升级时，只能在原项目基础上进行修改或者新增操作，当修改内容较多时，需要对原有项目进行整体重构和改造，工作量巨大，而且容易在改造过程中出现无法与原项目匹配的问题。
[0003]另外，如果一个前端工程中有部分内容可以被其它的前端工程复用时，目前只能通过在每个需要的前端工程中手动选取需要被复用的部分进行代码拷贝、修改，这导致了代码高度耦合，同样面临了工作量巨大而且容易出错的问题。当复用内容进行了修改，引入的所有工程也必须同步手动修改。一旦工程中对复用内容进行了覆盖，或者对其中的内容进行分了自定义的改造，就无法同步升级。
[0004]因此，迫切需要一种方式能够解决VUE工程元素复用和平滑升级的问题，尤其是需要经常对版本进行升级和维护的项目，为此，提出一种基于组件化模板的VUE项目平滑升级方法。

技术实现思路

[0005]本专利技术所要解决的技术问题在于：如何解决VUE工程元素复用和平滑升级的问题，提供了一种基于组件化模板的VUE项目平滑升级方法。
[0006]本专利技术是通过以下技术方案解决上述技术问题的，本专利技术包括以下步骤：
[0007]S1：创建基础框架工程
[0008]通过vue-cli原生脚手架创建一个VUE工程，将该VUE工程作为基础框架工程；
[0009]S2：组件化基础框架工程并打包上传
[0010]将基础框架工程封装为组件，包括所有页面及需要使用的静态资源，并将基础框架工程打包上传至npm私服作为模板；
[0011]S3：搭建脚手架工程并引入基础框架工程
[0012]自定义脚手架工程，并将基础框架工程作为模板引入；
[0013]S4：打包上传脚手架工程
[0014]将步骤S3中的脚手架工程打包并上传至npm私服上；
[0015]S5：安装脚手架组件
[0016]在创建VUE实例工程前，先配置npm私服地址并全局安装脚手架组件；
[0017]S6：通过脚手架创建VUE实例工程并安装依赖
[0018]通过封装的脚手架创建新的VUE实例项目，即通过自定义的指令创建新的VUE实例
工程，此时新工程的package.json文件中将引入基础框架工程，npm install安装后node_modules中已存在基础框架工程；同时基础框架工程的前端页面已封装为组件，VUE实例工程根据实例项目需求采用组件的方式引入，或通过新建组件进行覆盖；再在命令界面配置基础框架工程的基础设置，基础配置直接在新创建的VUE实例工程中生效；
[0019]S7：升级基础框架工程
[0020]在需要时对基础框架工程进行升级，升级后上传至npm私服；
[0021]S8：实例工程同步平滑升级
[0022]在VUE实例工程中更新依赖，完成同步平滑升级。
[0023]更进一步地，在所述步骤S2中，组件化基础框架工程并打包上传的过程如下：
[0024]S21：基于vue-cli搭建VUE基础框架工程；
[0025]S22：修改src目录；
[0026]S23：在根目录下新建packages文件夹；
[0027]S24：添加配置文件；
[0028]S25：编写组件，在packages文件夹进行页面开发，使用export default提供一个接口给外界，让其他文件通过import来引入使用；
[0029]S26：根据基础框架工程页面，在packages的vue页面的同级目录下新建js文件，暴露组件；在vue页面的上级目录下新建配置文件，进行全局组件的注册；
[0030]S27：在examples目录下新建vue页面，引入对应的组件；
[0031]S28：库模式打包，将一个单独的入口打包成一个库，上传至npm私服仓库。
[0032]更进一步地，在所述步骤S21中，基础框架工程包括公共页面、静态资源，跳转逻辑，公共方法。
[0033]更进一步地，在所述步骤S3中，通过引入基础框架工程的脚手架新建VUE实例工程时即导入基础框架工程。
[0034]更进一步地，在所述步骤S3中，脚手架增加基础框架工程的基础配置选择，用户在搭建新的VUE实例工程时，通过命令界面选择基础配置。
[0035]更进一步地，在所述步骤S3及S4中，自定义脚手架工程搭建并上传的过程如下：
[0036]S31：创建目录，执行npm init命令，修改package.json写入依赖，npm install安装依赖；
[0037]S32：创建bin目录并在bin目录下创建无后缀文件，该文件作为整个脚手架的入口文件；
[0038]S33：bin目录初始化，编写bin目录下的无后缀文件，在根目录下执行npm link，把命令挂载到全局。根据新增的指令新建文件，并在package.json内写入，执行npm unlink解绑全局命令，再执行npm link重新把命令绑定到全局，在根目录下新建一个template.json文件，写入空json符号；
[0039]S34：在新增的指令文件中编写具体指令；
[0040]S35：打包上传至npm私服，供用户通过npm私服下载、使用。
[0041]更进一步地，在所述步骤S34中，指令包括添加模板并存储、删除模板、初始化、导入基础框架工程。
[0042]更进一步地，在所述步骤S7中，对基础框架工程进行升级的方式为两种，分别为更
新版本、直接覆盖原来的模板。
[0043]更进一步地，在所述步骤S8中，如果基础框架工程是通过更新版本进行升级，则VUE实例工程在package.json中找到基础框架工程的依赖，修改版本后重新导入依赖即可完成同步平滑升级；如果基础框架工程是通过直接覆盖进行升级，则VUE实例工程将原有依赖卸载重新安装即可完成同步平滑升级。
[0044]本专利技术相比现有技术具有以下优点：该基于组件化模板的VUE项目平滑升级方法，通过搭建组件化的模板工程，将其作为依赖，通过自定义的脚手架搭建工程引入，即实现了工程的创建，实现了项目的平滑升级方法；最终整个工程通过自定义的脚手架、框架模板实现了整个VUE实例工程的平滑升级，相比于传统的VUE项目，需要手动升级，保证了整个项目的可维护性，也提供了一个更加安全、便捷的升级方式；同时操作方式相对简单，没有对开发者增加新的学习成本，值得被推广使用。
附图说明
[0045]图1是本专利技术实施例二中的整体流程本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于组件化模板的VUE项目平滑升级方法，其特征在于，包括：S1：创建基础框架工程通过vue-cli原生脚手架创建一个VUE工程，将该VUE工程作为基础框架工程；S2：组件化基础框架工程并打包上传将基础框架工程封装为组件，包括所有页面及需要使用的静态资源，并将基础框架工程打包上传至npm私服作为模板；S3：搭建脚手架工程并引入基础框架工程自定义脚手架工程，并将基础框架工程作为模板引入；S4：打包上传脚手架工程将步骤S3中脚手架工程打包并上传至npm私服上；S5：安装脚手架组件在创建VUE实例工程前，先配置npm私服地址并全局安装脚手架组件；S6：通过脚手架创建VUE实例工程并安装依赖通过封装的脚手架创建新的VUE实例项目，即通过自定义的指令创建新的VUE实例工程，此时新工程的package.json文件中将引入基础框架工程，npminstall安装后node_modules中已存在基础框架工程；同时基础框架工程中的前端页面已封装为组件，VUE实例工程根据实例项目需求采用组件的方式引入，或通过新建组件进行覆盖；再在命令界面配置基础框架工程的基础设置，基础配置直接在新创建的VUE实例工程中生效；S7：升级基础框架工程在需要时对基础框架工程进行升级，升级后上传至npm私服；S8：实例工程同步平滑升级在VUE实例工程中更新依赖，完成同步平滑升级。2.根据权利要求1所述的一种基于组件化模板的VUE项目平滑升级方法，其特征在于：在所述步骤S2中，组件化基础框架工程并打包上传的过程如下：S21：基于vue-cli搭建VUE基础框架工程；S22：修改src目录；S23：在根目录下新建packages文件夹；S24：添加配置文件；S25：编写组件，在packages文件夹进行页面开发，使用export default提供一个接口给外界，让其他文件通过import来引入使用；S26：根据基础框架工程页面，在packages的vue页面的同级目录下新建js文件，暴露组件；在vue页面的上级目录下新建配置文件，进行全局组件的注册；S27：在examples目录下新建vue页面，引入对应的组件；S28：将一个单独的入口打包成一个库，上传至npm私服仓库。3.根据权利要求2所述的一种基于组件化模板的VUE项目平滑升...

【专利技术属性】
技术研发人员：冯强中，范文斌，刘成彪，吴彤彤，张天明，孙伟，
申请(专利权)人：科大国创云网科技有限公司，
类型：发明
国别省市：