一种基于vue-cli的typescript多项目开发构建方法与流程

1.本发明属于项目开发构建技术领域，具体是一种基于vue-cli的typescript多项目开发构建方法。


背景技术：

2.vue-cli为一种开源的vue项目搭建脚手架，其特点是可以通过极少的配置快速生成webpack环境的vue开发项目，处理方式极为简洁；
3.typescript多项目开发是基于前端业务多样化需求的一种开发方案，支持typescript语法，项目核心业务模块相对独立，但允许各个项目间联立组合，需要支持单独构建和部署。
4.现有中国专利文件公开号为cn114721671a的一种基于vue的多项目开发部署方法及装置、设备、存储介质，其建立公用的开发目录，所有项目集中在同一个项目框架下，通过对vue-cli脚手架的打包配置，实现各项目之间独立运行的需要。
5.但在实现上述技术方案的过程中，发现上述技术方案存在如下技术问题：
6.但其仅能实现多项目的一些基本功能，所有项目在同一个运行环境下共存，开发工具需要提前同时载入全部子项目的内容，占用cpu和内存过大，电脑卡顿，随着数量的增加，极容易达到性能瓶颈，同时，子项目之间的依赖性会堆积到一起，无法支持主流的typescript语法开发，projectconfig.js文件维护和改写构建指令的的方式过于繁琐，子项目之间无法自由组合。


技术实现要素：

