【技术实现步骤摘要】
本专利技术涉及计算机，具体为一种基于vue和npm发布组件的前端开发方法及系统。
技术介绍
1、随着应用程序中业务模块的增加和团队的变迁，以及微前端的良好发展前景，开发公共组件库进行通用组件的封装和管理显得尤为重要。
2、传统项目内的组件封装只能在项目内部使用，跨项目使用的通用性很差，且不便于进行版本管理。
3、为了解决传统组件封装通用性差且不便于版本管理的问题，提出一种基于vue和npm实现组件封装和发布的前端开发方案。
技术实现思路
1、本专利技术的目的在于提供一种基于vue和npm发布组件的前端开发方法及系统，以解决上述
技术介绍
中提出的问题。
2、为实现上述目的，本专利技术提供如下技术方案：一种基于vue和npm发布组件的前端开发方法，所述方法包括以下步骤：
3、搭建前端工程项目；
4、开发组件使用手册页面；
5、组件注册，组件封装完并开发完成使用指南页面后，遍历组件列表并使用vue.component()进行组件注册；
6、实现主题色自定义功能；
7、打包并发布；
8、组件库的安装和使用。
9、优选的，搭建前端工程项目的具体操作包括：
10、使用vue-cli脚手架搭建组件库前端项目,webpack打包构建，npm引入相关插件，采用的插件有echarts、element-ui、vue-template-compiler、highlight.js
11、优选的，开发组件使用手册页面的具体操作包括：
12、根据页面的ui设计，搭建工程代码结构，将组件整体分为web组件和大屏组件，手册页面左侧是导航右侧是使用指南区，将需要注册的组件全部封装成组件并添加各自的使用说明以便于在指南区进行展示，然后在使用指南区中遍历所有的组件进行介绍展示。
13、优选的，实现主题色自定义功能的具体操作包括：
14、安装node-sass和sass-loader两个插件，使用scss中的定义样式变量功能定义变量$--color-bg，其他样式开发引用该变量，通过修改该变量值实现主题色自定义功能。
15、优选的，打包并发布的具体操作包括：将组件库通过npmrunpackage语句打包，然后使用npmpublish发布到npm上，发布前需要注册申请npm账号并切换npm源：npm configset registry＝https://registry.npmjs.org；
16、组件库的安装和使用的具体操作包括：打开需要安装组件库的代码工程，使用npminstall+组件库名称进行组件库安装；import引入组件库并vue.use()进行全局注册；安装scss修改样式变量值进行主题色样式配置；页面中引入组件进行使用，根据使用指南中的组件配置详情进行自定义组件配置。
17、一种基于vue和npm发布组件的前端开发系统，所述系统包括：
18、项目搭建模块，用于搭建前端工程项目；
19、使用手册开发模块，用于开发组件使用手册页面；
20、注册模块，用于组件封装完并开发完成使用指南页面后，遍历组件列表并使用vue.component()进行组件注册；
21、自定义模块，用于实现主题色自定义功能；
22、发布模块，用于打包并发布；
23、数据库安装模块，用于组件库的安装和使用。
24、优选的，项目搭建模块，使用vue-cli脚手架搭建组件库前端项目,webpack打包构建，npm引入相关插件，采用的插件有echarts、element-ui、vue-template-compiler、highlight.js。
25、优选的，使用手册开发模块，根据页面的ui设计，搭建工程代码结构，将组件整体分为web组件和大屏组件，手册页面左侧是导航右侧是使用指南区，将需要注册的组件全部封装成组件并添加各自的使用说明以便于在指南区进行展示，然后在使用指南区中遍历所有的组件进行介绍展示。
26、优选的，自定义模块，安装node-sass和sass-loader两个插件，使用scss中的定义样式变量功能定义变量$--color-bg，其他样式开发引用该变量，通过修改该变量值实现主题色自定义功能。
27、优选的，发布模块，将组件库通过npmrunpackage语句打包，然后使用npmpublish发布到npm上，发布前需要注册申请npm账号并切换npm源：npmconfig set registry＝https://registry.npmjs.org；
28、数据库安装模块，打开需要安装组件库的代码工程，使用npminstall+组件库名称进行组件库安装；import引入组件库并vue.use()进行全局注册；安装scss修改样式变量值进行主题色样式配置；页面中引入组件进行使用，根据使用指南中的组件配置详情进行自定义组件配置。
29、与现有技术相比，本专利技术的有益效果是：
30、本专利技术提出的基于vue和npm发布组件的前端开发方法及系统，实现组件的灵活封装，例如根据业务需求封装业务组件；组件库主题色不是一成不变的，可以通过修改样式变量自定义配置；通过npm管理和发布，使用者可以随时随处通过npm安装使用任一版本；支持echarts图表组件的封装，实现默认echarts组件样式的封装也支持使用者传入echarts配置进行样式覆盖。
本文档来自技高网...【技术保护点】
1.一种基于vue和npm发布组件的前端开发方法，其特征在于：所述方法包括以下步骤：
2.根据权利要求1所述的一种基于vue和npm发布组件的前端开发方法，其特征在于：搭建前端工程项目的具体操作包括：
3.根据权利要求1所述的一种基于vue和npm发布组件的前端开发方法，其特征在于：开发组件使用手册页面的具体操作包括：
4.根据权利要求1所述的一种基于vue和npm发布组件的前端开发方法，其特征在于：实现主题色自定义功能的具体操作包括：
5.根据权利要求1所述的一种基于vue和npm发布组件的前端开发方法，其特征在于：打包并发布的具体操作包括：将组件库通过npmrunpackage语句打包，然后使用npmpublish发布到npm上，发布前需要注册申请npm账号并切换npm源：npm config set registry＝https://registry.npmjs.org；
6.一种根据权利要求1-5任意一项所述的基于vue和npm发布组件的前端开发方法的基于vue和npm发布组件的前端开发系统，其特征在于：所述系统
7.根据权利要求6所述的一种基于vue和npm发布组件的前端开发系统，其特征在于：项目搭建模块，使用vue-cli脚手架搭建组件库前端项目,webpack打包构建，npm引入相关插件，采用的插件有echarts、element-ui、vue-template-compiler、highlight.js。
8.根据权利要求6所述的一种基于vue和npm发布组件的前端开发系统，其特征在于：使用手册开发模块，根据页面的ui设计，搭建工程代码结构，将组件整体分为web组件和大屏组件，手册页面左侧是导航右侧是使用指南区，将需要注册的组件全部封装成组件并添加各自的使用说明以便于在指南区进行展示，然后在使用指南区中遍历所有的组件进行介绍展示。
9.根据权利要求6所述的一种基于vue和npm发布组件的前端开发系统，其特征在于：自定义模块，安装node-sass和sass-loader两个插件，使用scss中的定义样式变量功能定义变量$--color-bg，其他样式开发引用该变量，通过修改该变量值实现主题色自定义功能。
10.根据权利要求6所述的一种基于vue和npm发布组件的前端开发系统，其特征在于：发布模块，将组件库通过npmrunpackage语句打包，然后使用npmpublish发布到npm上，发布前需要注册申请npm账号并切换npm源：npm config set registry＝https://registry.npmjs.org；
...【技术特征摘要】
1.一种基于vue和npm发布组件的前端开发方法，其特征在于：所述方法包括以下步骤：
2.根据权利要求1所述的一种基于vue和npm发布组件的前端开发方法，其特征在于：搭建前端工程项目的具体操作包括：
3.根据权利要求1所述的一种基于vue和npm发布组件的前端开发方法，其特征在于：开发组件使用手册页面的具体操作包括：
4.根据权利要求1所述的一种基于vue和npm发布组件的前端开发方法，其特征在于：实现主题色自定义功能的具体操作包括：
5.根据权利要求1所述的一种基于vue和npm发布组件的前端开发方法，其特征在于：打包并发布的具体操作包括：将组件库通过npmrunpackage语句打包，然后使用npmpublish发布到npm上，发布前需要注册申请npm账号并切换npm源：npm config set registry＝https://registry.npmjs.org；
6.一种根据权利要求1-5任意一项所述的基于vue和npm发布组件的前端开发方法的基于vue和npm发布组件的前端开发系统，其特征在于：所述系统包括：
7.根据权利要求6所述的一种基于vue和npm发布组件的前端开发系统，其特征在于：项目搭建模块，使用vue-cli脚手架搭建组件库前端项...
【专利技术属性】
技术研发人员：高杨，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。