美文网首页
Vue自定义element-ui主题

Vue自定义element-ui主题

作者: 前端阿峰 | 来源:发表于2020-07-23 14:23 被阅读0次

    1、安装element-ui

    npm i element-ui -S
    

    2、完整引入

    在 main.js 中写入以下内容

    import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';
    
    Vue.use(ElementUI);
    
    new Vue({
     el: '#app',
     render: h => h(App)
    });
    

    3、主题安装工具

    npm i element-theme -g
    

    安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码

    # 从 npm
    npm i element-theme-chalk -D
    
    # 从 GitHub
    npm i https://github.com/ElementUI/theme-chalk -D
    

    4、初始化变量文件

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

    如果使用默认配置,执行后当前目录会有一个 element-variables.scss 文件。内部包含了主题所用到的所有变量,它们使用 SCSS 的格式定义。大致结构如下:

    $--color-primary: #409EFF !default;
    $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
    $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
    $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
    $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
    $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
    $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
    $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
    $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
    $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
    
    $--color-success: #67c23a !default;
    $--color-warning: #e6a23c !default;
    $--color-danger: #f56c6c !default;
    $--color-info: #909399 !default;
    
    ...
    

    5、修改变量

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

    $--color-primary: red;
    

    6、编译主题

    et
    
    > ✔ build theme font
    > ✔ build element theme
    

    7、引入自定义主题

    和引入默认主题一样,在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 theme/index.css 文件即可。

    import '../theme/index.css'
    import ElementUI from 'element-ui'
    import Vue from 'vue'
    
    Vue.use(ElementUI)
    

    相关文章

      网友评论

          本文标题:Vue自定义element-ui主题

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