Vue-Cli4×如何引入vantUi

wocwin

已于 2023-04-04 10:35:33 修改

阅读量555

点赞数

分类专栏： Vue H5移动端项目文章标签： vue移动端 vantUi vue-cli4

于 2021-11-23 16:26:10 首次发布

本文链接：https://blog.csdn.net/cwin8951/article/details/121495548

版权

Vue H5移动端项目专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、全局引入,先安装，在main.js里进行全局引入就可以了

// Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

main.js

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

二、按需引入

1、先安装babel插件

npm i babel-plugin-import -D

2、在 babel.config.js 中配置

plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

3、使用

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

<script>
import { Button } from 'vant'
export default {
  name: 'Home',
  components: {
    'van-button': Button
  }
}
</script>

页面如图
在这里插入图片描述

三、上图显示vantUI button组件很小（是因为vw适配造成的）

注意:vant 设计的宽度为375 ，若设计稿的宽度为750，这样用的话，会导致vant 的所有尺寸都会变小一倍

需要在postcss.config.js文件这样操作

const path = require('path')
module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750
  const designHeight = file.dirname.includes(path.join('node_modules', 'vant')) ? 667 : 1334
  return {
    plugins: {
      autoprefixer: {},
      // vw/vh配置
      'postcss-px-to-viewport': {
        viewportWidth: designWidth, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
        viewportHeight: designHeight, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
        unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
        selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
        mediaQuery: false // 允许在媒体查询中转换`px`
      }
    }
  }
}