vue2.0-基于elementui换肤[自定义主题]

0. 直接上 预览链接

vue2.0-基于elementui换肤[自定义主题]

1. 项目增加主题组件

在项目的src/components下添加skin文件夹

skin文件获取地址

2. 项目增加自定义主题

自定义添加主题下载地址 https://elementui.github.io/theme-chalk-preview/#/zh-CN

3. 项目引入和使用

选择你想要随主题改变的element元素在src/global/themeArray里面，不希望随主题改变的可以注释掉

选择皮肤之后把记录存在cookie里面。

再次打开浏览器访问项目钩子初始化的时候从cookie里面得到之前选择的皮肤。

至此整合完毕 源码地址

Vue学习大佬群493671066，美女多多。老司机快上车，来不及解释了。

作者相关Vue文章

基于Vue2.0实现后台系统权限控制

前端文档汇总

VUE2.0增删改查附编辑添加model(弹框)组件共用

打赏 衷心的表示感谢

原文地址：https://www.cnblogs.com/nxmin/p/8984806.html

时间： 2024-10-09 22:52:31

vue2.0-基于elementui换肤[自定义主题]的相关文章

[js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程

在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli  安装vue命令行工具 2,vue init webpack vue-demo   使用vue命令生成一个webpack项目,项目名称为vue-demo 3,cd vue-demo 切入项目 4,npm install安装package.json中的所有依赖包 5,npm run dev运行项目 一.父组件向子组件传递数据 然后删除默认的Hello.vue组件,把App.vue整理成以下

vue2.0 + element ui 后台管理系统

vue2.0 和 elementui  搭建的一个后台管理系统 概述: 这是一个用vuejs2.0和element搭建的后台管理界面. 技术栈: vue2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element ui:基于vue2.0的ui组件库. vue-router:一般单页面应用spa都要用到的前端路由. vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. webpack + es6/7 + less mock.js : 相

导航-换肤

简单导航示例 效果 源码: ------------------------------------- <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author&

饿了么基于Vue2.0的通用组件开发之路（分享会记录）

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的 大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,

Android主题换肤 无缝切换

2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1.2.1:完善之前版本View的创建v1.2.0:增加对换肤属性自定义扩展v1.1.0:可以直接加载网络上的皮肤文件 今天再给大家带来一篇干货. Android的主题换肤 ,可插件化提供皮肤包,无需Activity的重启直接实现无缝切换,可高仿网易云音乐的主题换肤. 这个链接是本次的Demo打包出来的

使用 css/less 动态更换主题色（换肤功能）

前言 说起换肤功能,前端应该是非常熟悉了?? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前端,前端从接口获取主题色在初始化的时候显示对应的主题色 3. 前面两者的结合,初始化的颜色设置,但也可通过前端的切换来更改主题色 拿到换肤需求后,就在思考该如何实现呢?? 先搜一下,看下有哪些方法 Ant Design 的更换主题色功能是用 less 提供的 modifyVars 的方式进行覆盖变

Vue2.0 + Element-UI + WebAPI实践：简易个人记账系统

最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlserver2008R2 + WebAPI + Dapper + Vue2.0 + Element-UI 2.项目解决方案概览 简单介绍下,Account是WebAPI项目,承载前端请求:Account.BLL.Account.DAL.Account.Entity不废话:Account.Common是对D

vue2.0+element-ui(01简单点的单页面)

前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句"出来混,总是要还的!"这句话了,那时候信心满满的买来书想要认真研究的时候,却还是把它搁浅了.直到最近工作上要使用它来做一个后台管理系统,才不得不逼迫自己再次重新拿起书,看起文档,努力研究这个异常流行的Vue.js. 过程: 简单页面呈现如下   (图片貌似有点模糊,基本实现就是简单的增删改查): 1.使用到的技术: vue2.0:https://cn.vuejs.org/v2/

基于jQuery仿百度首页换肤功能代码

分享一款基于jQuery仿百度首页换肤功能代码.这是一款类似百度首页的自定义背景图片切换特效代码. 在线预览   源码下载 实现的代码. html代码: <a href="#">换肤</a> <div class="heitiao"></div> <div class="con"><img src="images/content.png" /></d