CN116048516B - 一种基于Vue框架的主题颜色变量使用方法 - Google Patents

Abstract

本发明属于软件管理技术和软件管理系统技术领域，具体为一种基于Vue框架的主题颜色变量使用方法，步骤1、类型转换：A1、根据指定的文件地址查找相应的入口文件和所有被引用文件，读取并保存在内存中；本发明中css类型的主题颜色变量可自动转换生成js变量，Vue项目加载的过程中，注入生成的js变量供vue类型文件使用，在主题颜色变量进行变更或修改后，能够自动同步更新js变量的值；能够减少因为变量引用需求而带来的样式文件体积增长，能够保证主题颜色变量在所有场景下使用的一致性，同时提升前端的开发效率。

Description

一种基于Vue框架的主题颜色变量使用方法

技术领域

本发明涉及软件管理技术和软件管理系统技术领域，具体为一种基于Vue框架的主题颜色变量使用方法。

背景技术

Vue框架是一种具备提炼自企业级中后台产品的交互语言和视觉风格的软件管理技术，UI风格简洁，界面漂亮，符合当下中后台项目的审美，Vue框架封装了中后台项目用到的基本内容，包括table、list、tree、modal、layout等基础组件。使得开发人员可在此基础上实现快速开发，框架可适应基本主流浏览器，受到众多前端开发者及企业的追捧和喜爱。

在基于Vue框架的前端项目开发过程中，通常都会提前定义整个项目中所需要使用到的所有主题颜色，并将这些主题颜色以变量形式定义在css预编译类型文件（例如scss或less文件，以下统称为css类型文件）中，供其他页面或者模块使用。

而目前常见的css类型文件中定义的变量，只能够被给其他的同类型css类型文件所引用，无法提供给Vue框架下的页面或组件文件（以下统称为vue类型文件）所引用。从而造成页面开发过程中，无法在vue类型文件中直接引用主题颜色变量的问题。

针对这个问题，通常存在以下两种解决方案：

第一种是在与vue类型文件相对应的css类型文件中，定义多种不同的样式规则，通过这些样式规则来引用项目中的颜色主题变量，然后vue类型文件中根据不同的条件，将相应的样式规则，应用到对应的网页元素上；

第二种是在vue类型文件中，根据不同的条件，直接在相应的逻辑代码中写入固定的主题颜色值，应用到对应的网页元素上；

而以上两种解决方案在使用的过程中仍然存在以下问题，以上两种解决方案中，第一种会造成大量的样式规则，增加项目整体的文件大小和冗余度；第二种会导致主题颜色引用位置不一致，当主题颜色发生修改时容易产生遗漏。故两种解决方案均会造成开发效率低下的问题。

为此，现提出一种基于Vue框架的主题颜色变量使用方法来有效解决上述提出的问题，其主要目的是提出一种新的主题颜色变量在vue类型文件中的使用方案，代码开发过程中颜色变量的使用方式更加便捷，提升整体项目的开发效率；在vue类型文件中直接使用主题颜色变量，能够减少冗余代码的编写量，提高代码的整体质量，从而提高整个网页项目的加载和运行速度；主题颜色变量的使用方式标准化、统一化，所有需要使用到主题颜色变量的地方，均引用的是同一份变量文件，减少代码出错的概率，提升可维护性。

发明内容

本发明的目的在于提供一种基于Vue框架的主题颜色变量使用方法，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：一种基于Vue框架的主题颜色变量使用方法，该基于Vue框架的主题颜色变量使用方法的具体步骤流程如下：

步骤1、类型转换：

A1、根据指定的文件地址查找相应的入口文件和所有被引用文件，读取并保存在内存中；

A2、将内存中的内容根据回车符或换行符进行打断，得到样式文件的所有文本行，并保存为array数组；

A3、移除array数组中所有非key-value结构的文本行，剩余的部分均为有效内容行；

A4、新建key-value键值对映射表map；