7.为了克服现有基于vue的多项目开发部署方法及装置、设备、存储介质所有项目在同一个运行环境下共存，开发工具需要提前同时载入全部子项目的内容，占用cpu和内存过大，同时，子项目之间的依赖性会堆积到一起，无法支持主流的typescript语法开发，projectconfig.js文件维护和改写构建指令的的方式过于繁琐，子项目之间无法自由组合的不足，本技术实施例提供一种基于vue-cli的typescript多项目开发构建方法，通过配置vue.config.js和tsconfig.json文件，集中所有项目到公共项目中，共享开发组件和配置信息。但同时保留了项目间的独立性，可以独立打开单一项目开发，项目之间可以引用，既是其他项目的组成模块，又是独立完整的业务模块。每个项目独立运行，项目数量没有上限，不会增加后期的内存和cpu消耗。
8.本技术实施例解决其技术问题所采用的技术方案是：
9.一种基于vue-cli的typescript多项目开发构建方法，包括
10.步骤一、建立和配置多项目公共框架；
11.步骤二、创建独立项目；
12.步骤三、添加独立的依赖项，并配置项目输出参数；
13.步骤四、执行项目脚本，运行；
14.其中，多项目公共环境的配置和建立基于vue-cli技术。
15.在一种可能的实现方式中，所述步骤二中独立项目的创建，通过直接修改文件夹名称的方式来为其命名。
16.在一种可能的实现方式中，所述步骤一中的公共框架包括公共组件、vue.config配置、公共依赖项和静态资源。
17.在一种可能的实现方式中，所述步骤一在搭建公共框架时，选择typescript版本，生成项目基础文件。
18.在一种可能的实现方式中，所述步骤二独立项目在创立阶段时，更改package.json配置，所有scripts指令均添加yarn。
19.在一种可能的实现方式中，所述步骤三生成tsconfig.build.json文件，内容继承tsconfig.json后，清空语法检查项include列表。
20.在一种可能的实现方式中，所述步骤三中添加的独立package.json，支持独立的依赖项。
21.在一种可能的实现方式中，所述步骤三中添加的package.json，extends集成外部ts配置，完成ts类型的局部识别，支持项目单独载入编辑器。
22.本技术的有益效果为：
23.一是，本方案中，通过配置vue.config.js和tsconfig.json文件，集中所有项目到公共项目中，共享开发组件和配置信息，并同时保留了项目间的独立性，可以独立打开单一项目开发，项目之间可以引用，既是其他项目的组成模块，又是独立完整的业务模块。每个项目独立运行，项目数量没有上限，不会增加后期的内存和cpu消耗；
24.二是，本方案中，通过在projects目录新建目录即可建立独立项目，每个项目和通过统一的项目模板来建立，通过独立的package.json，支持所有可能需要的参数独立配置，支持一键npm run dev运行和npm run build构建，自动获取项目信息，无须指定项目名称。
附图说明
25.图1为本发明的步骤示意图；
26.图2为本发明的原理框图。
具体实施方式
27.本技术实施例中的技术方案为解决上述背景技术的问题，总体思路如下：
28.实施例1：
29.本实施例介绍了一种基于vue-cli的typescript多项目开发构建方法的具体结构，具体参照图1-图2所示，包括
30.步骤一、建立和配置多项目公共框架；
31.其中，多项目公共环境的配置和建立基于vue-cli技术，而所述公共框架包括公共组件、vue.config配置、公共依赖项和静态资源；
32.同时，在搭建公共框架时，选择typescript版本，生成项目基础文件；
33.步骤二、创建独立项目；
34.其中，所述独立项目的创建，通过直接修改文件夹名称的方式来为其命名，并在创
立阶段时，更改package.json配置，所有scripts指令均添加yarn；
35.步骤三、添加独立的依赖项，并配置项目输出参数；
36.其中，生成tsconfig.build.json文件，内容继承tsconfig.json后，清空语法检查项include列表，而添加的独立package.json，支持独立的依赖项；
37.同时，添加的package.json，extends集成外部ts配置，完成ts类型的局部识别，支持项目单独载入编辑器；
38.步骤四、执行项目脚本，运行或构件。
39.具体的操作步骤为：
40.一、基于vue-cli脚手架建立公共框架
41.1、提示中选择typescript版本，生成项目基础文件；
42.2、更改package.json配置，所有scripts指令添加yarn；
43.(1)”dev”:”yarn&&vue-cli-service serve”，运行单项目指令；
44.(2)”publish”:”yarn&&vue-cli-service build”，构建单项目指令；
45.(3)”dll”:”yarn&&webpack-p
–
progress”publish-all”:”yarn&&node build/build.config.js”，一键构建全部项目指令；
46.(4)
‑‑
config./build/webpack.dll.js”，构建公共dll代码块；
47.3、改造vue.config.js配置:
48.(1)提取关键配置参数到独立文件；
49.其中，通过将关键配置参数提取至”build-config/index.js”文件，后期维护更加方便，其主要参数有：build(构建时)、dev(运行时)以及dll(公共合并插件)；
50.同时，构建和运行时包括项目主页地址，构建输出目录，已经运行代理服务；
51.(2)识别运行和构建时node指令携带的参数process.env.npm_config_proj，通过对projects项目目录比对确认当前运行的项目名称，以此参数作为项目运行的关键参数代入后面的运行和构建；
52.4、生成tsconfig.build.json文件，内容继承tsconfig.json后清空语法检查项include列表；
53.其中，通常构建typescript项目需要经历语法for-ts-checker强制检查，大大增加了构建时长，但是项目在运行时已经经过ts相关检查，故最后一步非必要，通过临时载入tsconfig.build.json可直接跳过语法检查，提高打包效率；
54.5、建立项目群目录projects，和src同级。
55.二、建立模板项目basetemplate
56.1、添加脚本run_dev.js和run_build.js，使用shell.js调用npm指令完成运行和构建。运行或构建时nodejs可获取当前项目目录(basetemplate)，执行shell.exec(
‘
npm run publish
–
proj＝basetemplate’)；
57.其中，通过将关键参数传递到外部指令中，可以实现一键运行和构建；
58.2、子项目可以直接引用外部src的所有资源，添加入口文件main.ts、index.ejs、app.vue；
59.3、添加独立的package.json，支持独立的依赖项，配置scripts属性如下：”dev”:”node debug__build/run_dev”,”build”:”node debug__build run_build”；
60.4、添加tsconfig.json，extends集成外部ts配置，完成ts类型的局部识别，支持项目单独载入编辑器。
61.通过采用上述技术方案：
62.上述设计通过配置vue.config.js和tsconfig.json文件，集中所有项目到公共项目中，共享开发组件和配置信息。但同时保留了项目间的独立性，可以独立打开单一项目开发，项目之间可以引用，既是其他项目的组成模块，又是独立完整的业务模块，每个项目配有自己的package.json和tsconfig.json文件，支持添加专属依赖项，支持独立开发中typescript环境的正常运行。每个项目独立运行，项目数量没有上限，不会增加后期的内存和cpu消耗。
63.实施例2：
64.以实施例1为基础，本实施例介绍了在建立好的vue-typescript多项目环境基础上开发新项目clientdesktop，并执行运行调试和构建；
65.具体的操作步骤为：
66.s1、直接拷贝basetemplate模板项目，命名clientdesktop，放置projects目录中；
67.s2、打开编辑器(如：vscode)，直接载入clientdesktop项目，npm run dev运行后开发相关业务代码；
68.s3、开发结束，执行npm run build构建clientdesktop项目默认到dist目录。
69.通过采用上述技术方案：
70.上述设计通过在projects目录新建目录即可建立独立项目，自动识别目录为特定构建目录，无须填写任何配置文件。每个项目和通过统一的项目模板来建立，通过独立的package.json，支持所有可能需要的参数(路径，项目名，端口号等等)独立配置，支持一键npm run dev运行和npm run build构建，自动获取项目信息，无须指定项目名称。
71.最后应说明的是：显然，上述实施例仅仅是为清楚地说明本发明所作的举例，而并非对实施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。而由此所引申出的显而易见的变化或变动仍处于本发明的保护范围之中。

