vue组件库的在线主题编辑器的实现思路-创新互联

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

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

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

实现思路

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

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

后端返回主题可修改的变量信息，前端生成对应的控件，用户可进行修改，修改后立即将修改的变量和修改后的值发送给后端，后端进行合并编译，生成css返回给前端，前端动态替换style标签的内容达到实时预览的效果。

主题列表页面

主题列表页面的主要功能是显示官方主题列表和显示自定义主题列表。

官方主题可进行的操作有预览和复制，不能修改，修改的话会自动生成新主题。自定义主题可以编辑和下载，及进行修改名称、复制、删除操作。

官方主题列表后端返回，数据结构如下：

{
 name: '官方主题-1', // 主题名称
 by: 'by hui', // 来源
 description: '默认主题', // 描述
 theme: {
 // 主题改动点列表
 common: {
 '$--color-brand': '#e72528'
 }
 }
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。