以vant框架为例,vue项目以less作为css处理器:

less/var-reset.less

@import '~vant/lib/index.less';

// Color variables 重写变量值
@blue: #1989fa;
@orange: #000;
@green: #cccccc;

vue入口文件:

import vant from 'vant';
import '../../less/var-reset.less'; // 引入var-reaet.less文件
Vue.use(vant);

vue文件:

Hello admin
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

结果:

aaarticlea/png;base64,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" alt="" />

vue 修改框架less变量的更多相关文章

  1. vue修改框架样式/deep/

    /deep/ 父元素的样式名 /deep/ 要修改的样式名 使用 ... 貌似不行

  2. upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量

    upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量 <Upload ...

  3. 后盾网lavarel视频项目---4、lavarel和vue都是{{}}表示变量,如何解决冲突

    后盾网lavarel视频项目---4.lavarel和vue都是{{}}表示变量,如何解决冲突 一.总结 一句话总结: @{{videos}}:@符号表示lavarel不处理:textarea nam ...

  4. vue 前端框架 目录

    vue 前端框架 目录   vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...

  5. Vue项目框架

    Vue项目框架 基本组件的使用: new Vue({ el, //要绑定的DOM element data, //要绑定的资料 props, //可用来接收父原件资料的属性 template, //要 ...

  6. 使用Vue+JFinal框架搭建前后端分离系统

    前后端分离作为Web开发的一种方式,现在应用越来越广泛.前端一般比较流行Vue.js框架,后端框架比较多,网上有很多Vue+SpringMVC前后端分离的demo,但是Vue+JFinal框架貌似没有 ...

  7. 直播课(1)如何通过数据劫持实现Vue(mvvm)框架

    19.6.28更新: 这篇博客比较完善:将每一部分都分装在单独的js文件中: 剖析Vue原理&实现双向绑定MVVM 半个月前看的直播课,现在才自己敲了一遍,罪过罪过 预览: 思路: 简单实现V ...

  8. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

  9. 怎样修改Windows7环境变量

    在使用电脑的时候要运行某些特定的应用程序时需要修改系统的环境变量,例如安装JAVA时我们就需要配置系统的环境变量.那什么是环境变量呢?环境变量一般是指在操作系统中用来指定操作系统运行环境的一些参数,比 ...

随机推荐

  1. 吴恩达《Machine Learning Yearning》总结(1-10章)

    1.为什么选择机器学习策略 案例:建立猫咪图像识别app 系统的优化可以有很多的方向: (1)获取更多的数据集,即更多的图片: (2)收集更多多样数据,如处于不常见的位置的猫的图,颜色奇异的猫的照片等 ...

  2. Java工程路径及相对路径(转载)

    3. 新建文件,默认位于工程目录new File("xxx.txt").getAbsolutePath();例如输出,D:\workspaces\workspace1\myProj ...

  3. 什么是图像 -- opencv基础

    opencv基础篇--到底什么是图像 什么是图像?英语中有两个单词来形容图像,一个是picture,一个是image.这两者虽然是形容同一个东西,但却又有着区别.picture代表实而有物的真实图像: ...

  4. markdown语法简单总结

    最常用的十个MarkDown语法总结: 标题:只要在这段文字前加 # 号即可 # 一级标题 最大 ## 二级标题 ### 三级标题 无序列表:在文字前加上 - 或 * 有序列表:在文字前加1. 2.  ...

  5. CentOS初使用命令总结

    最近买了一台aliyun(ECS服务器)用来学习使用,初次使用难免要走弯路.遇到一些问题好长时间解决不了,结果经人指点豁然开朗.于是乎,总结了一些新生上路经验. 首先要解决的问题是:通过PuTTY.S ...

  6. 每隔5s执行一次动作

    TimeSpan timespan; //第一次获取系统时间 DateTime d1 = DateTime.Now; while (true) { //第二次获取系统时间 DateTime d2 = ...

  7. sass文件处理

    sass注释方式有两种: 1.标准的css注释/**/: 2.//双斜杠形式的单行注释(不会被转译): 标准的css注释 双斜杆单行注释 sass文件后缀名有两种: 1.后缀名为sass,不适用用大括 ...

  8. css3 转换 过渡 及动画

    转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...

  9. Jmeter(一)http接口添加header和cookie --转载

    Jmeter(一)http接口添加header和cookie   HTTP信息头管理器在Jmeter的使用过程中起着很重要的作用,通常我们在通过Jmeter向服务器发送http请求(get或者post ...

  10. 【转】QT创建子对话框的方法

    原文地址:http://blog.csdn.net/baidu_18991997/article/details/42713159 代码实现功能:单击某个按钮后,弹出对话框,对话框中的内容可自行设计. ...