应产品的要求，做人生中的第一次换肤项目，在没做之前，确实觉得挺没有头绪的，所以就只能借助于百度啊，然后发现其实element自带的就有换肤功能，虽然看了很多别人的文章，但是想自己写一下加深印象。 一、项目搭建 第一步肯定是根据命令行生成对应的项目框架，然后安装element，根据需求引入自己需要的eleme
转载
2024-05-13 09:25:19
536阅读
VUE+ElementUI项目换肤功能一、固定多套主题换肤设置页面 （views/layout.vue）themes.js (@/utils/themes)main.jscss相关结构及内容index.css (css 入口文件)dark.css （主题文件）二、Element-UI动态换肤注：获取element-ui的版本号的目的是为了锁定版本，避免将来Element升级时受到非兼容性更新的影
转载
2024-03-23 11:37:00
1276阅读
前言现在越来越多的网站都提供了拥有换肤（切换主题）功能，如 ElementUI[2]，既是为了迎合用户需求，或是为了凸显自己特点，因此提供了个性化定制的功能.其实之前就想了解和实现 “一键换肤” 功能，但是由于种种原因一直拖到了现在. skin.gif
CSS 样式覆盖实现核心通过切换 css 选择器的方式实现主题样式的切换.在组件中保留不变的样式，将需要变化的样式进行抽离提供多种样式
举几个列子：既然使用了element-plus（下简写为 el-plus）el-row以及el-col 甚至可以代替掉 div 的使用，我不知道（甚至还能自动设置一些默认样式，减轻写样式的痛苦，这就是UI框架的原本意图，但我用了这么久，就是不知道，只会在 copy 的时候使用 el-row 等el-plus内置标签）
表单组件中 有提供自定义验证的功能 ，我不知道，傻傻自己写
<
转载
2024-09-03 12:46:11
57阅读
配置几套主题色，通过修改body class来实现，由于我是在组件库中使用的，以下为核心代码switch-theme 子组件<template> <div class="switch-theme"> <el-radio-group v-model="radio" @change="switchTheme"> <el-radio label="">经典</el-radio> <el-radio .
原创
2023-05-10 10:09:37
89阅读
效果如图： 源代码：<template> <div :class="[`son${temp}`]" class="demo3"> 这是四点零八分的北京<br/> 一片手的海浪翻动<br/> 这是四点零八分的北京<br/> 一声雄伟的汽笛长鸣<br/> 北京车站高大的建筑<br/>
原创
2022-10-15 07:08:14
156阅读
基于Vue、Element的换肤写在前面方案一使用全局的样式覆盖（前端通用）方案二自定义自己的Element-ui配色方案三快速改变网站颜色方案四实时更换主色调 写在前面换肤这个功能，不能算是很常见，但是也是有需求的，所以这里提供几种前端的换肤解决方案，供大家参考。本文将介绍几种基于Vue、Element-UI的换肤实现方案，力争通俗易懂，易上手，希望大家喜欢~方案一使用全局的样式覆盖（前端通用）
转载
2024-07-26 10:05:14
675阅读
一、搭建好项目的环境。
二、根据ElementUI官网的自定义主题（http://element.eleme.io/#/zh-CN/component/custom-theme）来安装【主题生成工具】。
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
npm i element-the
转载
2024-06-06 11:34:15
210阅读
思路：生成不同的css颜色文件，每个文件内部命名前加上.custom-颜色值做命名空间。然后app.vue里引入全部的颜色文件。用户点击某颜色，就在body加上class：custom-00a597 这样通过body的class改变就能实现真正使用不同的css文件。1.将css文件里面加上特定的.XX类名 比如 如颜色值为#00a597的css文件 ，我里面的每个选择器都加上了
转载
2024-07-05 05:03:03
339阅读
首先，在assets下css里创建了两个文件，一个theme.less，就是控制样式的函数，一个color.less，用来调用函数传值。// theme.less文件
// 实现换肤的样式函数
/*
1.主色调，整体项目的主要颜色。
2.首页的背景颜色。
3.字体颜色。主要是和主色调来配合使用。
4.表格滑过的颜色。
5.表格选中的颜色。
6/7.首
原创
2023-05-19 15:19:04
346阅读
一.Vue渐进式 JavaScript 框架二.Vue安装1.安装node.js node.js中文网下载网址http://nodejs.cn/download/ 下载安装后，打开命令行（win+r 输入cmd）输入node -v 查看node的版本号，若显示如图则安装成功。安装完node.js也就有了npm管理器，它是集成在node中的，输入 npm -v 命令，显示npm的版本信息
转载
2024-02-26 11:03:29
149阅读
该一键换肤只是定义好几个颜色，并进行简单的切换。在src下的assets文件下面定义一个css文件夹，在对应的文件里面定义_handle.scss和_themes.scss文件，如下：image.png2.在_themes.scss文件里面定义好需要用到的几个样式。如下：/**
* _themes.scss
* 当HTML的data-theme为blue时，样式引用blue
* dat
Vite
先让我说几句废话。在写本文时 Vite 没有提供 Vue2 的创建方式。相信有些开发者还没开始学 Vue3，但又想尝尝 Vite。那可以参考本文的进食方式。如果心急的话，“0、简介” 可以跳过。0、简介在写本文时，Vite 默认不提供 Vue2 项目的创建方式。使用 Vite 创建出来的 Vue 项目，暂时都是 Vue3 的。Vite 是构建工具的高阶
vue3出来有一段时间了，可能还有很大一部分小伙伴们对vue3还处于一个朦胧的状态，不知道到底相比vue2，到底有哪些改变。在使用上，又有哪些不同。那么，今天，我们就来说叨说叨，vue3相比vue2，到底做了哪些改变vue3做了哪些改变1、源码vue3源码组织方式，由vue2的flow改成了vue3的typescriptvue3移除了一些不常用的api，如inline-template，filte
Vue动态样式实现方式前言本文主要针对 Vue2.x 来展开vue的动态css样式方法归纳。 如果亲爱的读者们需要，后续会更新Vue3的动态样式方法或者使用TypeScript来实现。CSS动态样式 一般用于设置某个字段根据状态显示不同的样式。 比如 字段A，平时返回0，正常显示字段黑色；返回1时，显示异常，文字颜色为红色Vue动态样式实现方式
:style 动态设置style行内样式，优先级最高
转载
2024-04-01 22:06:32
62阅读
公司最近项目是后台管理系统，由我负责，网上找模板发现还需要改很多地方，而且那些模板也没有写代码的实现思路，对于vue项目经验不足者很难看懂，所以就按照自己的思路从零实现一遍，过程讲解还是比较详细的，若是有不足之处还请指正。整体布局：登录： 菜单：准备工作：1、安装elementuinpm i element-ui -S
import ElementUI from
转载
2024-02-08 15:19:31
101阅读
拟实现整体布局确定一下我们后台框架的整体布局，就来个基础经典的再看下实现之后的效果：接下来一步一步走：1、webstorm新建项目接下来就等系统创建好后直接npm run serve，我们得到了一个默认的vue项目2、在项目中引入Element-UI参考官方说明：我们进行npm安装安装完毕之后，我们在main.js中进行引入：参考官方说明：整体引入：3、利用el-container设置页面布局参考
转载
2024-04-11 11:51:46
188阅读
一、Element Form资料地址：https://element.eleme.cn/#/zh-CN/component/form下面以Form表单为例，介绍Element UI的使用。第1步：使用脚手架创建vue工程；vue create vue-form第2步：添加element插件。vue add element选择按需加载：第3步：在App.js文件中定义Form表单；<templ
转载
2024-04-21 18:04:52
101阅读
一、开始一）安装安装node.js下载网址：https://nodejs.cn/download/node -v #查看node版本
npm -v #查看npm版本，可以成功环境变量配置正确
npm config set registry http://registry.npm.taobao.org #设置npm为淘宝
npm config get regist
转载
2024-07-05 20:51:47
166阅读
项目介绍使用 vue 以及 element-ui 搭建一个 后台管理系统的模板。 纯属练手（写的比较糙 望指点）基本环境搭建 初始化项目使用 vue 以及 element-ui 搭建一个 后台管理系统的模板。 纯属练手（写的比较糙 望指点）1、初始化项目（babel vuex router eslint）vue create sandcms 2、等待 出现以下提示
转载
2024-04-03 13:20:15
76阅读
