Vue如何使用Vant ui进行快速开发

一、什么是Vant ui

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源。是一款轻量、可靠的组件库。

能够大大提高我们的开发速度。

Vant 2 - Mobile UI Components built on VueMobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/v2/#/zh-CN/

二、Vant中的rem布局适配

Vant 默认使用 px 作为样式单位，如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
lib-flexible 用于设置 rem 基准值

这里我们选择第一种：postcss-pxtorem进行使用

2.1安装postcss-pxtorem插件

安装命令：npm install postcss postcss-pxtorem --save-dev（安装为开发时依赖）

2.2配置Postcss

（1）在项目中文件目录下，新建“postcss.config.js”，添加以下配置

// postcss.config.js
module.exports = {plugins: {'postcss-pxtorem': {// 设置根元素字体大小 （如果设计图是 750  则设置为75，值为移动端页面宽度的1/10）rootValue: 37.5,//可以从px更改到rem的属性propList: ['*'],//排除node_models目录下的所有文件exclude:/node_modules/i,  //（因为我们在开发中，是不会改变Vant组件库下的px值，只需要改变我们自己css文件下的css文件中的像素值）selectorBlackList:['vant-','.my-']// 过滤掉vant- 开头的元素选择器和.my-开头的类选择器},},
};

（2）使用lib-flexible设置rem基准值

1）安装依赖：npm i -s amfe-flexible

2）把下面代码写进public文件下的“index.html”文件的头文件中，替换掉原来的“移动端适配方案”

替换为下面的代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

3）在main.js中导入这个插件的index.js文件

// h5rem适配
import 'amfe-flexible/index.js'

注意：当执行到这一步时，可能会出以下报错，如果没有报错，继续下面的步骤即可，如果报错，下面有解决方案

报错：

ERROR：Loading PostCSS Plugin failed: Cannot find module 'postcss-pxtorem'报错
错误：加载PossCSS插件失败：无法找到模块“postcss-pxtorem”

解决方案：

运行命令：npm i postcss-pxtorem@5.1.1 安装完成后，即可解决上述报错

到此为止，我们的移动端rem适配就完成了，就可以开启我们的项目了。

！！！但是，要注意的是：我们通过这种方式设置了rem的适配方案之后，我们写行内样式使用px时，是不会被转换为rem的。

三、vant框架的安装、引入（vue2项目）

（1）通过npm安装

（vant有vant2和vant3两个版本，这里我们介绍vant2）

安装：npm i vant@latest-v2

（2）引入组件1：导入所有组件

Vant 支持一次性导入所有组件，在我们的所有页面和组件中都能使用Vant的组件

在main.js中引入所有Vant
import Vant from 'vant';
import 'vant/lib/index.css';Vue.use(Vant);
引入后即可使用所有Vant组件，我们这边测试一下：

导入所有组件后，我们在使用Vant组件时就不用在自己引入模块了。

（3）引入组件2：手动按需导入组件

在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。

（1）我们需要使用哪个组件，在main.js中手动引入即可（全局引入）
// 引入组件脚本
import Button from 'vant/es/button/index';
// 引入组件样式
// 若组件没有样式文件，则无须引入
import 'vant/es/button/style/index';
//注册
Vue.use(Button)
（2）我们也可以在我们每个组件中的<script></script>中局部引入，只需要将我们所使用的配置文件、组件样式引入即可。（一般不用）

注册时，在components中用下面的方式引入

（但是这中引入方式，只能在组件内部自己使用，不能跨组件，就显得很麻烦了）
 components: {[Button.name]: Button,[Form.name]:Form,[Field.name]:Field},

（4）引入组件3：按需引入

自动按需引入组件——修改babel.config.js配置文件

（他会根据你项目中所用到的组件，来自动帮你引入所需要的组件）

1）、安装插件

npm i babel-plugin-import -D

2）、配置插件

在.babelrc 或 babel.config.js 中添加配置：
{"plugins": [[//在编译过程中，将"import"这种引入方式，变成"vant""import",{"libraryName": "vant","libraryDirectory": "es","style": true}]]
}
3）、全局引入需要的组件

找到你想使用的组件，找到”引入“，将每个组件的代码写到main.js中，即可在项目中所有地方使用Vant

四、定制主题

Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照官方文档进行主题定制。

4.1样式变量

Vant 使用了 Less对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。

由于Vant在项目中使用的是Less，所以我们需要手动安装。

安装Less：npm i --save-dev less less-loader

4.2定制方法

步骤一：引入样式文件

手动引入样式：在main.js中引入
// 引入全部样式（Vant组件中所有使用相关属性的都会发生变化）
import 'vant/lib/index.less';// 引入单个组件样式
import 'vant/lib/button/style/less'
步骤二：修改样式变量

这里我们的脚手架是4版本，所以我们在vue.config.js文件中进行配置。如果没有这个文件，创建一个即可，但是配置好之后，必须重启我们的项目。

（如果脚手架是2版本，可以参考官方文档，在webpack.config.js文件中进行配置。）
// 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";`,},},},},},
};
（1）直接覆盖原来的样式

直接在vue.config.js文件中，进行覆盖即可

步骤三：测试反馈组件，使用利用事件触发Vant中的方法

在Vant中有封装好的“反馈组件”，这些组件在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

组件调用

通过组件调用 Notify 时，可以通过下面的方式进行注册（从 2.8.5 版本开始支持）：

在main.js文件中引入
import { Notify } from 'vant';// 全局注册
Vue.use(Notify);
全局方法

引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 $notify 方法，便于在组件内调用。
export default {mounted() {this.$notify('提示文案');},
};
案例：Vue中调用Vant的反馈组件
<template><div><van-button type="warning" @click="waring">警告按钮</van-button><van-button type="danger" @click="danger">危险按钮</van-button></div>
</template>
<script>
export default {methods: {waring() {// 警告通知this.$notify({ type: "warning", message: "通知内容" });},danger() {// 危险通知this.$notify({ type: "danger", message: "通知内容" });},},
};
</script>