vue sass主体色

2024-11-05

vue 中使用sass实现主体换肤

有如下代码要实现换肤功能 <template> <div class="app-root" :class="themeClass"> <div class="app-container"> <p>{{ msg }}</p> <select v-model="theme"> <option value="red">Red<

好久没写博文了,今天抽空写一写,最近在用vue.js build 项目,今早想使用sass来编译css,可是安装好依赖包之后仍然显示一下错误: ERROR in ENOENT: no such file or directory, scandir '/Users/baidu/Documents/mydata/hfutoj/node_modules/.npminstall/node-sass/3.8.0/node-sass/vendor' @ ./~/vue-style-loader!./~/cs

vue+sass实现切换字体大小

接到领导指示,用户嫌我做的页面字体太小,15px的字体叫小?领导说用户多是上了年纪的人.没办法,改吧,谁让咱是个搬砖的呢..咳咳我寻思着这次改大了,下次用户嫌大再让改小呢?干脆给他做个选择字号的功能,让他自己选.我真是个机智的人啊,哈哈哈! 可是,问题来了,怎么才能动态改变页面字体大小呢?我陷入了沉(搜)思(索). 首先,建两个sass文件.如图: variable.scss文件代码如下: // 存放变量$font_size_14:14px; $font_size_15:15px; $font

用css制作圆环图表 (vue,sass)