技术特征：
1.一种基于vue-cli的typescript多项目开发构建方法，其特征在于，包括：步骤一、建立和配置多项目公共框架；步骤二、创建独立项目；步骤三、添加独立的依赖项，并配置项目输出参数；步骤四、执行项目脚本，运行；其中，多项目公共环境的配置和建立基于vue-cli技术。2.如权利要求1所述的一种基于vue-cli的typescript多项目开发构建方法，其特征在于：所述步骤二中独立项目的创建，通过直接修改文件夹名称的方式来为其命名。3.如权利要求1所述的一种基于vue-cli的typescript多项目开发构建方法，其特征在于：所述步骤一种的公共框架包括公共组件、vue.config配置、公共依赖项和静态资源。4.如权利要求1所述的一种基于vue-cli的typescript多项目开发构建方法，其特征在于：所述步骤一在搭建公共框架时，选择typescript版本，生成项目基础文件。5.如权利要求1所述的一种基于vue-cli的typescript多项目开发构建方法，其特征在于：所述步骤二独立项目在创立阶段时，更改package.json配置，所有scripts指令均添加yarn。6.如权利要求1所述的一种基于vue-cli的typescript多项目开发构建方法，其特征在于：所述步骤三生成tsconfig.build.json文件，内容继承tsconfig.json后，清空语法检查项include列表。7.如权利要求1所述的一种基于vue-cli的typescript多项目开发构建方法，其特征在于：所述步骤三中添加的独立package.json，支持独立的依赖项。8.如权利要求7所述的一种基于vue-cli的typescript多项目开发构建方法，其特征在于：所述步骤三中添加的package.json，extends集成外部ts配置，完成ts类型的局部识别，支持项目单独载入编辑器。

技术总结
本申请提供了一种基于vue-cli的typescript多项目开发构建方法，包括步骤一、建立和配置多项目公共框架；步骤二、创建独立项目；步骤三、添加独立的依赖项，并配置项目输出参数；步骤四、执行项目脚本，运行；其技术要点为：通过集中所有项目到公共项目中，共享开发组件和配置信息，并同时保留了项目间的独立性，可以独立打开单一项目开发，项目之间可以引用，既是其他项目的组成模块，又是独立完整的业务模块。每个项目独立运行，项目数量没有上限，不会增加后期的内存和CPU消耗，解决了现有多项目构建方法所有项目在同一个运行环境下共存，开发工具需要提前同时载入全部子项目的内容，占用CPU和内存过大的问题。占用CPU和内存过大的问题。占用CPU和内存过大的问题。


技术研发人员：张启毛 郭其浩 章青山 尹格 李本正
受保护的技术使用者：沐坤科技有限公司
技术研发日：2023.07.18
技术公布日：2023/10/19