以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. CF 305A——Strange Addition——————【暴力加技巧】

    A. Strange Addition time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. JS预编译详解

    我们都知道javascript是解释型语言,执行的特点呢是编译一行,执行一行.按照这个思路有时候我们在运行代码时会有一些令人费解的现象出现.下面我们一起来执行下面三段代码. <script> ...

  3. MySql存储引擎MyISAM和InnoDB的区别

    1.MySQL默认采用的是MyISAM. 2.MyISAM不支持事务,而InnoDB支持.InnoDB的AUTOCOMMIT默认是打开的,即每条SQL语句会默认被封装成一个事务,自动提交,这样会影响速 ...

  4. 10、选择框:ion-select

    !重点 multiple="true" 控制 选择框是 多选还是单选.true为 多选类似 checkbox. /* ---html----*/ <ion-content p ...

  5. vscode插件推荐

    在扩展(Ctrl+Shift+X)中直接搜索这些插件的名字安装即可 1.HTML Snippets 超级使用且初级的H5代码片段以及提示 2.HTML CSS Support 让HTML标签上写cla ...

  6. Format - DateTime

    1. Long Date/Short Date/Long Time/Short Time,可以在系统的“Region and Language”中找到相应设置: 2. ISO Format/Local ...

  7. jar命令使用介绍

    http://docs.oracle.com/javase/7/docs/technotes/tools/solaris/jar.html Skip to Content Oracle Technol ...

  8. Unity Android 真机调试

    官方文档 https://docs.unity3d.com/Manual/AttachingMonoDevelopDebuggerToAnAndroidDevice.html 然而 按照官方文档 很多 ...

  9. pdf2swf 转换时报错。This file is too complex to render- SWF only supports 65536 shapes at once

    在使用swftools转换pdf 到swf的时候报错,有如下说明:if the pdf contains too many images / shapes, pdf2swf will fail wit ...

  10. 启动PyCharm cannot start under Java 1.7 : Java 1.8 or later is required 解决方案

    1.安装jdk8 2.配置环境变量 JAVA_HOME : C:\Program Files (x86)\Java\jre1.8.0_144 java原本的环境变量配置不变,只修改JAVA_HOME