Vue antdv 定制主题配置(高低版本配置问题)

  • main.js 中配置,完整引入

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

// 引入 antdv

import Antd from ‘ant-design-vue’;

// 这里引入的是 css 文件,后面需要自定义主题的话,需要换成 less 文件

import ‘ant-design-vue/dist/antd.css’;

// import ‘ant-design-vue/dist/antd.less’;

Vue.config.productionTip = false

// 注册 antdv

Vue.use(Antd);

new Vue({

router,

store,

render: h => h(App)

}).$mount(‘#app’)

  • 使用按钮,这是默认样式

Primary

image.png

三、自定义主题样式

@primary-color: #1890ff; // 全局主色

@link-color: #1890ff; // 链接色

@success-color: #52c41a; // 成功色

@warning-color: #faad14; // 警告色

@error-color: #f5222d; // 错误色

@font-size-base: 14px; // 主字号

@heading-color: rgba(0, 0, 0, 0.85); // 标题色

@text-color: rgba(0, 0, 0, 0.65); // 主文本色

@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色

@disabled-color: rgba(0, 0, 0, 0.25); // 失效色

@border-radius-base: 4px; // 组件/浮层圆角

@border-color-base: #d9d9d9; // 边框色

@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

  • 创建 vue.config.js,加入下面配置,注意查看一下 package.jsonless-loader 版本,根据版本选择对应的配置:

// less-loader >= 6.0.0 (例如 less-loader@6.0.0)

module.exports = {

css: {

loaderOptions: {

less: {

lessOptions: {

// If you are using less-loader@5 please spread the lessOptions to options directly

modifyVars: {

// 这里就是样式变量的名称以及对应的值,可以按照上面提供的官方文档进行配置

‘primary-color’: ‘#41B883’,

‘link-color’: ‘#41B883’,

‘border-radius-base’: ‘2px’

},

javascriptEnabled: true

}

}

}

}

}

// less-loader < 6.0.0 (例如 less-loader@5.0.0)

module.exports = {

css: {

loaderOptions: {

less: {

// If you are using less-loader@5 please spread the lessOptions to options directly

modifyVars: {

// 这里就是样式变量的名称以及对应的值,可以按照上面提供的官方文档进行配置

‘primary-color’: ‘#41B883’,

‘link-color’: ‘#41B883’,

‘border-radius-base’: ‘2px’

},

javascriptEnabled: true

}

}

}

刷面试题

刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。

  • 前端字节跳动真题解析

  • 【269页】前端大厂面试题宝典

最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值