A5、选择array数组中的成员，根据分隔符进行文本打断，得到key和value；

A6、判断value中是否包含有对其他变量的间接引用；

A7、如value中不存在对其他变量的间接引用，则将key、value存入键值对映射表map中，然后执行步骤A11；

A8、如value中存在对其他变量的间接引用，假定被间接引用的变量名为key2，则需要判断map中是否已存在key2及其变量值value2；

A9、如map中已存在key2和value2，则替换value中的间接引用的变量名key2为value2，并将新的key、value存入map中，然后执行步骤A11；

A10、如map中不存在key2和value2，则继续执行步骤A6，遍历array中的其他成员；

A11、从array数组中移除当前行成员，并继续执行步骤A6，遍历array中的其他成员；

A12、重复array的遍历过程，直至array中的所有成员均被移除，所有的键值对均存放至映射表map中；

A13、将映射表map以key-value的形式导出到js文件cssVariables.js中，并输出为可被正常使用的js文件格式；

步骤2、变量注入：

B1、启动页面加载过程；

B2、引入vue依赖库为Vue；

B3、引入cssVariables.js文件为变量tmp；

B4、在Vue的原型属性prototype中，定义cssVariables属性，指向变量tmp；

B5、继续执行其他页面启动流程步骤；

步骤3、同步更新：

C1、在package.json文件中定义prestart启动前操作指令；

C2、运行项目启动指令npm start，开始启动项目；

C3、启动阶段将会自动执行prestart操作指令；

C4、prestart操作指令中运行buildCssVariables.js文件；

C5、执行步骤1中主题颜色变量转换为js文件的操作；

C6、生成对应的cssVariables.js文件；

C7、继续执行其他启动流程步骤。

优选的，所述步骤1生成了可以被vue类型文件所使用的主题颜色变量js文件cssVariables.js。

优选的，在开发阶段，当需要修改css类型文件中的变量值时，如果要保证vue类型文件中使用变量的正确性，那么就必须同步修改步骤1中所生成的cssVariables.js文件。

与现有技术相比，本发明的有益效果是：

本发明中css类型的主题颜色变量可自动转换生成js变量，Vue项目加载的过程中，注入生成的js变量供vue类型文件使用，在主题颜色变量进行变更或修改后，能够自动同步更新js变量的值；能够减少因为变量引用需求而带来的样式文件体积增长，能够保证主题颜色变量在所有场景下使用的一致性，同时提升前端的开发效率。

附图说明

图1为通过css类型变量转换为js变量的方案流程图；

图2为在前端页面加载步骤流程图；

图3为前端项目代码打包步骤流程图；

图4为js引入方式组成图。

实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要理解的是，术语“上”、“下”、“前”、“后”、“左”、“右”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。

实施例

请参阅图1-4，本发明提供一种技术方案：

一种基于Vue框架的主题颜色变量使用方法，该基于Vue框架的主题颜色变量使用方法的具体步骤流程如下：

步骤1、类型转换：

A1、根据指定的文件地址查找相应的入口文件和所有被引用文件，读取并保存在内存中；

A2、将内存中的内容根据回车符或换行符进行打断，得到样式文件的所有文本行，并保存为array数组；

A3、移除array数组中所有非key-value结构的文本行，剩余的部分均为有效内容行；

A4、新建key-value键值对映射表map；

A5、选择array数组中的成员，根据分隔符进行文本打断，得到key和value；

A6、判断value中是否包含有对其他变量的间接引用；

A7、如value中不存在对其他变量的间接引用，则将key、value存入键值对映射表map中，然后执行步骤A11；

A8、如value中存在对其他变量的间接引用，假定被间接引用的变量名为key2，则需要判断map中是否已存在key2及其变量值value2；

A9、如map中已存在key2和value2，则替换value中的间接引用的变量名key2为value2，并将新的key、value存入map中，然后执行步骤A11；

