Vue+ElementUI 切换ElementUI主题+自定义颜色的修改（指定几种颜色的换肤）

一、版本说明（若没有以下中间件，先安装喔）

---

1.1、具体代码开源到github中，欢迎star 

Node.js      10.13.0

NPM            6.10.3

Vue              2.5.2

vue-router      3.0.1

element-ui      2.11.1

element-theme-chalk     2.11.1        # `npm install element-theme-chalk --save-dev`

webpack-theme-color-replacer    1.2.17        # `npm install webpack-theme-color-replacer --save-dev`

 

二、【原理】利用html的data-属性，动态修改该属性值，达到修改主题的效果，运用Sass+Vuex

---

2.1、【ElementUI主题修改】原理：通过官网下载几个主题到本地，然后修改主题名（注意与本地文件名一致），然后动态将页面样式通过link标签引入

【下载了三个主题，分别命名为default、green、orange】，放在static目录下

【封装定义包含ElementUI组件名的数组文件themeArray.js】

//主题文件数组
const themeArray = [
    "Pagination",
    "Dialog",
    "Autocomplete",
    "Dropdown",
    "dropdown-menu",
    "dropdown-item",
    "Menu",
    "Submenu",
    "menu-item",
    "menu-item-group",
    "Input",
    "input-number",
    "Radio",
    "radio-group",
    "radio-button",
    "Checkbox",
    "checkbox-group",
    "Switch",
    "Select",
    "Option",
    "option-group",
    "Button",
    "button-group",
    "Table",
    "table-column",
    "date-picker",
    "time-select",
    "time-picker",
    "Popover",
    "Tooltip",
    "Breadcrumb",
    "breadcrumb-item",
    "Form",
    "form-item",
    "Tabs",
    "tab-pane",
    "Tag",
    "Tree",
    "Alert",
    "Slider",
    "Icon",
    "Row",
    "Col",
    "Upload",
    "Progress",
    "Spinner",
    "Badge",
    "Card",
    "Rate",
    "Steps",
    "Step",
    "Carousel",
    "Scrollbar",