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

最新推荐文章于 2024-05-10 16:32:40 发布

小张快跑。

最新推荐文章于 2024-05-10 16:32:40 发布

阅读量2.2k

点赞数 1

分类专栏：前端框架——Vue 文章标签： vue.js ui html

本文链接：https://blog.csdn.net/io_123io_123/article/details/122902958

版权

前端框架——Vue 专栏收录该内容

12 篇文章 13 订阅

订阅专栏

一、什么是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>