1、安装elementUI

$ npm i element-ui -S

2、安装主题工具

npm i element-theme -g

3、安装chalk主题

  npm 安装

npm i element-theme-chalk -D

  (或)

   GitHub 拉取最新代码

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

4、修改theme的sass文件

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

>  Generator variables file //表示成功

此时根目录下会产生 element-variables.scss 文件,大致如下:

5、编辑 element-variables.scss 文件,修改为自己所需要的颜色主题色

  示例:

$--color-primary: #17b3a3!default;

6、编译主题

修改完变量后,要编译主题(如果编译后,再次修改了变量,需要重新编译)

et

>  build theme font
> build element theme //表示从新编译成功

执行主题编译命令生成主题,根目录会生成 theme 文件夹 。需要引入这个文件夹里的 css、font 等资源。(theme文件夹里有font文件夹和大量的css文件,css文件只留下index.css,其他的css文件都可以删掉,因为index.css中的样式包含其他全部css文件的样式。

7、引入自定义主题

  在main.js文件:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import '../theme/index.css' Vue.use(ElementUI) Vue.config.productionTip = false new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

8、使用

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>

视图如:

在 vue-cli 项目中 使用elementUI 的“自定义主题”功能的更多相关文章

  1. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  2. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  3. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  4. 升级vue项目中的element-ui的版本

    首先卸载项目中的element-ui 命令为: npm uninstall element-ui / cnpm uninstall element-ui 安装更新最新的element-ui 命令为 n ...

  5. 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm

    前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...

  6. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  7. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  8. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

随机推荐

  1. 安装MySQL详细说明

    安装MySQL详细说明 下载后得到zip压缩包 解压到自己的安装目录 添加环境变量 我的电脑->属性->高级->环境变量 选择PATH,在其后面添加:你的mysql安装文件下面的bi ...

  2. A Python Environment Detector

    The user provide the method to get result(command on remote host), the check standard(a callback fun ...

  3. FSM自动售货机 verilog 实现及 code 细节讲解

    1.题目: 饮料1.5 元, 可投入硬币1 元 0.5 元,输出饮料 零钱 2. 画出状态机. 3.仿真结果:coin=1 --> 0.5 元 coin=2-->1元 4.关键代码分析: ...

  4. 【Vulhub】Rsync未授权访问漏洞复现

    Rsync未授权访问 Rsync简介 rsync,remote synchronize顾名思意就知道它是一款实现远程同步功能的软件,它在同步文件的同时,可以保持原来文件的权限.时间.软硬链接等附加信息 ...

  5. Pikachu-Unsafe Filedownload模块

    一.概述 文件下载功能在很多web系统上都会出现,一般我们当点击下载链接,便会向后台发送一个下载请求,一般这个请求会包含一个需要下载的文件名称,后台在收到请求后 会开始执行下载代码,将该文件名对应的文 ...

  6. Java社区——个人项目开发笔记(一)

    1.maven安装与测试 安装过程略,常用的maven命令行工具: mvn --version 查看maven版本 mvn compile 编译maven工程 mvn clean 删除编译文件 mvn ...

  7. java使用wol远程开机

    param类 package com.meeno.framework.wol.params; import lombok.Getter; import lombok.NoArgsConstructor ...

  8. ansible 常用模块总结

    记录常用的模块功能,详细使用查看官网. 1. file模块 创建软连接 ansible test -m file -a "src=/tmp/conf.d dest=/tmp/conf.d s ...

  9. 8、二进制安装K8s之部署CIN网络

    二进制安装K8s之部署CIN网络 部署CIN网络可以使用flannel或者calico,这里介绍使用calico ecd 方式部署. 1.下载calico二进制安装包 创建所需目录 mkdir -p ...

  10. 数学log的基本知识

    在数学中,对数是对求幂的逆运算,正如除法是乘法的倒数,反之亦然.这意味着一个数字的对数是必须产生另一个固定数字(基数)的指数, 在简单的情况下,乘数中的对数计数因子.如果a的x次方等于N(a>0 ...