效果图: 思路 :在一个容器里再放两个矩形,每个矩形都占一半,给这两个矩形都设置溢出隐藏,当去旋转矩形里面的圆形的时候,溢出部分就被隐藏掉了,这样就可以达到想要的效果. 代码-html: <div class="income-divided-box"> <div class="income-divided-box-title">物业分成:{{Number(income.propertyelectronics)+Number(income.pr

【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

前言从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一遍. vue上手相对react来说是比较简单的,对于vue的基本指令以及语法,应该没有什么能比官网更详细,更生动的了.仔细想来,vue值得一说的,在项目中会让新手感到困惑的,是vue的组件,今天就最近工作中用到的一个pdf查看组件,和大家聊聊vue的组件.最后会讲如何将自己的代码封装成一个npm包,

vue新手入门指导，一篇让你学会vue技术栈，本人初学时候的文档

今天整理文档突然发现了一份md文档,打开一看瞬间想起当年学习vue的艰难路,没人指导全靠自己蒙,下面就是md文档内容,需要的小伙伴可以打开个在线的md编译器看一看,我相信不管是新人还是老人入门总是可以的(这只是初学时候做的笔记,如果有哪里写错了还望联系我修改,免得误导其他新人,本人qq:421217189) # vuex ##### 五大模块: ## state 数据 ``` 在vuex中调用:state.xxx; 组件内使用:this.$store.state.xxxx mapstate

vue开发小程序简介

开发环境搭建 nodejs 安装最新版的nodejs,同时安装cnpm包管理器 jdk1.8 apache-maven3.3.9 Intellij Idea2018 [后端开发工具] vscode[前端开发工具] vscode插件 HTML CSS Support Vetur Vue2 Snippets idea 插件: lombok plugins svn [代码管理工具] 项目启动 kt-equipment-front 使用vscode打开项目文件夹,在下方终端中执行如下命令, cnpm i

vue04 组件化开发 Vue自动化工具

5. 组件化开发 5.1 组件[component] 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js来定义功能的特效,因此就产生了把一个功能相关的[HTML.css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”. 所以,组件就是一个html网页中的功能,一般就是一

Vue系列-03-vue-cli自动化工具

使用Vue-CLI创建项目安装vue-cli脚手架 Mac安装vue-cli脚手架 lichengguo@lichengguodeMacBook-Pro ~ % sudo npm install -g vue-cli lichengguo@lichengguodeMacBook-Pro ~ % lichengguo@lichengguodeMacBook-Pro ~ % vue -V @vue/cli 4.5.8 生成项目目录使用vue自动化工具可以快速搭建单页应用项目目录该工具为现代化的

R语言：ggplot2精细化绘图——以实用商业化图表绘图为例

本文版权归http://www.cnblogs.com/weibaar 本文旨在介绍R语言中ggplot2包的一些精细化操作,主要适用于对R画图有一定了解,需要更精细化作图的人,尤其是那些刚从excel转ggplot2的各位,有比较频繁的作图需求的人.不讨论那些样式非常酷炫的图表,以实用的商业化图表为主.包括以下结构: 1.画图前的准备:自定义ggplot2格式刷 2.画图前的准备:数据塑形利器dplyr / tidyr介绍 3.常用的商业用图: 1)简单柱形图+文本(单一变量) 2)分面柱形图

WinPhone学习笔记（五）——LongListSelector

LongListSelector也是WinPhone的特色控件之一,最初不了解这个控件叫啥名,知道它会在"人脉"里面出现,在应用程序列表也是这个LongListSelector(如果应用的数量多的话就会出现分组的标头),"音乐"里面的曲目使用了这个控件:其他非系统的应用也有使用这个LongListSelector:酷我音乐.微信.飞信.微博…… 这个列表的快速跳转方式和Android的联系人侧边索引栏作用比较相似,从界面美观程度来说LongListSelector没

webapp开发经验总结

webapp开发的大趋势之下,本人收集整理了一写关于webapp开发的经验,欢迎大家补充指正. 关于link <link rel="apple-touch-startup-image" href="images/start.jpg"/> 表示在点击主屏幕中生成的快捷图标后,网站在加载过程中,显示的图片.这个功能用户体验很好.避免加载时的白屏,减少用户等待网站加载过程的烦闷.缺陷是目前只支持竖屏浏览模式,横屏浏览时不支持. <link rel=&qu

移动端的头部标签和meta

<!DOCTYPE html> <html> <head> <title>xxx</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=d

移动前端工作的那些事---前端制作篇之meta标签篇

移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上代码进行说明: <!DOCTYPE html> <html> <head> <title>xxx</title> <meta http-equiv="Content-ty

前端制作篇之meta标签篇

移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上代码进行说明:<!DOCTYPE html><html><head><title>xxx</title><meta http-equiv="Content-type" co

前端笔记之移动端&响应式（中）视口&百分比布局&弹性盒模型&rem&fillpage

一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕分辨率:指在横纵向上的像素点数,单位是px,1px=1个像素点.一般以纵向像素*横向像素来表示一个手机的分辨率,如1920*1080.(这里的1像素指的是物理设备的1个像素点) 屏幕像素密度:屏幕上每英寸可以显示的像素点的数量,单位是ppi.屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,

JavaScript 数组(Array)方法汇总

数组(Array)常用方法; 数组常用的方法:concat(),every(), filter(), forEach(), indexOf(), join(), lastIndexOf(), map(), pop(), push(), reduce(), reduceRight(), reverse(), shift(), slice(), some(), sort(), splice(), toLocaleString(), toString(), unshift(),其中every()

移动开发常用meta设置

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />  <meta name="apple-mobile-we

ChinaCock界面控件介绍-CCLoadingIndicator

这是一个显示等待状态的控件,当在线程中执行一个稍长时间的任务,需要显示一个等待过程,免得让用户不知app在做什么?避免用户寂寞. 先看看这个控件的属性说明: BackgroundTransparency:指这个控件显示时,背景是否透明,默认False,当设置为False时,等待界面会锁定背后的控件,不允许用户操作.很多时间,我们需要设置他为False,防止app在执行查询时,用户还会有其他的操作. Fill:显示控件的填充颜色 Height:高度 LoadingBitmap:显示的图片,默认情况

手机常用meta标签-有注释

<meta charset="UTF-8">  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <!-- 是否启动webapp功

HTML页面模板代码

作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正 HTML页面模板代码常用的页面模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="