Vant 的使用

一、vant

 

1、使用

npm i vant@latest-v2 -S //在项目中安装vant

2、在项目中引入 vant ui组件库

• 按需引入 1

他的作用就是我们之前的全局引入，=》自动变成手动的按需引入

里面实现的原理：摇树=》就是我们在项目中写的代码，引入的代码，没有使用，在打包的时候，自动删除

main.js代码 //(1)引入需要的组件 import {Button,Rate} from 'vant' import Vue from 'vue' //（2）组件进行注册 Vue.use(Button) Vue.use(Rate)

babel.config.js中进行配置=》插件 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };

按需引入 2

在src下创建一个文件夹，里面创建一个 js 文件 里面引入你需要的组件

//你创建的js文件 import { Button } from "vant"; import 'vant/lib/index.css';  //引入样式 import Vue from "vue"; Vue.use(Button)

// 再将你创建的文件夹引入到 main.js import './vants'

vant 全局引入

mian.js 文件的代码 //全局引入=》所有的vant的ui组件全部引入=》缺点：会造成 项目体积过大，首次项目加载过慢 import Vant from 'vant'; //引入vant import 'vant/lib/index.css'; //样式 Vue.use(Vant); //注册 vant

二、适配移动端

npm i postcss-pxtorem // 下包

// postcss.config.js 自己创建一个这个文件 module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'], }, }, };