以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. 省市区json数据

    window.LocalList = [ { region:{ name:'北京市', code:'11', state:[ { name:'北京', code:'01', city:[ {name: ...

  2. git本地创建新分支并推送到远程仓库

    1,在当前项目目录,从已有的分支创建新的分支(如从master分支),创建一个dev分支 git checkout -b dev 2,创建完可以查看一下,分支已经切换到dev git branch * ...

  3. PAT 1066 Root of AVL Tree

    #include <cstdio> #include <cstdlib> class Node { public: Node* L; Node* R; int height; ...

  4. javascript实现数据结构:线索二叉树

    遍历二叉树是按一定的规则将树中的结点排列成一个线性序列,即是对非线性结构的线性化操作.如何找到遍历过程中动态得到的每个结点的直接前驱和直接后继(第一个和最后一个除外)?如何保存这些信息? 设一棵二叉树 ...

  5. LDAP入门与OpenLDAP使用配置

    LDAP入门与OpenLDAP使用配置 1.LDAP简介 LDAP(轻量级目录访问协议,Lightweight Directory Access Protocol)是实现提供被称为目录服务的信息服务. ...

  6. 02_SimpleTrigger

    [SimpleTrigger的构造方法] SimpleTrigger(String name,String group); //指定Trigger的所属组 和 名称 SimpleTrigger(Str ...

  7. font not embeded

    转自:http://blog.csdn.net/chenyusiyuan/article/details/4078671,感谢分享! 装了半天adobe acrobat distiller 要泪崩,解 ...

  8. bit_count

    bit_count函数的含义 用来计算二进制数中包含1的个数. select BIT_COUNT(10); 因为10转成二进制是1010,所以该结果就是2. bit_or函数的含义 就是对两个二进制数 ...

  9. Tomcat中部署web应用的三种方式

    Tomcat中部署web应用的三种方式(静态部署)       第一种,针对war或解压后的war,最为常用的是直接操作webapp目录,将完整的war包或者web应用直接放到webapp目录下.使用 ...

  10. Rational ClearCase 系列

    Base + UCM 系列参考:http://blog.csdn.net/hhg208/article/details/5749050