vant官网:https://vant-contrib.gitee.io/vant/#/zh-CN/theme
1. 安装 引入
打包的时候,vant组件不回被打包上去,所以可以一次性导入所有文件
// main.js
//导入并安装vant组件库
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
2.定制样式
步骤一 引入样式源文件
引入 Less 样式文件
// main.js
//导入并安装vant组件库
import Vant from 'vant';
//import 'vant/lib/index.css';
import 'vant/lib/index.less';
Vue.use(Vant);
步骤二 修改样式变量
根据自己的项目 分为 (看官方文档)：
- webpack 配置
- vue-cli 搭建的项目，可以在 vue.config.js 中进行配置。
e.g. vue-cli项目：
1.在根目录下 新建vue.config.js文件
image.png
2.在新建的文件中添加如下的代码
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
lessOptions: {
modifyVars: {
// 直接覆盖变量，下面写入自己要的样式
'text-color': '#111',
'border-color': '#eee',
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
},
};
image.png
方法一、直接覆盖：但是需要每次修改都要重启服务才会生效，所以不太会使用。
3. 写入自己要的样式
image.png
4.修改配置文件 需要重启服务才会生效
image.png
方法二、
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
image.png