A10、如map中不存在key2和value2，则继续执行步骤A6，遍历array中的其他成员；

A11、从array数组中移除当前行成员，并继续执行步骤A6，遍历array中的其他成员；

A12、重复array的遍历过程，直至array中的所有成员均被移除，所有的键值对均存放至映射表map中；

A13、将映射表map以key-value的形式导出到js文件cssVariables.js中，并输出为可被正常使用的js文件格式；

CSS概述：允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置；元素框偏移某个距离，元素仍保持其未定位前的形状（位置），它原本所占的空间仍保留，设置元素定位之后的位置需要依赖top、right、bottom、left属性对元素进行定位；元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样，元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框；

元素定位的属性：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中；

js变量概述：是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言，虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格；

js作用：作为html中的脚本语言，主要负责一些动态交互，如实现表单验证、事件，轮播图等一些动态的效果；

js组成：ECMAScript(javascript的基础语法)、DOM(文档对象模型)、BOM（浏览器对象模型）；

js在html中引入方式：行内式：将js脚本写在标签内，作为事件的属性或者是脚本；内部式：在html文件中通过script标签里引入js脚本，将js脚本写入script标签中，外链式：将js单独写成js文件，然后在html中通过script标签的src属性来引入外部的js文件；

步骤2、变量注入：

B1、启动页面加载过程；

B2、引入vue依赖库为Vue；

B3、引入cssVariables.js文件为变量tmp；

B4、在Vue的原型属性prototype中，定义cssVariables属性，指向变量tmp；

B5、继续执行其他页面启动流程步骤；

步骤3、同步更新：

C1、在package.json文件中定义prestart启动前操作指令；

C2、运行项目启动指令npm start，开始启动项目；

C3、启动阶段将会自动执行prestart操作指令；

C4、prestart操作指令中运行buildCssVariables.js文件；

C5、执行步骤1中主题颜色变量转换为js文件的操作；

C6、生成对应的cssVariables.js文件；

C7、继续执行其他启动流程步骤。

在Vue项目中我们通常会通过npm start指令启动项目，同时脚手架工具允许我们在package.json文件中定义prestart操作指令，用于执行启动前的自定义操作。

所述步骤1生成了可以被vue类型文件所使用的主题颜色变量js文件cssVariables.js。

在开发阶段，当需要修改css类型文件中的变量值时，如果要保证vue类型文件中使用变量的正确性，那么就必须同步修改步骤1中所生成的cssVariables.js文件。

本发明涉及到的具体实现方案包括：类型转换，将css类型文件中的变量，转换为vue类型文件可以读取的js文件；变量注入，在Vue框架中，注入转换得到的js文件，提供给vue类型文件使用；同步更新，修改主题颜色变量值时，能够同步更新到vue类型文件中的使用地点。

与本发明相关的现有技术一：《页面主题定制方法、装置、电子设备及存储介质》，中国平安财产保险股份有限公司，http://www.soopat.com/Patent/202111546585，该专利提出了一种根据定制主题颜色生成业务样式文件的方案，首先根据定制需求构建主题变量文件，再根据变量文件生成基础样式文件，然后将基础样式文件与业务源文件结合生成最终的样式文件，最后将样式文件加载到浏览器中，但是该现有技术存在的缺点是能够实现主题颜色变量在css类型文件中的引用统一和变量复用，保证了所有使用变量位置的一致性，但是在vue类型文件中使用时，仍然存在使用不便捷的问题；

与本发明相关的现有技术二：《基于Vue框架和CSS变量的CSS动态编程方法》，中电四川数据服务有限公司，http://www.soopat.com/Patent/202111334571，该专利提出了一种基于Vue框架的css动态编程方法。通过利用Vue框架的自定义指令功能，以贴合css变量自身优先级策略的方式，将组件与css变量的关联过程封装在指令内，然后在css中使用var、counter等方法提取变量，从而实现了将数据传输到css的效果，即可实现css动态编程，但是该现有技术存在的缺点是能够在vue类型文件中，将用户交互过程中获取到的数据，经过一系列处理后应用到网页元素中，实现样式动态切换的效果。但是无法实现在vue类型文件中，使用项目中提前预定在css类型文件中的主题颜色变量。

