• vue+element自定义主题的几种方法


    本文实现了三种(也就是官方所讲的前三种,最后一种不想试了):

    方法一:在项目中改变 SCSS 变量

    项目使用scss时,创建自定义的scss文件,写入一下内容

    /* 改变主题色变量 */
    $--color-primary: teal;
    
    /* 改变 icon 字体路径变量,必需 */
    $--font-path: '~element-ui/lib/theme-chalk/fonts';
    
    @import "~element-ui/packages/theme-chalk/src/index";

    之后,在项目的入口文件中,直接引入以上样式文件即可(无需引入 Element 编译好的 CSS 文件):

    import Vue from 'vue'
    import Element from 'element-ui'
    import './[自定义的scss文件名].scss'
    
    Vue.use(Element)

    需要注意的是,覆盖字体路径变量是必需的,将其赋值为 Element 中 icon 图标所在的相对路径即可。

    注意::不知道主题哪里使用了什么变量,可以从主题自动生成的scss文件中查找,主题文件的生成按照第二种方法即可;

    方法二:命令行主题工具

    如果你的项目没有使用 SCSS,那么可以使用命令行主题工具进行深层次的主题定制:

    //安装主题工具
    npm i element-theme -g
    
    //安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码。
    # 从 npm
    npm i element-theme-chalk -D
    
    # 从 GitHub
    npm i https://github.com/ElementUI/theme-chalk -D

    主题生成工具安装成功后,如果全局安装可以在命令行里通过 et 调用工具,如果安装在当前目录下,需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss,当然你可以传参数指定文件输出目录。

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

    执行成功如上图,但是因为版本原因可能报错,是因为主题工具问题,可以执行下面的命令;

    cnpm i element-themex -g

    运行成功后,重新在命令行执行et -i,即可生成element-variables.scss文件

    在文件中修改主题变量的颜色后,执行et,即可生成them文件夹

    et
    
    > ✔ build theme font
    > ✔ build element theme

    在入口文件引用即可

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

    方法三:引入自定义主题

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

    官方在线编辑主题链接如下(选取色彩后可以下载,放入自己项目):

    https://elementui.github.io/theme-chalk-preview/#/zh-CN

    方法四:借助 babel-plugin-component

    借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

    首先,安装 babel-plugin-component:

    npm install babel-plugin-component -D

    然后,将 .babelrc 修改为:

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

    注意::如果是搭配 babel-plugin-component 一起使用,只需要修改 .babelrc 的配置,指定 styleLibraryName 路径为自定义主题相对于 .babelrc 的路径,注意要加 ~

    博观而约取
  • 相关阅读:
    JMeter:全面的乱码解决方案
    代码静态扫描工具sonar
    jmeter接口测试
    MVC模式
    Android--HttpClient
    android SQLite使用SQLiteOpenHelper类对数据库进行操作
    反射
    列约束
    MVC的处理过程
    android项目中values中几个文件的作用
  • 原文地址:https://www.cnblogs.com/EssMin/p/14326851.html
Copyright © 2020-2023  润新知