CN115480801A - 一种基于Vue框架的多项目开发部署运行方法和系统 - Google Patents

一种基于Vue框架的多项目开发部署运行方法和系统 Download PDF

Info

Publication number
CN115480801A
CN115480801A CN202211168448.5A CN202211168448A CN115480801A CN 115480801 A CN115480801 A CN 115480801A CN 202211168448 A CN202211168448 A CN 202211168448A CN 115480801 A CN115480801 A CN 115480801A
Authority
CN
China
Prior art keywords
project
framework
vue
deployment
public
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211168448.5A
Other languages
English (en)
Inventor
凌诚
李晓越
陈立峰
许明明
冯谊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Suzhou Shenma Wuxin Intelligent Technology Co ltd
Original Assignee
Suzhou Shenma Wuxin Intelligent Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Suzhou Shenma Wuxin Intelligent Technology Co ltd filed Critical Suzhou Shenma Wuxin Intelligent Technology Co ltd
Priority to CN202211168448.5A priority Critical patent/CN115480801A/zh
Publication of CN115480801A publication Critical patent/CN115480801A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/60—Software deployment
    • G06F8/65—Updates
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/60—Software deployment
    • G06F8/61—Installation
    • G06F8/63—Image based installation; Cloning; Build to order
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Management, Administration, Business Operations System, And Electronic Commerce (AREA)

Abstract

本发明涉及服务器技术领域，具体涉及一种基于Vue框架的多项目开发部署运行方法和系统。该方法采用框架公共项目和各个项目有独立的git仓库，由各个项目组独立开发；各个项目依赖的共性化组件版本统一，都由框架公共项目决定，当需要升级时只需升级框架公共项目的文件即可，业务项目无需升级；各个项目依赖的个性化组件互不影响且版本各异，都打包在各个项目的文件里；各个项目之间的代码无耦合；发版风险低，各个项目的发版计划互不影响；各个项目更新时，只需替换框架biz下对应的项目打包文件即可。适合多个新建项目开发，一个框架运行时支持多项目部署，项目以插件式部署到框架内，公用框架所提供的资源，各产品之间的发布更新互不影响。

Description

