element主题更换详解

作者: RtyXmd | 来源:发表于2018-06-08 10:54 被阅读61次

    官网文档

    准备工作

    初始化一个vue项目

    vue init webpack element-theme
    npm install 
    npm run dev
    

    安装并引入element

    npm install element-ui --save
    
    main.js
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    
    主题生成工具安装

    全局安装

    npm install element-theme -g
    

    安装chalk主题

    npm
    npm install element-theme-chalk -D
    
    GitHub
    npm install https://github.com/ElementUI/theme-chalk -D
    
    初始化变量文件

    执行-i初始化变量文件,默认输出到element-variables.scss

    et -i [自定义变量文件]
    > ✔ Generator variables file
    

    执行后会有一个scss配置文件element-variables.scss,内部包含了主题所用到的所有变量

    修改变量

    直接编辑 element-variables.scss 文件,例如修改主题为想要的颜色。

    $--color-primary: #34a853 !default;
    

    编译主题

    et
    
    > ✔ build theme font
    > ✔ build element theme
    

    引入主题文件

    import '../theme/index.css'
    
    测试
    测试成功

    相关文章

      网友评论

        本文标题:element主题更换详解

        本文链接:https://www.haomeiwen.com/subject/ngvosftx.html