Vue的elementUI实现自定义主题(一)(附截图详细步骤)

先上官方链接,https://github.com/ElementUI/element-theme。

1,安装和项目初始化

博主采用的安装是,IDEA clone整个项目 https://github.com/ElementUI/element-theme.git, 然后直接本地初始化,官方教程有其他的安装方式,但是博主并没有弄明白。。。。

在这里插入图片描述

生成文件也可以叫初始化变量文件

et -i 效果是生成 element-variables.scss,位置位于根目录,图上圈起来的就是生成的变量文件

在这里插入图片描述

修改变量

具体就是在上一步生成的文件中进行修改,博主只改了圈起来的地方。这里依照个人需要进行自由修改

在这里插入图片描述

编译主题

et 效果是生成theme文件夹,里面有很多css文件和font文件夹,这里的css文件可以除了index.css, 全部删除,不删除也行。这个就是生成的主题。
在这里插入图片描述

使用主题

1,打开要使用主题的项目,将theme主题复制上去,这里,博主删除了除index.css外的其他css,如下图
在这里插入图片描述
2,打开main.js更换css,然后运行
在这里插入图片描述
3. 运行效果
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/LuckyMon/article/details/89881361
今日推荐