Vuetify 是 Vue 的语义化组件框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。Vuetify 核心是为了提供各种可重复使用的，即插即用并且适合各种项目规格的组件。Vue 的语义成分。利用 Vue 的功能组件，所有基于标记的用于援助主部件的类，比如一个 card 题目，可以使用 v-card-title 来处理成型容易。Vuetify 被设想为从底层创建。每一个组件，指令
1. vue 生命周期函数 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会 生命周期图示 <!DOC
文章目录前期准备切换的主题涉及到两种模式： 1、默认主题 2、黑夜主题一、切换主题需求分析二、代码详解1.目录介绍2.切换主题方法代码3.主题的使用4.原项目中的更改1.全局色值都改为变量形式( js的色值从store中取)2.设置scss的16进制变量（踩坑）1.方式1`（错误）`2.方式23.增加配置文件(粗略浏览即可)4.element ui配置文件放在public静态文件中5.chr
转载
2024-09-14 09:37:27
322阅读
介绍本文适合黑白切换或者主题样式偏少的（建议：2-10种）；主题越多，样式会越多。理论上无限套。本文适合已经写好了一套主题，然后需求增加第二套或者多套主题（最好小于10套，当然也可以更多，但是样式也会更多）本文以 vue + vue-cli2.x + element-ui +vuex举例经过项目实战后建议直接使用css变量系列~请看我最后一点：实现您需要实现全局样式文件 1）在/src/main.
转载
2024-04-22 12:46:11
1003阅读
前言说起换肤功能，前端应该是非常熟悉了?一般来说换肤的需求分为几种：1. 纯前端，直接在页面前端通过点击自由切换限定的几种主题色，切换之后主题色变量存到本地浏览器2. 在后台配置好色值，传到前端，前端从接口获取主题色在初始化的时候显示对应的主题色3. 前面两者的结合，初始化的颜色设置，但也可通过前端的切换来更改主题色 拿到换肤需求后，就在思考该如何实现呢?先搜一下，看下有哪些方法Ant
前一段时间完成了一个项目，该项目要求黑夜和白天两种主题色，可以动态的切换。经过多方的查找研究，终于完成。谨以此文在此记录一下。此方案涉及Sass的map遍历、函数定义、map存取、混合器等相关知识，具体API详参官网https://www.sass.hk/docs/。大概的思路就是给html根标签设置一个data-theme属性，通过js切换data-theme的属性值，sass根据此属性来判断使
转载
2024-10-10 09:08:06
205阅读
1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
github上的tags地址：Release v3.0.0 One Piece · vuejs/vue-next · GitHub
2.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%
本人系前端小白，如有不对的地方轻喷，只是写自己总结下来的一些简单应用。路由跳转的两种基本方式动态修改class名路由跳转的两种基本方式第一种：页面级跳转首先，页面跳转需要两个组件，例如首页为login.vue，需要跳转的页面为message.vue在router文件夹下的main.js注册组件。import Vue from 'vue'
import Router from 'vue-router
前言业务要求要做一个主题色切换，类似于暗黑模式，以前没有做过于是在网络上搜罗现成的解决方案，由于是vue2的项目，找了很久都没有找到一个好的方便的解决方案，最后在github找到一个使用css3的解决方案，觉得十分不错，也很简单明了，于是就拿来直接用了，参考的github项目地址：https://github.com/LiuyangAce/theme-switch/tree/master，可以参考
转载
2024-09-01 23:10:14
145阅读
[PConline 应用]几天前，Windows 10 Dev亮相（Build 20161），最大一个看点就是颜值更高的开始菜单。尽管还处于早期预览状态，但新菜单无论从颜值还是兼容性方面，都已经相当出色。那么继新版开始菜单“实锤”之后，还有什么小软件可以让你的Win10更酷呢？今天我们就来介绍几个。 新版开始菜单来了！
1. 自动昼夜壁纸苹果系统有一项很有趣的特性，可以让壁纸
一、Vue的动态引入组件； 有的时候不知道引入什么组件，要根据数据的类型来引入不同的组件，这个时候就需要动态组件 动态组件 1、用法 :is = 'component-name' 2、用途父组件<component :is="nextTiceName" />":is 后边是组件名，是一个变量，本例子中变量为 nextTiceName，然后 nextTiceNam
LESS是什么？ less是一门CSS预处理语言。由于CSS本身并不是程序式语言，不方便维护和扩展，没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上，引入了变量、Mixin混入、运算以及函数等功能，大大简化了CSS的编写，降低了CSS的维护成本。 本质上，LESS包含一套自定义的语法及一个解析器，写好的LESS文件会通过解析器编译生成CSS文件。LESS并没有建材CSS原有的特性，更
转载
2024-08-17 23:23:02
86阅读
目录一、less简介二、安装插件三、编写less四、less语法less注释父子关系嵌套变量其他五、混合函数六、补充一、less简介less是一门css的预处理语言less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性：像对变量的支持、对mixin的支持…less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法
vue+scss切换主题色1.创建global.scss样式文件，在app.vue 引入@import '@/assets/style/global.scss';
2.dark.scss和light.scss为两个主题色样式配置变量文件，在global.scss中引入。两个文件定义样式变量，分别引用theme.scss,用于定义类名使用样式//globals.scss
@import "./the
原创
2023-10-16 14:47:24
307阅读
目录一、背景二、实现思路 方法1：定义全局的CSS变量 方法2：切换已定义好的css文件 方法3：切换顶级CSS类名 (需使用css处理器,如sass、less等)一、背景在我们开发中我们会遇到像是需要切换程序风格、主题切换啦这种应用场景。二、实现思路 方法1：定义全局的CSS变量App.vue：<style>
/* 定义全局的css变量 */
转载
2024-04-15 12:52:08
1651阅读
文章目录1. 背景2. 设计思路2.1 定义主题配置2.2 保存当前主题设置2.2.1 Vuex 部分示例代码2.3 读取当前主题设置2.4 编写主题 mixins 文件2.5 在样式入口文件引入主题 mixins 文件2.6 编写主题文件2.7 在样式入口文件引入主题文件2.8 编写切换主题的业务组件2.9 将当前皮肤的值，置于 DOM 中3. 新增皮肤主题3.1 编写主题文件3.2 注册主题
转载
2024-03-23 15:38:13
269阅读
CSS 预编译语言 变量全局引用方式 vue-cli@3.0 stylus/sass/less 使用方法引言stylus篇stylus文件与vue组件样式代码stylus 全局变量引入方法一stylus 全局变量引入方法二stylus 全局变量引入方法三sass/scss篇sass/scss文件与vue组件样式代码sass 全局变量引入方法一sass 全局变量引入方法二sass 全局变量引入方法
在vue中引入并使用less时遇到的一些错误及解决方案：1、错误一：错误如下图所示： 因为当前项目版本2.9.6 已经在build/utils里配置了less的处理，所以和之前在build/webpack.base.conf.js中配置的less-loader冲突解决方法： 将冲突的less-loader去掉即可，如下图：2、错误一：错误如下图所示： 此类为题表示缺少相关依赖，根据关键词vue-s
转载
2024-05-03 12:38:07
535阅读
前言 上次写的换肤方案是比较适合于自己系统给定几套固定样式用于让用户切换。但是如果有需要让用户自定义颜色和图片的话，这套换肤方案会比较适合你。该文参考了该篇文章，并对其做了一些改进。做了持久化以及图片的切换。 应对需求默认有几套主题色供用户选择用户也可以自定义主题色用户选定主题后需立即生效，无需重启项目或重新打包项目
转载
2024-07-20 17:48:19
630阅读
