vue3 vant 使用2022-3-15发布

剑无锋*十年磨一剑

于 2022-03-15 09:34:28 发布

阅读量507

点赞数

分类专栏： vue3 vant vite 文章标签： vue.js postcss javascript

本文链接：https://blog.csdn.net/qq_40095911/article/details/123494098

版权

vue3 同时被 3 个专栏收录

8 篇文章 1 订阅

订阅专栏

vite

4 篇文章 0 订阅

订阅专栏

vant

2 篇文章 0 订阅

订阅专栏

# Vue 3 项目，安装最新版 Vant
npm i vant

安装rem适配直接使用px就会转rem

$ npm install postcss postcss-pxtorem --save-dev

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

postcss 简介

// ` px`转换为`rem`
. 转换{
    字体大小： 16像素；//转换为1rem _
}

// `Px`或` PX`被 `postcss - px to rem` 忽略但仍被浏览器接受
. 忽略{
    边框： 1 Px实心；//忽略_
    b阶-宽度：2PX；//忽略_
}

main.ts 按需引入

import {
  Form,
  Field,
  CellGroup,
  Button,
  Tabbar,
  TabbarItem,
  Swipe,
  SwipeItem,
  NoticeBar,
  Image as VanImage,
  Cell,
  Icon,
  Popup,
  Picker,
  PasswordInput,
  Search,
  PullRefresh,
  List,
  RadioGroup,
  Radio,
} from 'vant'
import 'vant/lib/index.css'

按需引用才是王道