nuxt 引入 element-UI 自定义主题色

最新推荐文章于 2024-08-14 14:18:57 发布
最新推荐文章于 2024-08-14 14:18:57 发布
阅读量2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21363577/article/details/92839487
版权

之前试了好多次都没试成功，百度和谷歌上搜了半天也没找到可行的方案，

今天静下心来按照官方文档的思想终于成功了（其实很简单，不知道之前为什么总是不成功，真想抽自己，代码技术、菜是原罪）

刚刚写了篇随笔 nuxt按需引入element-UI , 先去看看这个。

 

引入element-UI之后，在 /assets/scss 下新建一个 element-variables.scss 文件，文件名应该是可以自己随便取

 

element-variables.scss：

/* 改变主题色变量aaa */
$--color-primary: green;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

然后就可以了，终于看到期待已久的绿色：

绿意盎然，心花怒放。

想了解更多请移步element-UI官方文档

 

青云码上
关注
vue - 【最新】简单快捷的 element ui 组件库的主题色更改，批量统一覆盖替换解决方法，无需npm装包。（适用于新手小白的方法，很简单）
高级前端工程师
04-12 4759
vue element ui 实现更换主题颜色，vue怎么把element组件库的默认的蓝色主题改成其他颜色，vue element 组件库默认蓝色主题更换为其他颜色，vue更改element组件库主题色的超详细教程，vue 项目全局修改element-ui的样式/主题颜色，vue-element换肤所有主题色和基础色均可自主配置，vue中修改element plus 主题色，vue elementUI 主题颜色切换，vue中自定义element-ui组件库的主题颜色，vue使用element UI饿了么改
Nuxt - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换，将默认的蓝色主题色更换为其他自定义颜色（保姆级教程，简易且标准全局替换主题色）
王佳斌
04-12 2836
nuxt Element 主题色如何更改，nuxt2 element-ui修改主题颜色，nuxt改变elementui的主题色，nuxt全局修改element-ui的主题颜色，nuxt项目更改element-ui主题色，nuxt 全局更改饿了么element组件库主题色，在nuxt2项目中改变element的主题色，nuxt全局修改element-ui的主题颜色，nuxt+ElementUI实现动态更换任意主题色，nuxt element ui 实现更换主题颜色，nuxt怎么把element组件库的默认的蓝
Nuxt使用tailwind和daisyUI进行深色主题切换
m0_73950008的博客
06-29 510
nuxt中taiwind和daisyUi的安装和使用
nuxt 自定义element主题颜色&在nuxt 中按需引入element
木槿之夏
04-21 1670
按需要引入elment 第一步：安装 babel-plugin-component： npm install babel-plugin-component -D 第二步：修改plugins/element.js文件（默认nuxt 有个plugins文件夹，在这个文件夹下新建一个element.js文件） import Vue from 'vue' import { Button, Input } from 'element-ui' Vue.use(Button) Vue.use(Input) 第三步
nuxt按需引入 element-UI、自定义主题色（终极按需引入）
weixin_30299539的博客
06-19 1081
首先你要知道nuxt.js怎么引入第三方插件； 不多BB。 一、按需引入element-UI 第一步：安装 babel-plugin-component： npm install babel-plugin-component -D 第二步：修改plugins/element.js文件（plugins/element.js不知道怎么来的？出门左拐不送nuxt.js怎么引入第三...
ElementUI: 自定义主题
snowball的博客
12-13 7089
一、背景： 当element默认的主题不再适用你项目，这个时候你需要打开官网配置一下你的主题风格。 二、自定义主题页面： 2.1、element官网+theme Element - The world's most popular Vue UI framework 2.2、element官网+配置 zElement - The world's most popular Vue UI framework 三、配置主题： 四、下载主题： 五、项目引入： 5.1、放入文件 .
nuxt 极限导入element ui 可控制引入样式，修改主题色
weixin_41852038的博客
12-29 1270
前言 在Nuxt项目搭建之初，考虑要用到element ui 便将UI 按需引入 本文不介绍全局引入 安装 安装过程不再啰嗦 需要可自行百度 博主在创建项目时候 已经选择安装element ui 安装版本 "element-ui": "^2.15.2", 按需引入 打开 piugins 文件下的 element-ui.js import Vue from 'vue' import { Button} from 'element-ui' // element 语言包 import locale from
【Element入门】8、Element UI 自定义主题
weixin_52938153的博客
05-22 2197
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
Vue3 - Element Plus 全局修改更换主题色配置详细教程，element-plus自定义主题色全局替换主色调强力解决方案，支持动态修改主题颜色/动态皮肤，将默认蓝色主题色更换为其他颜色！
最新发布
王佳斌
08-14 5458
vue3，nuxt3，element-plus，组件库，主题色，修改主题颜色，更换主题色，如何修改组件默认主题蓝色，项目主题色定制，修改失败，主题色覆盖不了，:root直接修改，hover颜色没改，自定义主题色，vue3 全局设置element Plus主题色最新详细修改教程，怎么修改全局的颜色，scss变量，覆盖原来的主题色改为自己的颜色，统一替换，有没有好办法，颜色不变，失败，无效，动态主题切换，主题颜色怎么在项目里直接改，plus主题色更换，覆盖默认主题色，最强最好用，设置主题色，换肤，皮肤，动态更换
nuxt.js - 【最新】简单快捷的 element ui 组件库的主题色更改，批量统一覆盖替换解决方法，无需npm装包。（适用于新手小白的方法，很简单）
高级前端工程师
04-12 3457
nuxt element ui 实现更换主题颜色，nuxt2怎么把element组件库的默认的蓝色主题改成其他颜色，nuxt element 组件库默认蓝色主题更换为其他颜色，nuxt更改element组件库主题色的超详细教程，nuxt 项目全局修改element-ui的样式/主题颜色，nuxt-element换肤所有主题色和基础色均可自主配置，nuxt中修改element plus 主题色，nuxt elementUI 主题颜色切换，nuxt2中自定义element-ui组件库的主题颜色，nuxt使用el
Nuxt引入vue-persistedstate以及踩坑
weixin_48371382的博客
11-07 1549
前言 项目需求，需要vuex进行路由持久化保存，结合nuxt框架进行记录。 思路 监听数据变化, 每当登录完毕, vuex 数据发生变化,就要将数据保存到浏览器 本地 (指用户浏览器localStorage) 页面打开时, 会尝试将之前保存过的数据恢复到 vuex 当中即可 有点复杂, 找个插件帮忙 实现缓存信息到本地 nuxtjs中store不能直接使用浏览器的lcoalStorage方法， 而且自己写数据同步功能比较麻烦, 所以我们需要依赖一个插件vuex-persistedstate，该插件会把本地存
elementui css,elementUI——主题及自定义
weixin_39617470的博客
08-04 1401
说明：本文基于element-ui@2.13.0，源码详见element。一、主题相关代码结构：可以看出两点：a. 每个element ui组件基本都对应有单独的scss文件;b. 单独的组件scss文件，支持了组件按需引入时，样式部分也能按需引入的诉求；c.theme-chalk/src/common和theme-chalk/src/mixins目录下，主要是一些公共样式的设置，全局sass变量...
Element-UI自定义主题换肤
宇叔儿
05-24 642
在使用Element-UI进行开发时，需要用到饿了么的组件，但是样式却与我们的项目不匹配，这时候我们就可以在自己的项目中实现自定义主题换肤，具体操作步骤如下
Vue Nuxt.js 使用 VantUI 自动按需引入组件和定制主题文件覆盖的配置方法
qq1014156094的博客
11-06 2322
const path = require('path') export default { build: { babel: { plugins: [ // VantUI 自动按需引入组件配置 [ 'import', { libraryName: 'vant', ...
Nuxt3 修改Element-plus 默认主题色
qq_41971005的博客
08-16 1636
在项目根目录下创建一个文件夹assets/css/element-variables.scss。就可以看到如下效果了。
vue+element项目启动报错element-variables.scss问题
cainiao1412的博客
09-28 5625
启动项目时报错：File to import not found or unreadable: ./src/assets/css/variables.scss.
element 默认主题样式
我是小妖yun的博客
11-27 1473
element-variables.scss /* Element Chalk Variables */ // Special comment for theme configurator // type|skipAutoTranslation|Category|Order // skipAutoTranslation 1 /* Transition -------------------------- */ $--all-transition: all .3s cubic-bezier(.645,.0
Vue - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换，将默认的蓝色主题色更换为其他自定义颜色（保姆级教程，简易且标准全局替换主题色）
王佳斌
07-06 1万+
vue element ui 实现更换主题颜色，vue怎么把element组件库的默认的蓝色主题改成其他颜色，vue element 组件库默认蓝色主题更换为其他颜色，vue更改element组件库主题色的超详细教程，vue 项目全局修改element-ui的样式/主题颜色，vue-element换肤所有主题色和基础色均可自主配置，vue中修改element plus 主题色，vue elementUI 主题颜色切换，vue中自定义element-ui组件库的主题颜色，vue使用element UI饿了么改
Nuxt.js中使用Element-UI填坑
热门推荐
01-15 2万+
Nuxt.js是Vue进行SSR的一个优选开源项目，可免去繁琐的Webpack、nodejs后台服务配置等操作，方便的搭建一个支持SSR的VUE项目。Element-UI则是一个机遇Vue2.0+开发的一套UI框架，实现了常用的组件，可帮助开发者快速搭建一个如CMS系统、后台管理系统等基于Vue的系统。由于Element-UI目前在SSR支持方面还是不够完善，且Nuxt.js在文档方面也有欠缺，所以
nuxt的element-ui按需引入
04-01
要在nuxt中按需引入element-ui，可以使用babel-plugin-component插件来实现。 首先，安装babel-plugin-component插件： ``` npm install babel-plugin-component --save-dev ``` 然后，在nuxt.config.js中添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值