学习目录

  1. Vue.js 基础：在学习 ElementUI 之前，你需要先掌握 Vue.js 的基础知识，包括 Vue.js 的核心概念、指令、组件等。
  2. ElementUI 组件：ElementUI 包含很多常用的 UI 组件，如按钮、表单、表格、弹窗等，你需要针对每个组件进行深入的学习，了解组件的使用方法、属性、事件等。
  3. ElementUI 主题：ElementUI 可以自定义主题，你需要了解如何配置主题，如何使用自定义的主题。
  4. ElementUI 实战：通过实际项目的开发，将 ElementUI 应用于项目中，加深对 ElementUI 的理解和熟练度。
  5. ElementUI 扩展：在掌握了 ElementUI 的基础之后，你可以尝试自己编写扩展组件，或者对现有组件进行二次开发，提高自己的技能水平。


ElementUI 主题的安装使用

首先，我们需要安装ElementUI，可以使用以下命令：

npm install element-ui -S

安装完毕后，我们需要安装主题生成器，可以使用以下命令：

npm install element-theme -g

安装完毕后，我们使用以下命令生成主题文件：

et -i

这个命令会在当前目录下生成一个名为element-variables.scss的文件。这个文件中包含了ElementUI的所有变量，我们可以在这个文件中修改变量的值来改变主题的样式。

例如，我们可以将$--color-primary变量的值改为#42b983，这样就会将主题的主色调改为绿色。

接下来，我们需要使用主题生成器编译CSS文件。可以使用以下命令：

et -c element-variables.scss -o ./theme

这个命令会将编译后的CSS文件输出到./theme目录下。

接着，在Vue项目的入口文件中引入编译后的CSS文件：

import 'element-ui/lib/theme-chalk/index.css'
import './theme/index.css'

这样就可以使用自定义主题了。

需要注意的是，如果我们在项目中使用了按需加载的方式引入ElementUI组件，那么我们需要在babel配置中添加以下内容：

plugins: [
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]

这样，按需加载的组件才能正确地使用自定义主题。

除了修改主题变量，我们还可以通过覆盖ElementUI的样式来修改主题。例如，我们可以在主题文件中添加以下代码：

.el-button {
  border-radius: 0;
}

这样就会将所有的按钮的圆角改为0。

总之，使用ElementUI自定义主题非常方便，只需按照上述步骤进行操作即可。自定义主题可以让我们的项目更加个性化，展现出不同的风格和氛围。同时，ElementUI的主题生成器还支持自定义主题的导出格式，可以导出成less、stylus等格式，方便我们在不同的项目中使用。