如何实现Vue组件库在线主题编辑器的长尾关键词优化？

本文共计5461个文字，预计阅读时间需要22分钟。

组件库通常会设计一套相对通用的主题符号，以符合大众审美或产品需求的主题。但主题的定义并非一成不变，组件库通常允许用户自定义主题，以满足不同的需求。我的Vue组件库Hui也允许用户自定义主题。

一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题，但是主题定制需求永远都存在，所以组件库一般都会允许使用者自定义主题，我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的，新体系下还做到了动态换肤，因为皮肤本质上是一种静态资源（CSS文件和字体文件），所以只需要约定一种方式来每次动态请求加载不同的文件就可以了，为了方便这一需求，还配套开发了一个Vessel脚手架的插件，只需要以配置文件的方式列出你需要修改的变量和值，一个命令就可以帮你生成对应的皮肤。

但是目前的换肤还存在几个问题， 一是不直观，无法方便实时的看到修改后的组件效果，二是建议修改的变量比较少，这很大原因也是因为问题一，因为不直观所以盲目修改后的效果可能达不到预期。

针对这几个问题，所以实现一个在线主题编辑器是一个有意义的事情，目前最流行的组件库之一的Element就支持主题在线编辑，地址：element.eleme.cn/#/zh-CN/the… ，本项目是在参考了Element的设计思想和界面效果后开发完成的，本文将开发思路分享出来，如果有一些不合理地方或有一些更好的实现方式，欢迎指出来一起讨论。

实现思路

主题在线编辑的核心其实就是以一种可视化的方式来修改主题对应scss变量的值。

项目总体分为前端和后端两个部分，前端主要负责管理主题列表、编辑主题和预览主题，后端主要负责返回变量列表和编译主题。