一种基于Vue框架的多项目开发部署运行方法和系统
技术领域
本发明涉及服务器技术领域，尤其涉及一种基于Vue框架的多项目开发部署运行方法和系统。
背景技术
Vue是一个js库，且不依赖任何其它第三方的js库。Vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库。Vue是一个构建数据驱动的Web界面的渐进式MVVM框架，MVVM是基于MVC模式演变出来的，MVC是早期偏后端开发的模式，想做双向绑定就只能DOM模拟，但是MVVM实现了响应式的双向数据绑定，其核心只关注视图层，并且非常容易学习,让开发人员更加专注于功能的实现，而不是浪费在各种事件和渲染的设计上。换句话说就是，开发者只要专注于怎么操作数据，而不用去关心怎么将数据渲染到页面上去展示，一切都由Vue自动完成。
目前市场上前端框架较多，但没有一个能用一个运行时支持多项目部署的框架，都需要新建项目，独立部署运行，不能公用一个第三方组件包或自定义的JS组件库支撑多个项目的运行，市面上主流的前端框架有Vue、React、Angular、Node等等。
例React搭建开发项目的步骤分为，第一步，安装Node.js；第二步，安装webpack；第三步，配置淘宝镜像；第四步，安装create-react-app；第五步，创建项目，第六步，启动本地服务，第七步，项目打包部署至Web服务器上运行；原生的开发模式是一个项目一个工程文件，每个项目里面的src文件里面按功能模块划分，划分后的每个子文夹存放对应的前端页面文件及Js文件，最后引用其它的第三方工具包或自已封装的一些公共JS组件；如果有第二个项目，重复上述步骤重新操作一遍。
此时每个项目都会有独立的工程，自已开发的公共JS组件被复制引用了很多份，如果公共JS组件需要发版，需要更新发版所有的项目，这个工作量很大。为了解决这个问题有人提出了另外一种方案，建一个工程，引用一份公共JS组件，在Views文件夹里面按项目划分建子文件夹，在项目子文件夹中按模块功能划分，存储这个模块对应的Vue页面，这个办法看似可以解决公共JS组件库更新的问题，可是从而带来了另外一个问题，最终部署上线时是按照上述的第六步打包部署上线，一个工程里面集成了好几个项目，最后是一起部署上线的，如果只有A项目的代码发生了更改，而B项目并未做修改，按照这个方案两个项目将同时更新部署，且很容易造成B项目的BUG，原因在于源代码管理不全导致。
这些框架均都无法支撑一个运行框架支持多项目插件化的部署的方案，Vue框架适合单个新建项目开发，如果要多项目，需要为每个项目新建工程，且每个项目需要引用相关的第三方组件库或自封装的业务组件库，组件库更新升级时，需每个项目都要操作一遍，费时费力，更新成本较高，维护性较差，不利项目管理开发。
发明内容
鉴于此，本发明提供了一种基于Vue框架的多项目开发部署运行方法和系统，适合多个新建项目开发，一个框架运行时支持多项目部署，项目以插件式部署到框架内，公用框架所提供的资源，各产品之间的发布更新互不影响。
为实现上述目的，本发明实施例提供了如下的技术方案：
第一方面，在本发明提供的一个实施例中，提供了一种基于Vue框架的多项目开发部署运行方法，该方法包括：
通过vue框架的脚手架工具创建vue项目，在终端输入vue create项目名称，定义框架公共项目；
使用node命令进行框架项目构建及打包，并将框架项目组件发布到私有镜像仓库；
为各个业务项目创建独立的git源码仓库，设置私有镜像仓库地址并且安装公共框架组件包，定义各个业务系统项目；
将业务项目生成的2个js文件放在公共框架部署包目录的biz目录内；
在公共框架部署包根目录下运行xdo工具包命令，生成业务系统清单文件；
部署及运行框架公共项目及业务项目。
作为本发明的进一步方案，定义框架公共项目时，还包括创建框架公共项目git源码仓库，其中，创建框架公共项目git源码仓库时，由一个项目组独立开发及维护。
作为本发明的进一步方案，创建框架公共项目git源码仓库时，还包括：
基于GitLab系统的可视化界面进行项目创建，项目创建前包括管理员账号登录操作。
作为本发明的进一步方案，所述vue框架的脚手架工具为vue-cli，在通过vue框架的脚手架工具创建vue项目时，包括：
安装node.js运行环境；
安装vue-cli工具，在终端输入管理员账号；
使用vue-cli创建项目,在终端输入vue create项目名称；
根据引导提示,输入相关信息,直到项目创建成功。
作为本发明的进一步方案，定义框架公共项目中，基于创建的框架公共项目git源码仓库，通过框架公共项目的package.json的文件定义：公用的依赖组件及版本、业务组件、标准功能、钩子工具函数、xdo工具命令包。
作为本发明的进一步方案，使用node命令进行框架项目构建及打包时，包括：
使用node命令npm install和npm run build进行框架项目构建及打包，生成部署dist目录；
使用node命令npm publish将框架项目组件发布到私有镜像仓库。
作为本发明的进一步方案，定义各个业务系统项目时，还包括：
项目通过vue的脚手架工具vue-cli创建各自的vue业务项目；
在各个业务项目的package.json文件中定义依赖的个性化组件及其版本；
修改业务项目的入口文件，删除vue项目默认的加载代码，将项目以插件方式向公共框架提供注册，注册时会将业务系统的router信息和state信息添加至框架项目对应的router和state中；
在vue.config.js文件中定义业务项目的webpack打包流程；
使用xdo工具打包命令生成业务系统的2个js文件。
作为本发明的进一步方案，部署及运行框架公共项目及业务项目，包括：
将生成好的打包文件拷贝至服务器；
在服务器安装nginx软件，并进行站点配置信息，将主目录指向dist目录；
在浏览器输入nginx对应的ip和端口信息访问系统，动态加载业务系统的js文件，跳转至相对应的路由，并呈现页面信息。
第二方面，在本发明提供的另一个实施例中，提供了一种基于Vue框架的多项目开发部署运行系统，包括：
框架项目定义模块，用于通过vue框架的脚手架工具创建vue项目，在终端输入vuecreate项目名称，定义框架公共项目；
打包发布模块，用于使用node命令进行框架项目构建及打包，并将框架项目组件发布到私有镜像仓库；
业务系统项目定义模块，用于为各个业务项目创建独立的git源码仓库，设置私有镜像仓库地址并且安装公共框架组件包，定义各个业务系统项目；
清单文件生成模块，用于在业务项目生成的2个js文件放在公共框架部署包目录的biz目录内后，在公共框架部署包根目录下运行xdo工具包命令，生成业务系统清单文件；
项目部署运行模块，用于部署及运行框架公共项目及业务项目。
作为本发明的进一步方案，还包括站点配置模块，用于在服务器安装nginx软件后，进行站点配置信息，将主目录指向dist目录，以通过浏览器浏览页面，访问平台多个业务系统页面。
第三方面，在本发明提供的又一个实施例中，提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器加载并执行所述计算机程序时实现基于Vue框架的多项目开发部署运行方法的步骤。
第四方面，在本发明提供的再一个实施例中，提供了一种存储介质，存储有计算机程序，所述计算机程序被处理器加载并执行时实现所述基于Vue框架的多项目开发部署运行方法的步骤。
本发明提供的技术方案，具有如下有益效果：
本发明提供的基于Vue框架的多项目开发部署运行方法和系统，框架公共项目和各个项目有独立的git仓库，由各个项目组独立开发；各个项目依赖的共性化组件版本统一，都由框架公共项目决定，当需要升级时只需升级框架公共项目的文件即可，业务项目无需升级；各个项目依赖的个性化组件互不影响且版本各异，都打包在各个项目的文件里；各个项目之间的代码无耦合；发版风险低，各个项目的发版计划互不影响；各个项目更新时，只需替换框架biz下对应的项目打包文件即可。适合多个新建项目开发，一个框架运行时支持多项目部署，项目以插件式部署到框架内，公用框架所提供的资源，各产品之间的发布更新互不影响。
本发明的这些方面或其他方面在以下实施例的描述中会更加简明易懂。应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例。在附图中：
图1为本发明一个实施例的一种基于Vue框架的多项目开发部署运行方法的流程图。
图2为本发明一个实施例的一种基于Vue框架的多项目开发部署运行系统的系统框图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
附图中所示的流程图仅是示例说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解、组合或部分合并，因此实际执行的顺序有可能根据实际情况改变。
应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。
应当理解，为了便于清楚描述本发明实施例的技术方案，在本发明的实施例中，采用了“第一”、“第二”等字样对功能和作用基本相同的相同项或相似项进行区分。本领域技术人员可以理解“第一”、“第二”等字样并不对数量和执行次序进行限定，并且“第一”、“第二”等字样也并不限定一定不同。
还应当进理解，在本发明说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
由于目前市场上前端框架较多，但没有一个能用一个运行时支持多项目部署的框架，都需要新建项目，独立部署运行，不能公用一个第三方组件包或自定义的JS组件库支撑多个项目的运行，市面上主流的前端框架有Vue、React、Angular、Node等等。
因此，本发明提供了一种基于Vue框架的多项目开发部署运行方法和系统，适合多个新建项目开发，一个框架运行时支持多项目部署，项目以插件式部署到这个框架内，公用框架所提供的资源，各产品之间的发布更新互不影响。
具体地，下面结合附图，对本发明实施例作进一步阐述。
请参阅图1，图1是本发明实施例提供的一种基于Vue框架的多项目开发部署运行方法的流程图，如图1所示，该基于Vue框架的多项目开发部署运行方法包括步骤S10至步骤S60。
S10、通过vue框架的脚手架工具创建vue项目，在终端输入vue create项目名称，定义框架公共项目。
在一些实施例中，定义框架公共项目时，还包括创建框架公共项目git源码仓库，其中，创建框架公共项目git源码仓库时，由一个项目组独立开发及维护。
在一些实施例中，创建框架公共项目git源码仓库时，还包括：
基于GitLab系统的可视化界面进行项目创建，项目创建前包括管理员账号登录操作。
在一些实施例中，所述vue框架的脚手架工具为vue-cli，在通过vue框架的脚手架工具创建vue项目时，包括：
安装node.js运行环境；
安装vue-cli工具，在终端输入管理员账号；
使用vue-cli创建项目,在终端输入vue create项目名称；
根据引导提示,输入相关信息,直到项目创建成功。
在一些实施例中，定义框架公共项目中，基于创建的框架公共项目git源码仓库，通过框架公共项目的package.json的文件定义：公用的依赖组件及版本、业务组件、标准功能、钩子工具函数、xdo工具命令包。
S20、使用node命令进行框架项目构建及打包，并将框架项目组件发布到私有镜像仓库。
在一些实施例中，使用node命令进行框架项目构建及打包时，包括：
使用node命令npm install和npm run build进行框架项目构建及打包，生成部署dist目录；
使用node命令npm publish将框架项目组件发布到私有镜像仓库。
S30、为各个业务项目创建独立的git源码仓库，设置私有镜像仓库地址并且安装公共框架组件包，定义各个业务系统项目。
在一些实施例中，定义各个业务系统项目时，还包括：
项目通过vue的脚手架工具vue-cli创建各自的vue业务项目；
在各个业务项目的package.json文件中定义依赖的个性化组件及其版本；
修改业务项目的入口文件，删除vue项目默认的加载代码，将项目以插件方式向公共框架提供注册，注册时会将业务系统的router信息和state信息添加至框架项目对应的router和state中；
在vue.config.js文件中定义业务项目的webpack打包流程；
使用xdo工具打包命令生成业务系统的2个js文件。
S40、将业务项目生成的2个js文件放在公共框架部署包目录的biz目录内；
S50、在公共框架部署包根目录下运行xdo工具包命令，生成业务系统清单文件；
S60、部署及运行框架公共项目及业务项目。
在一些实施例中，部署及运行框架公共项目及业务项目，包括：
将生成好的打包文件拷贝至服务器；
在服务器安装nginx软件，并进行站点配置信息，将主目录指向dist目录；
在浏览器输入nginx对应的ip和端口信息访问系统，动态加载业务系统的js文件，跳转至相对应的路由，并呈现页面信息。
本发明提供的基于Vue框架的多项目开发部署运行方法，框架公共项目和各个项目有独立的git仓库，由各个项目组独立开发；各个项目依赖的共性化组件版本统一，都由框架公共项目决定，当需要升级时只需升级框架公共项目的文件即可，业务项目无需升级；各个项目依赖的个性化组件互不影响且版本各异，都打包在各个项目的文件里；各个项目之间的代码无耦合；发版风险低，各个项目的发版计划互不影响；各个项目更新时，只需替换框架biz下对应的项目打包文件即可。适合多个新建项目开发，一个框架运行时支持多项目部署，项目以插件式部署到这个框架内，公用框架所提供的资源，各产品之间的发布更新互不影响。
示例性的，本发明的基于Vue框架的多项目开发部署运行方法，包括以下步骤：
步骤1：定义框架公共项目
(1)创建框架公共项目git源码仓库,此项目由一个项目组独立开发及维护；
(2)通过vue的脚手架工具(vue-cli)创建vue项目；
(3)在框架公共项目的package.json文件中定义公用的依赖组件及其版本，例如vue、vue-router、vuex、iview、ag-grid、eslint、less等；
(4)在框架公共项目中定义公用的业务组件，例如公共助手类、自定义配置列、动态表单等组件；
(5)在框架公共项目中定义标准功能，例如登录、框架引导，修改密码、语言切换、登出等；
(6)在框架项目中定义钩子工具函数，用来动态加载各个业务系统的js文件；
(7)在框架项目中定义xdo工具命令包，它的主要作用有安装更新依赖组件、检查并更新框架公共项目组件、打包生成业务系统部署的文件、生成业务系统清单(biz.config.json)文件等；
步骤2：打包及发布框架公共项目
(1)使用node命令npm install和npm run build进行框架项目构建及打包，生成部署dist目录，里面主要包含css、js、fonts、img及一些配置等信息；
(2)使用node命令npm publish将框架项目组件发布到私有镜像仓库；
步骤3：定义各个业务系统项目
(1)为各个业务项目创建独立的git源码仓库，由各个业务项目组独立开发及维护；
(2)设置私有镜像仓库地址并且安装公共框架组件包；
(3)项目通过vue的脚手架工具(vue-cli)创建各自的vue业务项目；
(4)在各个业务项目的package.json文件中定义依赖的个性化组件及其版本；
(5)修改业务项目的入口(main.js)文件，删除vue项目默认的加载代码，将项目以插件方式向公共框架提供注册，注册时会将业务系统的router信息和state信息添加至框架项目对应的router和state中；
(6)在vue.config.js文件中定义业务项目的webpack打包流程；
(7)使用xdo工具打包命令生成业务系统的2个js文件；
步骤4：将业务项目的js文件放在公共框架部署包目录的biz目录内；
步骤5：在公共框架部署包根目录下运行xdo工具包命令，生成业务系统清单文件；
步骤6：部署及运行框架公共项目及业务项目；
(1)将步骤2生成好的打包文件(dist目录)拷贝至服务器；
(2)在服务器安装nginx软件，并进行站点配置信息，将主目录指向dist目录；
(3)在浏览器输入nginx对应的ip和端口信息，即可访问系统，用户登录后点击系统菜单，会动态加载业务系统的js文件，跳转至相对应的路由，并呈现页面信息。
应该理解的是，上述虽然是按照某一顺序描述的，但是这些步骤并不是必然按照上述顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，本实施例的一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
参见图2所示，本发明的一个实施例提供一种基于Vue框架的多项目开发部署运行系统，该系统包括框架项目定义模块100、打包发布模块200、业务系统项目定义模块300、清单文件生成模块400、项目部署运行模块500以及站点配置模块600。
在本发明实施例中，所述框架项目定义模块100，用于通过vue框架的脚手架工具创建vue项目，在终端输入vue create项目名称，定义框架公共项目；所述打包发布模块200，用于使用node命令进行框架项目构建及打包，并将框架项目组件发布到私有镜像仓库；
所述业务系统项目定义模块300，用于为各个业务项目创建独立的git源码仓库，设置私有镜像仓库地址并且安装公共框架组件包，定义各个业务系统项目；所述清单文件生成模块400，用于在业务项目生成的2个js文件放在公共框架部署包目录的biz目录内后，在公共框架部署包根目录下运行xdo工具包命令，生成业务系统清单文件；
所述项目部署运行模块500，用于部署及运行框架公共项目及业务项目。
所述站点配置模块600，用于在服务器安装nginx软件后，进行站点配置信息，将主目录指向dist目录，以通过浏览器浏览页面，访问平台多个业务系统页面。
本发明提供的基于Vue框架的多项目开发部署运行系统，框架公共项目和各个项目有独立的git仓库，由各个项目组独立开发；各个项目依赖的共性化组件版本统一，都由框架公共项目决定，当需要升级时只需升级框架公共项目的文件即可，业务项目无需升级；各个项目依赖的个性化组件互不影响且版本各异，都打包在各个项目的文件里；各个项目之间的代码无耦合；发版风险低，各个项目的发版计划互不影响；各个项目更新时，只需替换框架biz下对应的项目打包文件即可。适合多个新建项目开发，一个框架运行时支持多项目部署，项目以插件式部署到这个框架内，公用框架所提供的资源，各产品之间的发布更新互不影响。
需要特别说明的是，基于Vue框架的多项目开发部署运行系统进行执行如前述实施例的一种基于Vue框架的多项目开发部署运行方法，因此，本实施例中对基于Vue框架的多项目开发部署运行方法不再详细介绍。
在一个实施例中，在本发明的实施例中还提供了一种计算机设备，包括至少一个处理器，以及与所述至少一个处理器通信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器执行所述的基于Vue框架的多项目开发部署运行方法，该处理器执行指令时实现上述各方法实施例中的步骤：
步骤1：定义框架公共项目
(1)创建框架公共项目git源码仓库,此项目由一个项目组独立开发及维护；
(2)通过vue的脚手架工具(vue-cli)创建vue项目；
(3)在框架公共项目的package.json文件中定义公用的依赖组件及其版本，例如vue、vue-router、vuex、iview、ag-grid、eslint、less等；
(4)在框架公共项目中定义公用的业务组件，例如公共助手类、自定义配置列、动态表单等组件；
(5)在框架公共项目中定义标准功能，例如登录、框架引导，修改密码、语言切换、登出等；
(6)在框架项目中定义钩子工具函数，用来动态加载各个业务系统的js文件；
(7)在框架项目中定义xdo工具命令包，它的主要作用有安装更新依赖组件、检查并更新框架公共项目组件、打包生成业务系统部署的文件、生成业务系统清单(biz.config.json)文件等；
步骤2：打包及发布框架公共项目
(1)使用node命令npm install和npm run build进行框架项目构建及打包，生成部署dist目录，里面主要包含css、js、fonts、img及一些配置等信息；
(2)使用node命令npm publish将框架项目组件发布到私有镜像仓库；
步骤3：定义各个业务系统项目
(1)为各个业务项目创建独立的git源码仓库，由各个业务项目组独立开发及维护；
(2)设置私有镜像仓库地址并且安装公共框架组件包；
(3)项目通过vue的脚手架工具(vue-cli)创建各自的vue业务项目；
(4)在各个业务项目的package.json文件中定义依赖的个性化组件及其版本；
(5)修改业务项目的入口(main.js)文件，删除vue项目默认的加载代码，将项目以插件方式向公共框架提供注册，注册时会将业务系统的router信息和state信息添加至框架项目对应的router和state中；
(6)在vue.config.js文件中定义业务项目的webpack打包流程；
(7)使用xdo工具打包命令生成业务系统的2个js文件；
步骤4：将业务项目的js文件放在公共框架部署包目录的biz目录内；
步骤5：在公共框架部署包根目录下运行xdo工具包命令，生成业务系统清单文件；
步骤6：部署及运行框架公共项目及业务项目；
(1)将步骤2生成好的打包文件(dist目录)拷贝至服务器；
(2)在服务器安装nginx软件，并进行站点配置信息，将主目录指向dist目录；
(3)在浏览器输入nginx对应的ip和端口信息，即可访问系统，用户登录后点击系统菜单，会动态加载业务系统的js文件，跳转至相对应的路由，并呈现页面信息。
在上下文中所称“计算机设备”，也称为“电脑”，是指可以通过运行预定程序或指令来执行数值计算和/或逻辑计算等预定处理过程的智能电子设备，其可以包括处理器与存储器，由处理器执行在存储器中预存的存续指令来执行预定处理过程，或是由ASIC、FPGA、DSP等硬件执行预定处理过程，或是由上述二者组合来实现。计算机设备包括但不限于服务器、个人电脑、笔记本电脑、平板电脑、智能手机等。
所述计算机设备包括用户设备与网络设备。其中，所述用户设备包括但不限于电脑、智能手机、PDA等；所述网络设备包括但不限于单个网络服务器、多个网络服务器组成的服务器组或基于云计算(Cloud Computing)的由大量计算机或网络服务器构成的云，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个超级虚拟计算机。其中，所述计算机设备可单独运行来实现本发明，也可接入网络并通过与网络中的其他计算机设备的交互操作来实现本发明。其中，所述计算机设备所处的网络包括但不限于互联网、广域网、城域网、局域网、VPN网络等。
在本发明的一个实施例中还提供了一种存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤：
步骤1：定义框架公共项目
(1)创建框架公共项目git源码仓库,此项目由一个项目组独立开发及维护；
(2)通过vue的脚手架工具(vue-cli)创建vue项目；
(3)在框架公共项目的package.json文件中定义公用的依赖组件及其版本，例如vue、vue-router、vuex、iview、ag-grid、eslint、less等；
(4)在框架公共项目中定义公用的业务组件，例如公共助手类、自定义配置列、动态表单等组件；
(5)在框架公共项目中定义标准功能，例如登录、框架引导，修改密码、语言切换、登出等；
(6)在框架项目中定义钩子工具函数，用来动态加载各个业务系统的js文件；
(7)在框架项目中定义xdo工具命令包，它的主要作用有安装更新依赖组件、检查并更新框架公共项目组件、打包生成业务系统部署的文件、生成业务系统清单(biz.config.json)文件等；
步骤2：打包及发布框架公共项目
(1)使用node命令npm install和npm run build进行框架项目构建及打包，生成部署dist目录，里面主要包含css、js、fonts、img及一些配置等信息；
(2)使用node命令npm publish将框架项目组件发布到私有镜像仓库；
步骤3：定义各个业务系统项目
(1)为各个业务项目创建独立的git源码仓库，由各个业务项目组独立开发及维护；
(2)设置私有镜像仓库地址并且安装公共框架组件包；
(3)项目通过vue的脚手架工具(vue-cli)创建各自的vue业务项目；
(4)在各个业务项目的package.json文件中定义依赖的个性化组件及其版本；
(5)修改业务项目的入口(main.js)文件，删除vue项目默认的加载代码，将项目以插件方式向公共框架提供注册，注册时会将业务系统的router信息和state信息添加至框架项目对应的router和state中；
(6)在vue.config.js文件中定义业务项目的webpack打包流程；
(7)使用xdo工具打包命令生成业务系统的2个js文件；
步骤4：将业务项目的js文件放在公共框架部署包目录的biz目录内；
步骤5：在公共框架部署包根目录下运行xdo工具包命令，生成业务系统清单文件；
步骤6：部署及运行框架公共项目及业务项目；
(1)将步骤2生成好的打包文件(dist目录)拷贝至服务器；
(2)在服务器安装nginx软件，并进行站点配置信息，将主目录指向dist目录；
(3)在浏览器输入nginx对应的ip和端口信息，即可访问系统，用户登录后点击系统菜单，会动态加载业务系统的js文件，跳转至相对应的路由，并呈现页面信息。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本发明所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。
综上所述，本发明提供的基于Vue框架的多项目开发部署运行方法和系统，适合多个新建项目开发，一个框架运行时支持多项目部署，项目以插件式部署到这个框架内，公用框架所提供的资源，各产品之间的发布更新互不影响。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种基于Vue框架的多项目开发部署运行方法，其特征在于，该方法包括：
通过vue框架的脚手架工具创建vue项目，在终端输入vue create项目名称，定义框架公共项目；
使用node命令进行框架项目构建及打包，并将框架项目组件发布到私有镜像仓库；
为各个业务项目创建独立的git源码仓库，设置私有镜像仓库地址并且安装公共框架组件包，定义各个业务系统项目；
将业务项目生成的2个js文件放在公共框架部署包目录的biz目录内；
在公共框架部署包根目录下运行xdo工具包命令，生成业务系统清单文件；
部署及运行框架公共项目及业务项目。
2.如权利要求1所述的基于Vue框架的多项目开发部署运行方法，其特征在于，定义框架公共项目时，还包括创建框架公共项目git源码仓库，其中，创建框架公共项目git源码仓库时，由一个项目组独立开发及维护。
3.如权利要求2所述的基于Vue框架的多项目开发部署运行方法，其特征在于，创建框架公共项目git源码仓库时，还包括：
基于GitLab系统的可视化界面进行项目创建，项目创建前包括管理员账号登录操作。
4.如权利要求3所述的基于Vue框架的多项目开发部署运行方法，其特征在于，所述vue框架的脚手架工具为vue-cli，在通过vue框架的脚手架工具创建vue项目时，包括：
安装node.js运行环境；
安装vue-cli工具，在终端输入管理员账号；
使用vue-cli创建项目,在终端输入vue create项目名称；
根据引导提示,输入相关信息,直到项目创建成功。
5.如权利要求4所述的基于Vue框架的多项目开发部署运行方法，其特征在于，定义框架公共项目中，基于创建的框架公共项目git源码仓库，通过框架公共项目的package.json的文件定义：公用的依赖组件及版本、业务组件、标准功能、钩子工具函数、xdo工具命令包。
6.如权利要求5所述的基于Vue框架的多项目开发部署运行方法，其特征在于，使用node命令进行框架项目构建及打包时，包括：
使用node命令npminstall和npm run build进行框架项目构建及打包，生成部署dist目录；
使用node命令npm publish将框架项目组件发布到私有镜像仓库。
7.如权利要求1所述的基于Vue框架的多项目开发部署运行方法，其特征在于，定义各个业务系统项目时，还包括：
项目通过vue的脚手架工具vue-cli创建各自的vue业务项目；
在各个业务项目的package.json文件中定义依赖的个性化组件及其版本；
修改业务项目的入口文件，删除vue项目默认的加载代码，将项目以插件方式向公共框架提供注册，注册时会将业务系统的router信息和state信息添加至框架项目对应的router和state中；
在vue.config.js文件中定义业务项目的webpack打包流程；
使用xdo工具打包命令生成业务系统的2个js文件。
8.如权利要求7所述的基于Vue框架的多项目开发部署运行方法，其特征在于，部署及运行框架公共项目及业务项目，包括：
将生成好的打包文件拷贝至服务器；
在服务器安装nginx软件，并进行站点配置信息，将主目录指向dist目录；
在浏览器输入nginx对应的ip和端口信息访问系统，动态加载业务系统的js文件，跳转至相对应的路由，并呈现页面信息。
9.一种基于Vue框架的多项目开发部署运行系统，其特征在于，所述基于Vue框架的多项目开发部署运行系统用于执行权利要求1-8中任意一项所述基于Vue框架的多项目开发部署运行方法；所述基于Vue框架的多项目开发部署运行系统，包括：
框架项目定义模块，用于通过vue框架的脚手架工具创建vue项目，在终端输入vuecreate项目名称，定义框架公共项目；
打包发布模块，用于使用node命令进行框架项目构建及打包，并将框架项目组件发布到私有镜像仓库；
业务系统项目定义模块，用于为各个业务项目创建独立的git源码仓库，设置私有镜像仓库地址并且安装公共框架组件包，定义各个业务系统项目；
清单文件生成模块，用于在业务项目生成的2个js文件放在公共框架部署包目录的biz目录内后，在公共框架部署包根目录下运行xdo工具包命令，生成业务系统清单文件；
项目部署运行模块，用于部署及运行框架公共项目及业务项目。
10.如权利要求9所述的基于Vue框架的多项目开发部署运行系统，其特征在于，所述基于Vue框架的多项目开发部署运行系统还包括站点配置模块，用于在服务器安装nginx软件后，进行站点配置信息，将主目录指向dist目录，以通过浏览器浏览页面，访问平台多个业务系统页面。
CN202211168448.5A 2022-09-24 2022-09-24 一种基于Vue框架的多项目开发部署运行方法和系统 Pending CN115480801A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211168448.5A CN115480801A (zh) 2022-09-24 2022-09-24 一种基于Vue框架的多项目开发部署运行方法和系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211168448.5A CN115480801A (zh) 2022-09-24 2022-09-24 一种基于Vue框架的多项目开发部署运行方法和系统

