【vant组件安装】按需引入 && 完整引入 && 定制主题

• vant官网：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
• 定制主题: https://vant-contrib.gitee.io/vant/v2/#/zh-CN/theme

1. vant组件安装—按需引入

• 1.安装vant组件库- npm i vant@latest-v2
• 2.安装按需引入组件- npm i babel-plugin-import-D
• 3.在babel.config.js中配置

module.exports ={presets:['@vue/cli-plugin-babel/preset'],plugins:[['import',{libraryName:'vant',libraryDirectory:'es',style:true},'vant']]}

• 4.导入你需要使用的组件(新建一个 utils/vant.js文件 )

// 导入vueimport Vue from'vue'// 引入组件import{ Button, Icon }from'vant'// 使用组件
Vue.use(Button)
Vue.use(Icon)

• 5.在main.js中导入你封装的vant.js- import Vue from'vue'import App from'./App.vue'import router from'./router'// 导入vant组件import'@/utils/vant.js'// 导入amfe-flexibleimport'amfe-flexible'Vue.config.productionTip =falsenewVue({ router,render:h=>h(App)}).$mount('#app')
• 6.重新运行项目（配置文件发生变化之后需要重新运行项目才会生效）- npm run serve- 把vant里面的按钮组件CV到你的App.vue观察是否配置成功

<template><div><h1>我是根组件</h1><van-buttontype="primary">主要按钮</van-button><van-buttontype="info">信息按钮</van-button><van-buttontype="default">默认按钮</van-button><van-buttontype="warning">警告按钮</van-button><van-buttontype="danger">危险按钮</van-button></div></template>

按需引入时需要定制主题的使用方法:

• 1. 在babel.config.js文件中配置

module.exports ={plugins:[['import',{libraryName:'vant',libraryDirectory:'es',// 指定样式路径style:(name)=>`${name}/style/less`,},'vant',],],};

• 2. 在vue.config.js中配置

// vue.config.js
module.exports ={css:{loaderOptions:{less:{// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。lessOptions:{modifyVars:{// 直接覆盖变量,定制主题'text-color':'#111','border-color':'#eee',},},},},},};

2. vant组件安装—完整引入

在开发项目时直接使用完整引入方式，在项目打包时再去做调整。

1. 安装vant组件库

npm i vant@latest-v2

1. 引入

在src/main.js 中，以vue插件的方式完整引入vant组件

import Vue from'vue'import Vant from'vant'// 组件库import'vant/lib/index.css'// 样式

Vue.use(Vant)// 引入

1. 使用

在app.vue中(其他任意组件也行)， 测试使用。

<van-buttontype="default">默认按钮</van-button><van-buttontype="primary">主要按钮</van-button><van-buttontype="info">信息按钮</van-button><van-buttontype="warning">警告按钮</van-button><van-buttontype="danger">危险按钮</van-button>

van-button就是vant组件库中提供的按钮组件。

效果如下

完整引入组件时需要定制主题的使用方法:

• 1. main.js引入样式(二选一)

// 引入全部样式import'vant/lib/index.less';// 引入单个组件样式import'vant/lib/button/style/less';

• 2. 在vue.config.js中配置

module.exports ={css:{loaderOptions:{less:{// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。lessOptions:{modifyVars:{// 直接覆盖变量,定制主题'text-color':'#111','border-color':'#eee',},},},},},};

• 遇到报错【Can’t resolve ‘less-loader’】需要下载less less-loader

npm i less less-loader

自定义主题其实指的是每个组件都可以自定义样式,找到最底下的样式变量
名称就是你要修改的属性名 你要改成什么就可以给它属性值
例如: ‘cell-line-height’ : 50px 你就把cell组件的行高自定义为50px了