CN112685013A - 基于前端vue项目的CSS代码优化方法及相关设备 - Google Patents
基于前端vue项目的CSS代码优化方法及相关设备 Download PDFInfo
- Publication number
- CN112685013A CN112685013A CN202011542064.6A CN202011542064A CN112685013A CN 112685013 A CN112685013 A CN 112685013A CN 202011542064 A CN202011542064 A CN 202011542064A CN 112685013 A CN112685013 A CN 112685013A
- Authority
- CN
- China
- Prior art keywords
- style
- css
- vue
- optimized
- class
- 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
Links
Images
Abstract
本发明实施例涉及大数据领域，公开了一种基于前端vue项目的CSS代码优化方法及相关设备，该方法包括：获取前端中当前vue项目的根目录中的配置文件，并根据配置文件中的地址信息确定待优化的CSS样式的所有vue组件；将提取的各个待优化的CSS样式的vue组件内存在的内联样式添加到指定标签内；将使用的相邻选择器或子选择器转变为类选择器；将提取的指定标签内的公用样式内容引入到各个待优化的CSS样式的vue组件中。通过这种方式实现对CSS样式进行统一管理和维护，减少了代码量，提高了代码的复用率，实现了对CSS代码的优化。本发明涉及区块链技术，如可将配置文件等数据写入区块链中，以用于数据取证等场景。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种基于前端vue项目的CSS代码优化方法及相关设备。
背景技术
目前在前端开发的vue项目中，特别是对于大型长期开发和维护的项目，经历了不同的开发者接手项目进行项目的维护和开发。对于项目中层叠样式表(Cascading StyleSheets，CSS)样式开发和维护，有些开发者在页面模板元素上添加内联样式，短期来看不会有什么问题，但是随着元素上的内联样式越来越多，样式代码和页面模板代码大量混杂在一起，会严重影响页面模板整体的可阅读性和可维护性，同时，样式代码也无法得到统一管理。另外，各组件存在一些可以复用的样式，却依然在各个组件内各自独立维护，增加了整体代码的代码量。对于这类情况，如果需要进行整改，需要大量的人力投入，并且整改后，还需要重新进行相关页面的测试，操作复杂，效率低下。
发明内容
本发明实施例提供了一种基于前端vue项目的CSS代码优化方法及相关设备，可以对CSS样式进行统一管理和维护，减少了代码量，提高了代码的复用率，实现了对CSS代码的优化。
第一方面，本发明实施例提供了一种基于前端vue项目的CSS代码优化方法，所述方法包括：
获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式；
提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内；
当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器；
根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
进一步地，所述提取各个待优化的CSS样式的vue组件内存在的内联样式，包括：
对所述各个待优化的CSS样式的vue组件中页面模板对应的标签进行遍历；
从所述页面模板对应的标签中提取出单个dom元素标签，并获取所述单个dom元素标签内指定子标签中所包含的内容信息；
根据从所述单个dom元素标签内指定子标签中所包含的内容信息提取所述确定所述各个待优化的CSS样式的vue组件内存在的内联样式。
进一步地，所述根据从所述单个dom元素标签内指定子标签中所包含的内容信息提取所述确定所述各个待优化的CSS样式的vue组件内存在的内联样式，包括：
根据从所述单个dom元素标签内指定子标签中所包含的内容信息，检测所述内容信息中是否存在内联样式；
当检测到所述内容信息中存在内联样式时，确定从所述内容信息中提取所述内联样式。
进一步地，所述将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内，包括：
根据所述单个dom元素和预设的命名规则确定类名，并根据确定的类名新建与所述类名对应的新增类；
将所述各个待优化的CSS样式的vue组件内的内联样式作为新建的与所述类名对应的新增类的内容信息添加到所述新增类中；
将添加所述各个待优化的CSS样式的vue组件内的内联样式的新增类添加到所述各个待优化的CSS样式的vue组件对应的指定标签内。
进一步地，所述当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器，包括：
检测所述各个待优化的CSS样式的vue组件中所述新增类的内容信息中是否存在预设关键词；
当检测到所述各个待优化的CSS样式的vue组件中所述新增类的内容信息中存在预设关键词时，确定使用相邻选择器或子选择器，并将所述相邻选择器或子选择器转变为类选择器。
进一步地，所述提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，包括：
根据所述类选择器获取所述各个待优化的CSS样式的vue组件中所述指定标签内的各个类名中的样式内容；
检测所述各个待优化的CSS样式的vue组件中所述指定标签内相同类名的类中是否存在一致的样式内容；
当检测结果为所述各个待优化的CSS样式的vue组件中所述指定标签内相同类名的类中存在一致的样式内容时，确定所述相同类名的类中存在的一致的样式内容为所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容；
所述将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到添加所述公用样式内容的各个vue组件，包括：
根据所述相同类名的类中存在的一致的样式内容新建第一样式类，并将所述第一样式类添加到公共样式文件中，以及将所述添加第一样式类的公共样式文件通过入口文件引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
进一步地，所述方法还包括：
检测所述各个待优化的CSS样式的vue组件中所述指定标签内不同类名的类中是否存在一致的样式内容；
当检测结果为所述各个待优化的CSS样式的vue组件中所述指定标签内不同类名的类中存在一致的样式内容时，确定所述不同类名的类中存在的一致的样式内容为所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容；
所述将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件，包括：
根据所述不同类名的类中存在的一致的样式内容新建第二样式类，并将所述第二样式类添加到公共样式文件中，以及将所述添加第二样式类的公共样式文件通过入口文件引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
第二方面，本发明实施例提供了一种基于前端vue项目的CSS代码优化装置，包括：
获取单元，用于获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式；
提取单元，用于提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内；
转变单元，用于当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器；
添加单元，用于根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
第三方面，本发明实施例提供了一种计算机设备，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储支持基于前端vue项目的CSS代码优化装置执行上述方法的计算机程序，所述计算机程序包括程序，所述处理器被配置用于调用所述程序，执行上述第一方面的方法。
第四方面，本发明实施例提供了一种计算机可读存储介质，所述计算机存储介质存储有计算机程序，所述计算机程序被处理器执行以实现上述第一方面的方法。
本发明实施例可以获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式；提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内；当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器；根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。通过这种实施方式可以对CSS样式进行统一管理和维护，减少了代码量，提高了代码的复用率，实现了对CSS代码的优化。
附图说明
为了更清楚地说明本发明实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种基于前端vue项目的CSS代码优化方法的示意流程图；
图2是本发明实施例提供的一种基于前端vue项目的CSS代码优化装置的示意框图；
图3是本发明实施例提供的一种计算机设备的示意框图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明实施例提供的基于前端vue项目的CSS代码优化方法可以应用于一种基于前端vue项目的CSS代码优化装置，在某些实施例中，所述基于前端vue项目的CSS代码优化装置设置于计算机设备中。在某些实施例中，所述计算机设备包括但不限于智能手机、平板电脑、膝上型电脑等中的一种或者多种。
下面结合附图1对本发明实施例提供的基于前端vue项目的CSS代码优化方法进行示意性说明。
请参见图1，图1是本发明实施例提供的一种基于前端vue项目的CSS代码优化方法的示意流程图，如图1所示，该方法可以由基于前端vue项目的CSS代码优化装置执行，所述基于前端vue项目的CSS代码优化装置设置于计算机设备中。具体地，本发明实施例的所述方法包括如下步骤。
S101：获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式。
本发明实施例中，基于前端vue项目的CSS代码优化装置可以获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式。在某些实施例中，所述配置文件可以为config.js文件。
在一个实施例中，基于前端vue项目的CSS代码优化装置在获取前端中当前vue项目的根目录中的配置文件之前，可以根据所述前端的当前vue项目确定所述当前vue项目的根目录，并在确定的所述当前vue项目的根目录中编写配置文件；在所述配置文件中配置需要优化的CSS样式的vue组件的地址信息。
在一个实施例中，基于前端vue项目的CSS代码优化装置在根据所述前端中的当前vue项目确定所述当前vue项目中的根目录时，具体可以在命令行(mac系统为终端)，定位当前vue项目的根目录，执行命令，如npm i pa-vue-optimize-css-D。
S102：提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内。
本发明实施例中，基于前端vue项目的CSS代码优化装置可以提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内。在某些实施例中，所述指定标签可以为style标签。
在一个实施例中，基于前端vue项目的CSS代码优化装置在提取各个待优化的CSS样式的vue组件内存在的内联样式时，可以对所述各个待优化的CSS样式的vue组件中页面模板对应的标签进行遍历；从所述页面模板对应的标签中提取出单个dom元素标签，并获取所述单个dom元素标签内指定子标签中所包含的内容信息；根据从所述单个dom元素标签内指定子标签中所包含的内容信息提取所述确定所述各个待优化的CSS样式的vue组件内存在的内联样式。在某些实施例中，所述各个待优化的CSS样式的vue组件中页面模板对应的标签可以为template。
在一个实施例中，基于前端vue项目的CSS代码优化装置在根据从所述单个dom元素标签内指定子标签中所包含的内容信息提取所述确定所述各个待优化的CSS样式的vue组件内存在的内联样式时，可以根据从所述单个dom元素标签内指定子标签中所包含的内容信息，检测所述内容信息中是否存在内联样式；当检测到所述内容信息中存在内联样式时，确定从所述内容信息中提取所述内联样式。
在一个实施例中，基于前端vue项目的CSS代码优化装置在将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内时，可以根据所述单个dom元素和预设的命名规则确定类名，并根据确定的类名新建与所述类名对应的新增类；将所述各个待优化的CSS样式的vue组件内的内联样式作为新建的与所述类名对应的新增类的内容信息添加到所述新增类中；将添加所述各个待优化的CSS样式的vue组件内的内联样式的新增类添加到所述各个待优化的CSS样式的vue组件对应的指定标签内。
在一个示例中，基于前端vue项目的CSS代码优化装置在根据所述单个dom元素和预设的命名规则确定类名时，可以根据预设的命名规则为所述单个dom元素新增一个class类名。其中，新增一个class类名的命名规则为：当前组件名称+一个从0开始递增的整数。例如，当前组件名称为welcome.vue，第一个新增class类名为welcome-1。
可见，本发明实施例通过这种方式，可以将当前vue项目中所有页面模板上的内联样式修改为class类的样式，使得页面模板内容与样式内容彻底分离，提高了模板的可阅读性、可维护性，同时样式也可以做到统一维护和管理。
S103：当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，可以将所述相邻选择器或子选择器转变为类选择器。
本发明实施例中，基于前端vue项目的CSS代码优化装置可以当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，可以将所述相邻选择器或子选择器转变为类选择器。
在一个实施例中，基于前端vue项目的CSS代码优化装置当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器时，可以检测所述各个待优化的CSS样式的vue组件中所述新增类的内容信息中是否存在预设关键词；当检测到所述各个待优化的CSS样式的vue组件中所述新增类的内容信息中存在预设关键词时，确定使用相邻选择器或子选择器，并将所述相邻选择器或子选择器转变为类选择器。在某些实施例中，所述预设关键词包括但不限于“+”、“>”等字符。
在一个示例中，基于前端vue项目的CSS代码优化装置可以在页面dom元素上，通过class关键字查找对应class类的内容，如果查找结果为对应class类的内容中包含“+”、“>”，则表示使用相邻选择器或子选择器。
在一个实施例中，基于前端vue项目的CSS代码优化装置在将所述相邻选择器或子选择器转变为类选择器时，可以将相邻选择器或子选择器进行类名调整，直接新增类名替换，以将所述相邻选择器或子选择器转变为类选择器。在某些实施例中，新增类名的命名规则为：当前组件名称+一个从0开始递增的整数。
在一个实施例中，基于前端vue项目的CSS代码优化装置可以在各vue组件中style标签内，查找与相邻选择器或子选择器对应的CSS样式，并将相邻选择器或子选择器的类名修改为新增的类名。
可见，本发明实施例通过这种方式可以优化选择器，提升了页面渲染的性能，降低页面打开过程中带来的阻滞，提升了用户体验。
S104：根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
本发明实施例中，基于前端vue项目的CSS代码优化装置可以根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
在一个实施例中，基于前端vue项目的CSS代码优化装置在根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容时，可以根据所述类选择器获取所述各个待优化的CSS样式的vue组件中所述指定标签内的各个类名中的样式内容；检测所述各个待优化的CSS样式的vue组件中所述指定标签内相同类名的类中是否存在一致的样式内容；当检测结果为所述各个待优化的CSS样式的vue组件中所述指定标签内相同类名的类中存在一致的样式内容时，确定所述相同类名的类中存在的一致的样式内容为所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容。
在一个实施例中，基于前端vue项目的CSS代码优化装置在将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到添加所述公用样式内容的各个vue组件时，可以根据所述相同类名的类中存在的一致的样式内容新建第一样式类，并将所述第一样式类添加到公共样式文件中，以及将所述添加第一样式类的公共样式文件通过入口文件引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。在某些实施例中，所述第一样式类的类名的命名规则可以为：common+原类名。在某些实施例中，所述公共样式文件可以为common.css文件，所述入口文件可以为main.js文件。
在一个实施例中，基于前端vue项目的CSS代码优化装置在提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容时，可以检测所述各个待优化的CSS样式的vue组件中所述指定标签内不同类名的类中是否存在一致的样式内容；当检测结果为所述各个待优化的CSS样式的vue组件中所述指定标签内不同类名的类中存在一致的样式内容时，确定所述不同类名的类中存在的一致的样式内容为所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容。
在一个实施例中，基于前端vue项目的CSS代码优化装置在将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件时，可以根据所述不同类名的类中存在的一致的样式内容新建第二样式类，并将所述第二样式类添加到公共样式文件中，以及将所述添加第二样式类的公共样式文件通过入口文件引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。在某些实施例中，所述第二样式类的类名的命名规则可以为：common+第一个查找到的组件此样式的类名。在某些实施例中，所述公共样式文件可以为common.css文件，所述入口文件可以为main.js文件。
可见，本发明实施例通过这种方式，可以实现样式复用，减少代码量，提高代码的复用率。
本发明实施例中，基于前端vue项目的CSS代码优化装置可以获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式；提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内；当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器；根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。通过这种实施方式可以对CSS样式进行统一管理和维护，减少了代码量，提高了代码的复用率，实现了对CSS代码的优化。
本发明实施例还提供了一种基于前端vue项目的CSS代码优化装置，该基于前端vue项目的CSS代码优化装置用于执行前述任一项所述的方法的单元。具体地，参见图2，图2是本发明实施例提供的一种基于前端vue项目的CSS代码优化装置的示意框图。本实施例的基于前端vue项目的CSS代码优化装置包括：获取单元201、提取单元202、转变单元203以及添加单元204。
获取单元201，用于获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式；
提取单元202，用于提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内；
转变单元203，用于当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器；
添加单元204，用于根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
进一步地，所述提取单元202提取各个待优化的CSS样式的vue组件内存在的内联样式时，具体用于：
对所述各个待优化的CSS样式的vue组件中页面模板对应的标签进行遍历；
从所述页面模板对应的标签中提取出单个dom元素标签，并获取所述单个dom元素标签内指定子标签中所包含的内容信息；
根据从所述单个dom元素标签内指定子标签中所包含的内容信息提取所述确定所述各个待优化的CSS样式的vue组件内存在的内联样式。
进一步地，所述提取单元202根据从所述单个dom元素标签内指定子标签中所包含的内容信息提取所述确定所述各个待优化的CSS样式的vue组件内存在的内联样式时，具体用于：
根据从所述单个dom元素标签内指定子标签中所包含的内容信息，检测所述内容信息中是否存在内联样式；
当检测到所述内容信息中存在内联样式时，确定从所述内容信息中提取所述内联样式。
进一步地，所述提取单元202将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内时，具体用于：
根据所述单个dom元素和预设的命名规则确定类名，并根据确定的类名新建与所述类名对应的新增类；
将所述各个待优化的CSS样式的vue组件内的内联样式作为新建的与所述类名对应的新增类的内容信息添加到所述新增类中；
将添加所述各个待优化的CSS样式的vue组件内的内联样式的新增类添加到所述各个待优化的CSS样式的vue组件对应的指定标签内。
进一步地，所述转变单元203当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器时，具体用于：
检测所述各个待优化的CSS样式的vue组件中所述新增类的内容信息中是否存在预设关键词；
当检测到所述各个待优化的CSS样式的vue组件中所述新增类的内容信息中存在预设关键词时，确定使用相邻选择器或子选择器，并将所述相邻选择器或子选择器转变为类选择器。
进一步地，所述添加单元204提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容时，具体用于：
根据所述类选择器获取所述各个待优化的CSS样式的vue组件中所述指定标签内的各个类名中的样式内容；
检测所述各个待优化的CSS样式的vue组件中所述指定标签内相同类名的类中是否存在一致的样式内容；
当检测结果为所述各个待优化的CSS样式的vue组件中所述指定标签内相同类名的类中存在一致的样式内容时，确定所述相同类名的类中存在的一致的样式内容为所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容；
所述添加单元204将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到添加所述公用样式内容的各个vue组件时，具体用于：
根据所述相同类名的类中存在的一致的样式内容新建第一样式类，并将所述第一样式类添加到公共样式文件中，以及将所述添加第一样式类的公共样式文件通过入口文件引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
进一步地，所述添加单元204还用于：
检测所述各个待优化的CSS样式的vue组件中所述指定标签内不同类名的类中是否存在一致的样式内容；
当检测结果为所述各个待优化的CSS样式的vue组件中所述指定标签内不同类名的类中存在一致的样式内容时，确定所述不同类名的类中存在的一致的样式内容为所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容；
所述添加单元204将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件时，具体用于：
根据所述不同类名的类中存在的一致的样式内容新建第二样式类，并将所述第二样式类添加到公共样式文件中，以及将所述添加第二样式类的公共样式文件通过入口文件引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
本发明实施例中，基于前端vue项目的CSS代码优化装置可以获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式；提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内；当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器；根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。通过这种实施方式可以对CSS样式进行统一管理和维护，减少了代码量，提高了代码的复用率，实现了对CSS代码的优化。
参见图3，图3是本发明实施例提供的一种计算机设备的示意框图。如图所示的本实施例中的设备可以包括：一个或多个处理器301；一个或多个输入设备302，一个或多个输出设备303和存储器304。上述处理器301、输入设备302、输出设备303和存储器304通过总线305连接。存储器304用于存储计算机程序，所述计算机程序包括程序，处理器301用于执行存储器304存储的程序。其中，处理器301被配置用于调用所述程序执行：
获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式；
提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内；
当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器；
根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
进一步地，所述处理器301提取各个待优化的CSS样式的vue组件内存在的内联样式时，具体用于：
对所述各个待优化的CSS样式的vue组件中页面模板对应的标签进行遍历；
从所述页面模板对应的标签中提取出单个dom元素标签，并获取所述单个dom元素标签内指定子标签中所包含的内容信息；
根据从所述单个dom元素标签内指定子标签中所包含的内容信息提取所述确定所述各个待优化的CSS样式的vue组件内存在的内联样式。
进一步地，所述处理器301根据从所述单个dom元素标签内指定子标签中所包含的内容信息提取所述确定所述各个待优化的CSS样式的vue组件内存在的内联样式时，具体用于：
根据从所述单个dom元素标签内指定子标签中所包含的内容信息，检测所述内容信息中是否存在内联样式；
当检测到所述内容信息中存在内联样式时，确定从所述内容信息中提取所述内联样式。
进一步地，所述处理器301将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内时，具体用于：
根据所述单个dom元素和预设的命名规则确定类名，并根据确定的类名新建与所述类名对应的新增类；
将所述各个待优化的CSS样式的vue组件内的内联样式作为新建的与所述类名对应的新增类的内容信息添加到所述新增类中；
将添加所述各个待优化的CSS样式的vue组件内的内联样式的新增类添加到所述各个待优化的CSS样式的vue组件对应的指定标签内。
进一步地，所述处理器301当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器时，具体用于：
检测所述各个待优化的CSS样式的vue组件中所述新增类的内容信息中是否存在预设关键词；
当检测到所述各个待优化的CSS样式的vue组件中所述新增类的内容信息中存在预设关键词时，确定使用相邻选择器或子选择器，并将所述相邻选择器或子选择器转变为类选择器。
进一步地，所述处理器301提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容时，具体用于：
根据所述类选择器获取所述各个待优化的CSS样式的vue组件中所述指定标签内的各个类名中的样式内容；
检测所述各个待优化的CSS样式的vue组件中所述指定标签内相同类名的类中是否存在一致的样式内容；
当检测结果为所述各个待优化的CSS样式的vue组件中所述指定标签内相同类名的类中存在一致的样式内容时，确定所述相同类名的类中存在的一致的样式内容为所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容；
所述处理器301将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到添加所述公用样式内容的各个vue组件时，具体用于：
根据所述相同类名的类中存在的一致的样式内容新建第一样式类，并将所述第一样式类添加到公共样式文件中，以及将所述添加第一样式类的公共样式文件通过入口文件引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
进一步地，所述处理器301还用于：
检测所述各个待优化的CSS样式的vue组件中所述指定标签内不同类名的类中是否存在一致的样式内容；
当检测结果为所述各个待优化的CSS样式的vue组件中所述指定标签内不同类名的类中存在一致的样式内容时，确定所述不同类名的类中存在的一致的样式内容为所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容；
所述处理器301将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件时，具体用于：
根据所述不同类名的类中存在的一致的样式内容新建第二样式类，并将所述第二样式类添加到公共样式文件中，以及将所述添加第二样式类的公共样式文件通过入口文件引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
本发明实施例中，计算机设备可以获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式；提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内；当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器；根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。通过这种实施方式可以对CSS样式进行统一管理和维护，减少了代码量，提高了代码的复用率，实现了对CSS代码的优化。
应当理解，在本发明实施例中，所称处理器301可以是中央处理单元(CenSralProcessing UniS，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(DigiSalSignal Processor，DSP)、专用集成电路(ApplicaSion Specific InSegraSed CircuiS，ASIC)、现成可编程门阵列(Field-Programmable GaSe Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
输入设备302可以包括触控板、麦克风等，输出设备303可以包括显示器(LCD等)、扬声器等。
该存储器304可以包括只读存储器和随机存取存储器，并向处理器301提供指令和数据。存储器304的一部分还可以包括非易失性随机存取存储器。例如，存储器304还可以存储设备类型的信息。
具体实现中，本发明实施例中所描述的处理器301、输入设备302、输出设备303可执行本发明实施例提供的图1所述的方法实施例中所描述的实现方式，也可执行本发明实施例图2所描述的基于前端vue项目的CSS代码优化装置的实现方式，在此不再赘述。
本发明实施例中还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现图1所对应实施例中描述的基于前端vue项目的CSS代码优化方法，也可实现本发明图2所对应实施例的基于前端vue项目的CSS代码优化装置，在此不再赘述。
所述计算机可读存储介质可以是前述任一实施例所述的基于前端vue项目的CSS代码优化装置的内部存储单元，例如基于前端vue项目的CSS代码优化装置的硬盘或内存。所述计算机可读存储介质也可以是所述基于前端vue项目的CSS代码优化装置的外部存储装置，例如所述基于前端vue项目的CSS代码优化装置上配备的插接式硬盘，智能存储卡(SmarS Media Card,SMC)，安全数字(Secure DigiSal,SD)卡，闪存卡(Flash Card)等。进一步地，所述计算机可读存储介质还可以既包括所述基于前端vue项目的CSS代码优化装置的内部存储单元也包括外部存储装置。所述计算机可读存储介质用于存储所述计算机程序以及所述基于前端vue项目的CSS代码优化装置所需的其他程序和数据。所述计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个计算机可读存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，终端，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的计算机可读存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。所述的计算机可读存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。
需要强调的是，为进一步保证上述数据的私密和安全性，上述数据还可以存储于一区块链的节点中。其中，本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
以上所述，仅为本发明的部分实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。
Claims (10)
1.一种基于前端vue项目的CSS代码优化方法，其特征在于，所述方法包括：
获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式；
提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内；
当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器；
根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
2.根据权利要求1所述的方法，其特征在于，所述提取各个待优化的CSS样式的vue组件内存在的内联样式，包括：
对所述各个待优化的CSS样式的vue组件中页面模板对应的标签进行遍历；
从所述页面模板对应的标签中提取出单个dom元素标签，并获取所述单个dom元素标签内指定子标签中所包含的内容信息；
根据从所述单个dom元素标签内指定子标签中所包含的内容信息提取所述确定所述各个待优化的CSS样式的vue组件内存在的内联样式。
3.根据权利要求2所述的方法，其特征在于，所述根据从所述单个dom元素标签内指定子标签中所包含的内容信息提取所述确定所述各个待优化的CSS样式的vue组件内存在的内联样式，包括：
根据从所述单个dom元素标签内指定子标签中所包含的内容信息，检测所述内容信息中是否存在内联样式；
当检测到所述内容信息中存在内联样式时，确定从所述内容信息中提取所述内联样式。
4.根据权利要求3所述的方法，其特征在于，所述将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内，包括：
根据所述单个dom元素和预设的命名规则确定类名，并根据确定的类名新建与所述类名对应的新增类；
将所述各个待优化的CSS样式的vue组件内的内联样式作为新建的与所述类名对应的新增类的内容信息添加到所述新增类中；
将添加所述各个待优化的CSS样式的vue组件内的内联样式的新增类添加到所述各个待优化的CSS样式的vue组件对应的指定标签内。
5.根据权利要求4所述的方法，其特征在于，所述当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器，包括：
检测所述各个待优化的CSS样式的vue组件中所述新增类的内容信息中是否存在预设关键词；
当检测到所述各个待优化的CSS样式的vue组件中所述新增类的内容信息中存在预设关键词时，确定使用相邻选择器或子选择器，并将所述相邻选择器或子选择器转变为类选择器。
6.根据权利要求5所述的方法，其特征在于，所述根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，包括：
根据所述类选择器获取所述各个待优化的CSS样式的vue组件中所述指定标签内的各个类名中的样式内容；
检测所述各个待优化的CSS样式的vue组件中所述指定标签内相同类名的类中是否存在一致的样式内容；
当检测结果为所述各个待优化的CSS样式的vue组件中所述指定标签内相同类名的类中存在一致的样式内容时，确定所述相同类名的类中存在的一致的样式内容为所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容；
所述将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到添加所述公用样式内容的各个vue组件，包括：
根据所述相同类名的类中存在的一致的样式内容新建第一样式类，并将所述第一样式类添加到公共样式文件中，以及将所述添加第一样式类的公共样式文件通过入口文件引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
7.根据权利要求6所述的方法，其特征在于，所述方法还包括：
检测所述各个待优化的CSS样式的vue组件中所述指定标签内不同类名的类中是否存在一致的样式内容；
当检测结果为所述各个待优化的CSS样式的vue组件中所述指定标签内不同类名的类中存在一致的样式内容时，确定所述不同类名的类中存在的一致的样式内容为所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容；
所述将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件，包括：
根据所述不同类名的类中存在的一致的样式内容新建第二样式类，并将所述第二样式类添加到公共样式文件中，以及将所述添加第二样式类的公共样式文件通过入口文件引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
8.一种基于前端vue项目的CSS代码优化装置，其特征在于，包括：
获取单元，用于获取前端中当前vue项目的根目录中的配置文件，并根据所述配置文件中的地址信息确定所述当前vue项目中待优化的CSS样式的所有vue组件，其中，所述CSS样式包括内联样式；
提取单元，用于提取各个待优化的CSS样式的vue组件内存在的内联样式，并将所述各个待优化的CSS样式的vue组件内的内联样式添加到所述各个待优化的CSS样式的vue组件对应的指定标签内；
转变单元，用于当确定所述各个待优化的CSS样式的vue组件使用相邻选择器或子选择器时，将所述相邻选择器或子选择器转变为类选择器；
添加单元，用于根据所述类选择器提取所述各个待优化的CSS样式的vue组件中所述指定标签内的公用样式内容，并将所述公用样式内容引入到所述各个待优化的CSS样式的vue组件中，得到引入所述公用样式内容的各个vue组件。
9.一种计算机设备，其特征在于，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序，所述处理器被配置用于调用所述程序，执行如权利要求1-7任一项所述的方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行以实现权利要求1-7任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011542064.6A CN112685013A (zh) | 2020-12-23 | 2020-12-23 | 基于前端vue项目的CSS代码优化方法及相关设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011542064.6A CN112685013A (zh) | 2020-12-23 | 2020-12-23 | 基于前端vue项目的CSS代码优化方法及相关设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112685013A true CN112685013A (zh) | 2021-04-20 |
Family
ID=75451374
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011542064.6A Pending CN112685013A (zh) | 2020-12-23 | 2020-12-23 | 基于前端vue项目的CSS代码优化方法及相关设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112685013A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114201236A (zh) * | 2021-12-14 | 2022-03-18 | 平安壹钱包电子商务有限公司 | 基于ast的组件配置的方法、装置、设备及介质 |
-
2020
- 2020-12-23 CN CN202011542064.6A patent/CN112685013A/zh active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114201236A (zh) * | 2021-12-14 | 2022-03-18 | 平安壹钱包电子商务有限公司 | 基于ast的组件配置的方法、装置、设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108334609B (zh) | Oracle中实现JSON格式数据存取的方法、装置、设备及存储介质 | |
| CN110597814B (zh) | 结构化数据的序列化、反序列化方法以及装置 | |
| CN110262783B (zh) | 一种接口生成方法、装置及终端设备 | |
| CN112070608B (zh) | 信息处理方法、装置、介质及电子设备 | |
| CN106921682A (zh) | 文件上传方法和装置 | |
| CN111159982B (zh) | 文档编辑方法、装置、电子设备及计算机可读存储介质 | |
| CN110955714A (zh) | 一种将非结构化文本转化为结构化文本的方法及装置 | |
| CN111800492A (zh) | web网页中文字的标记方法、装置、计算机设备及存储介质 | |
| CN104050424A (zh) | 智能卡文件访问安全权限管理的实现及文件访问方法 | |
| CN114090671A (zh) | 数据导入方法、装置、电子设备及存储介质 | |
| CN112328486A (zh) | 接口自动化测试方法、装置、计算机设备及存储介质 | |
| CN111045654A (zh) | 基于Vue快速生成常用指令的方法、装置、计算机设备及存储介质 | |
| US9767086B2 (en) | System and method for enablement of data masking for web documents | |
| CN112685013A (zh) | 基于前端vue项目的CSS代码优化方法及相关设备 | |
| CN114036561A (zh) | 信息隐藏、信息获取方法、装置、存储介质及电子设备 | |
| US10956659B1 (en) | System for generating templates from webpages | |
| CN113094543A (zh) | 一种音乐鉴权方法、装置、设备及介质 | |
| CN111221690B (zh) | 针对集成电路设计的模型确定方法、装置及终端 | |
| CN112363814A (zh) | 任务调度方法、装置、计算机设备及存储介质 | |
| US20040064788A1 (en) | System and method for generating source code for an XML application | |
| US20080252932A1 (en) | Techniques to synchronize information between fidelity domains | |
| CN113741864B (zh) | 基于自然语言处理的语义化服务接口自动设计方法与系统 | |
| CN111552638B (zh) | 一种代码检测方法及装置 | |
| CN111695327B (zh) | 一种乱码修复方法、装置、电子设备及可读存储介质 | |
| CN113094283A (zh) | 一种数据获取方法、装置、设备及存储介质 |
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 |