Publications (1)

Publication Number Publication Date
CN115480801A true CN115480801A (zh) 2022-12-16

Family

ID=84393427

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211168448.5A Pending CN115480801A (zh) 2022-09-24 2022-09-24 一种基于Vue框架的多项目开发部署运行方法和系统

Country Status (1)

Country Link
CN (1) CN115480801A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116048498A (zh) * 2023-03-31 2023-05-02 苏州瑞云智服信息科技有限公司 一种基于多版本的组件库架构
CN116400957A (zh) * 2023-06-08 2023-07-07 四川数产范式科技有限公司 基于Git的代码管理方法、装置、设备及介质
CN116627419A (zh) * 2023-07-24 2023-08-22 中国电信股份有限公司 前端业务的打包方法及相关设备
CN117435244A (zh) * 2023-12-21 2024-01-23 南京掌控网络科技有限公司 一种前端跨工程公共库系统及其构建方法

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116048498A (zh) * 2023-03-31 2023-05-02 苏州瑞云智服信息科技有限公司 一种基于多版本的组件库架构
CN116400957A (zh) * 2023-06-08 2023-07-07 四川数产范式科技有限公司 基于Git的代码管理方法、装置、设备及介质
CN116627419A (zh) * 2023-07-24 2023-08-22 中国电信股份有限公司 前端业务的打包方法及相关设备
CN117435244A (zh) * 2023-12-21 2024-01-23 南京掌控网络科技有限公司 一种前端跨工程公共库系统及其构建方法
CN117435244B (zh) * 2023-12-21 2024-03-19 南京掌控网络科技有限公司 一种前端跨工程公共库系统及其构建方法

