Vue 2.5.2引入Vant 2.5.9定制主题

news/2024/7/10 1:57:28 标签: vue

1.在vue中的main.js中引入vant,当然要先安装Vant,注意引入的是index.less,不是index.css,这个位置很多人忽略。

import 'vant/lib/index.less'
import Vant from 'vant'
Vue.use(Vant)

在这里插入图片描述2.修改 .babelrc 文件,增加

"plugins": ["transform-vue-jsx", "transform-runtime"]

在这里插入图片描述
3.參照Vant的定制主题,复制里面的theme.less文件到Vue项目的本地
在这里插入图片描述4.修改utils.js 文件,替换less,主要是对应theme.less主题文件

 less: generateLoaders('less',{
      modifyVars: {
        'hack': `true; @import "${path.join(__dirname,'../src/style/theme.less')}";`
    }}),

在这里插入图片描述
5.然后修改主题文件里的样式,就能统一修改组件的样式了。


http://www.niftyadmin.cn/n/614642.html

相关文章

Vue使用VueI18n国际化

1.安装VueI18n npm install vue-i18n --save-dev2.定义好国际化文件 index.js import hk from ./zh-HK import cn from ./zh-CN const messages {hk: {message: hk},cn: {message: cn} } export default messageszh-CN.js const message {connected: 已连接 } export defa…

Spring Boot / Spirng Cloud 集成Rabbit MQ

注意&#xff1a; spring cloud版本&#xff1a;Greenwich.RELEASE spring boot 版本&#xff1a; 2.1.5.RELEASE 1.导包&#xff0c;在pom.xml中导入 <dependency><groupId>org.springframework.amqp</groupId><artifactId>spring-rabbit</artifac…

spring cloud集成swagger2

1.项目引入依赖 <!-- swagger --><dependency><groupId>com.spring4all</groupId><artifactId>swagger-spring-boot-starter</artifactId></dependency>2.bootstrap.yml 或application.yml中增加配置 swagger:enabled: true # 是…

java / spring boot /spring cloud /前后端分离/vue 跨域处理

前后端分离避免不了跨域&#xff0c;在java流行的spring 框架下处理跨域&#xff0c;比较简单的是直接修改java的配置&#xff0c;使我们的应用支持跨域。 方法1&#xff1a;在controller类上添加注解CrossOrigin 即可&#xff0c;这个注解其实是CORS的实现。 方法2&#xff1a…

idea 设置maven 以及 maven配置文件配置阿里/公共中央仓

maven配置阿里中央仓 1.主要修改maven的settings.xml文件&#xff0c;在maven的config目录下 2.查找mirrors标签&#xff0c;在标签里增加如下配置 <mirror><id>aliyun</id><mirrorOf>*</mirrorOf><name>aliyun Maven</name><ur…

Vue的全局组件/加载/Loading/请求转圈圈组件

Vue每次请求都要出现加载图案&#xff0c;这样的需求需要设置一个全局的组件&#xff0c;然后每次请求和请求结束都要调用这个组件的开关。这样就可以实现展示给用户看系统在请求后台的需求。 首先&#xff1a; 1.制作一个全局的加载组件&#xff0c;Loading.vue 摆放的路径请随…

Vue /javascript /JS日期时间转换工具

字符串转换成日期&#xff0c;日期转换成字符中&#xff0c;废话不说&#xff0c;上代码&#xff01; //日/月/年 export function stringToDate (dateStr,separator) {if(!separator){separator"/";}var dateArr dateStr.split(separator);var day parseInt(date…

spring boot中多线程并发及利用CountDownLatch并发执行多线程

1.配置线程类 import org.springframework.aop.interceptor.AsyncUncaughtExceptionHandler; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configura…