目录
1. 下载安装
2. 全局引入:在main.js文件内引入
3. 按需引入:在main.js文件内引入 ( 推荐 )
4. 手动按需引入组件:在使用组件的页面内引入
5. 引入其他内容:(依据项目需求进行配置)
6. 修改组件原来样式:
1.1 安装Vant:
Vue 3 项目,安装最新版 Vant: npm i vant -S
Vue 2 项目,安装 Vant 2: npm i vant@latest-v2 -S
1.2 安装插件:yarn add babel-plugin-import -D (babel.config.js配置文件)
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
1.3 postcss.config.js配置文件进行适配:
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue({ file }) {
return file.indexOf("vant") !== -1 ? 37.5 : 75;
},
propList: ["*"],
},
},
};
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
import Vue from "vue";
import App from "./App.vue";
import "vant/lib/index.css";
import { Form, Field, Button, List, Icon, Toast } from "vant"; // 按需引入,优化加载速度
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(List);
Vue.use(Icon);
Vue.use(Toast);
手动按需引入
1. 引入:
import Button from 'vant/lib/button'; // button组件
import 'vant/lib/button/style'; // button样式
2. 注册:
export default {
components: { // 手动注册组件名
VanButton: Button //注册大驼峰,使用写短横线
=== //[Button.name]: Button
}}
3. 使用:
主要按钮
自动按需引入:
1. 安装插件:yarn add babel-plugin-import -D
2. 在babel配置文件里 (babel.config.js):
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']]}
3. 全局注册 - 会自动按需引入
import { Button } from 'vant';
Vue.use(Button)
import router from "./router"; // 路由对象
import "@/mobile/flexible"; // 适配,当网页宽度改变, 会修改html的font-size
import "vant/lib/index.css"; // vant组件样式
import "./assets/common.less"; // 引入公共样式
import "amfe-flexible"; // 页面适配,动态设置 REM 基准值
import "@vant/touch-emulator"; // 桌面端将mouse事件转换成touch事件
... ... (导入的vant组件)
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
方法一:通过谷歌调试工具找到当前类名,::v-deep样式穿透进行修改(没有下载less的话不能进行样式嵌套)
::v-deep {
.van-field__label {
display: flex;
justify-content: end;
align-items: center;
}
.van-nav-bar {
background-color: #1989fa;
}
.van-nav-bar__title {
color: #fff;
}
}
方法二:给标签手动添加 class 类名进行修改,class = 'tab'
.tab {
display: flex;
justify-content: end;
align-items: center;
}