vue中使用element-ui自定义主题

发表于 | 分类于

使用命令行主题工具

  • 安装工具
    npm i element-theme -g

  • 安装chalk主题，可以从 npm 安装或者从 GitHub 拉取最新代码

    从 npm

    npm i element-theme-chalk -D

从 GitHub

npm i https://github.com/ElementUI/theme-chalk -D

  • 初始化变量文件

    et -i [可以自定义变量文件，默认为element-variables.scss]

✔ Generator variables file

  • 修改变量
    直接编辑 element-variables.scss 文件，例如修改主题色为自己所需要的颜色
    $–color-primary: pink;

  • 编译主题
    修改完变量后，要编译主题（如果编译后，再次修改了变量，需要重新编译）

    et

✔ build theme font
✔ build element theme

  • 引入自定义主题
    最后一步，将编译好的主题文件引入项目（编译的文件默认在根目录下的theme文件下，也可以通过 -o 参数指定打包目录），在入口文件main.js中引入

    import ‘../theme/index.css’
    import ElementUI from ‘element-ui’
    import Vue from ‘vue’

Vue.use(ElementUI)