应用场景举例

在基于Vue框架的前端项目中，假设在css类型文件中定义了两个主题颜色变量$--primary：#00FF00和$--second：#0000FF，采用本发明提供的方案后，将会在项目中自动生成一份js类型的样式变量，并注入到项目中，当需要动态切换页面中的按钮主题色时，可以直接使用变量 this.cssVariables.primary或者this.cssVariables.second，即能够得到相对应的颜色值#00FF00或者#0000FF，同时，当根据业务需求进行颜色修改时，例如将主题颜色变量$--primary修改为#FF0000，此时只需要重新运行打包过程，即可以实现vue类型文件中使用的变量this.cssVariables.primary 值的自动更新过程。

以上显示和描述了本发明的基本原理和主要特征和本发明的优点,对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明；因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内，不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

Claims (3)

1.一种基于Vue框架的主题颜色变量使用方法，其特征在于，该基于Vue框架的主题颜色变量使用方法的具体步骤流程如下：

步骤1、类型转换：

A1、根据指定的文件地址查找相应的入口文件和所有被引用文件，读取并保存在内存中；

A2、将内存中的内容根据回车符或换行符进行打断，得到样式文件的所有文本行，并保存为array数组；

A3、移除array数组中所有非key-value结构的文本行，剩余的部分均为有效内容行；

A4、新建key-value键值对映射表map；

A5、选择array数组中的成员，根据分隔符进行文本打断，得到key和value；

A6、判断value中是否包含有对其他变量的间接引用；

A7、如value中不存在对其他变量的间接引用，则将key、value存入键值对映射表map中，然后执行步骤A11；

A8、如value中存在对其他变量的间接引用，假定被间接引用的变量名为key2，则需要判断map中是否已存在key2及其变量值value2；

A9、如map中已存在key2和value2，则替换value中的间接引用的变量名key2为value2，并将新的key、value存入map中，然后执行步骤A11；

A10、如map中不存在key2和value2，则继续执行步骤A6，遍历array中的其他成员；

A11、从array数组中移除当前行成员，并继续执行步骤A6，遍历array中的其他成员；

A12、重复array的遍历过程，直至array中的所有成员均被移除，所有的键值对均存放至映射表map中；

A13、将映射表map以key-value的形式导出到js文件cssVariables.js中，并输出为可被正常使用的js文件格式；

步骤2、变量注入：

B1、启动页面加载过程；

B2、引入vue依赖库为Vue；

B3、引入cssVariables.js文件为变量tmp；

B4、在Vue的原型属性prototype中，定义cssVariables属性，指向变量tmp；

B5、继续执行其他页面启动流程步骤；

步骤3、同步更新：

C1、在package.json文件中定义prestart启动前操作指令；

C2、运行项目启动指令npm start，开始启动项目；

C3、启动阶段将会自动执行prestart操作指令；

C4、prestart操作指令中运行buildCssVariables.js文件；

C5、执行步骤1中主题颜色变量转换为js文件的操作；

C6、生成对应的cssVariables.js文件；

C7、继续执行其他启动流程步骤。

2.根据权利要求1所述的一种基于Vue框架的主题颜色变量使用方法，其特征在于：所述步骤1生成了可以被vue类型文件所使用的主题颜色变量js文件cssVariables.js。

3.根据权利要求1所述的一种基于Vue框架的主题颜色变量使用方法，其特征在于：在开发阶段，当需要修改css类型文件中的变量值时，如果要保证vue类型文件中使用变量的正确性，那么就必须同步修改步骤1中所生成的cssVariables.js文件。

Images