Similar Documents

Publication Publication Date Title
CN107491329B (zh) Docker镜像构建方法、设备、存储介质以及电子装置
CN115480801A (zh) 一种基于Vue框架的多项目开发部署运行方法和系统
CN107577475B (zh) 一种数据中心集群系统的软件包管理方法及系统
US9864592B2 (en) System and method for deploying software into a computing environment
US8671392B2 (en) Integrating software applications
Sandobalin et al. An infrastructure modelling tool for cloud provisioning
US10417118B2 (en) Development-time awareness of a production dependency injection environment
US20160162286A1 (en) Managing user access to alternative versions of a particular function of a software product from within a current version of the software product
CN107408046B (zh) 用于跨异构计算环境供应云服务的系统和方法
CN111596928B (zh) 一种应用控制方法、装置及电子设备
CN109976803B (zh) 一种文件的生成方法及装置
KR20220092615A (ko) 적시(Just-In-Time) 컨테이너
Ernsting et al. Refining a reference architecture for model-driven business apps
CN114461182A (zh) 流水线构建的方法、装置、电子设备及计算机可读存储介质
US10990507B2 (en) System and method for provisioning a virtual machine test environment
US11656864B2 (en) Automatic application of software updates to container images based on dependencies
US20210096853A1 (en) Migration of web applications between different web application frameworks
CN117369840A (zh) 一种基于定制软件源的嵌入式操作系统构建方法
WO2014085504A1 (en) Method and system for context modeling
CN113741931A (zh) 软件升级方法、装置、电子设备及可读存储介质
Neupane Developing a static website and deploying it to Heroku
CN116991355B (zh) 修改和迭代脚本支持led驱动芯片的方法、系统及装置
CN117201469A (zh) 用于开发部署定制化项目的方法及计算设备
US11900091B2 (en) Extensible upgrade and modification as a service
US20240192974A1 (en) Simulation of one or more pipeline jobs in a software deployment pipeline

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination