vant-uI官方文档

1.安装

npm i vite-plugin-style-import@1.4.1 -D          //npm安装
yarn add vite-plugin-style-import@1.4.1 -D       //yarn 安装

2. 配置插件

//在 vite.config.js 文件中配置插件：
import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';export default {plugins: [vue(),styleImport({resolves: [VantResolve()],}),],
};

或

在非 vite 项目中

//babel.config.js 文件中配置如下代码：
{"plugins": [["import",{"libraryName": "vant","libraryDirectory": "es","style": true}]]
}

3.引入

全局引入

main.js:import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(Vant)

按需引入

项目中可能用到多个vant组件，因此单独创建vant.js文件，在src下plugin（文件夹）中创建，代码如下：

import Vue from 'vue'
//可引入多个需要组件，此处只引入Button做例，有多个写在...处
import {Button,...
} from 'vant'export default function vant(){//此处只use Button做例，有多个写在...处Vue.use(Button);...
}

在main.js中，配置如下：

import Vant from '@/common/vant'
Vant()

按需引入还可以（推荐）：

//安装
npm i babel-plugin-import -D(简写)
npm install babel-plugin-import --save-dev(完整写法)

然后，在.babelrc文件中

"plugins": ["transform-vue-jsx", "transform-runtime",<!--这个是添加的-->["import",{"libraryName":"vant","style":true}]]

最后，在main.js中

import {Button} from 'vant'
Vue.use(Button)
// 引入的多的话
import { Button, Row, Col } from 'vant'
Vue.use(Button).use(Row).use(Col)

4.自定义样式类来覆盖默认样式

<template><van-button class="my-button">按钮</van-button>
</template><style>/** 覆盖 Button 最外层元素的样式 */.my-button {width: 200px;}/** 覆盖 Button 内部子元素的样式 */.my-button .van-button__text {color: red;}
</style>

5.使用

请看官方文档

vant UI 使用，按需引入相关推荐

mint ui使用/按需引入
先在main主入口引入: import Mint from 'mint-ui'; Vue.use(Mint); 专门移入css,会自动在node-modules里面去寻找: import " ...
Vue2 - 网易云音乐项目笔记（基于Vant UI组件库）
目录一.项目技术二.准备工作 1.初始化Vue项目 2.配置Vant UI组件库 3.下载并使用vue-router库 4.接口API 5.postcss插件三.分析页面实现功能 1.路由页面准 ...
vue-cli3+ 、vant UI、移动端适配
前言:一直用的vue-cli2,趁着不忙,记录下使用cli3+的点滴. 如果帮助到了你,还请点个赞!!!!! 1.nodejs 具体下载安装不在赘述:详见菜鸟教程--nodeJs安装或者官网:no ...
2022-04-05 学习记录--React-React UI组件库-ant-design（蚂蚁金服）—— 按需引入样式 + 自定义主题
一.流行的开源React UI组件库流行的开源React UI组件库 material-ui(国外) 1.官网:http://www.material-ui.com/#/ 2.github:http ...
Vue UI 组件库（移动端常用 UI 组件库，PC 端常用 UI 组件库，Element UI基本使用，Element UI按需引入）
文章目录 Vue UI 组件库 7.1 移动端常用 UI 组件库 7.2 PC 端常用 UI 组件库 7.3 Element UI基本使用 7.4 Element UI按需引入 Vue UI 组件库 ...
vant按需引入没样式_vue vant-ui样式出不来的问题
第一步:安装vant npm i vant -S // 或 yarn add vant 第二步:配置按需引入 // 在 babel.config.js 中配置 module.exports = {pl ...
vant自动按需引入组件 (推荐)
vant自动按需引入组件 (推荐) 安装 # 通过 npm 安装 npm i vant -S babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法 ...
vant按需引入_VueCli2 配置Vant主题
VueCli2 配置Vant主题官网 VueCli2不支持按需引入,只能全部引入安装依赖 npm install -D less@3 less-loader@5 "vant": ...
element ui需要引入样式吗_彻底学会element-ui按需引入和纯净主题定制
原标题:彻底学会element-ui按需引入和纯净主题定制作者:wuwhs 来源:SegmentFault 思否社区前言手上有些项目用的element-ui,刚好有空琢磨一下怎么减小打包文件大小 ...

vant UI 使用，按需引入

1.安装

2. 配置插件

3.引入

全局引入

按需引入

按需引入还可以（推荐）：

4.自定义样式类来覆盖默认样式

5.使用

vant UI 使用，按需引入相关推荐

最新文章

热门文章