vant-ui 按需引入

已于 2022-04-08 09:03:09 修改
阅读量1.3k 收藏
点赞数
分类专栏： 笔记 文章标签： vue
于 2021-06-03 21:56:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/snowflak/article/details/117535630
版权
本文介绍了如何在Vue项目中按需引入Vant UI组件库。首先，通过npm安装vant-ui和babel-plugin-import插件。接着，在.babelrc文件中配置按需引入规则。最后，在新建的js文件中导入Vue和所需Vant组件，使用vue.use()进行全局注册。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.当我们在项目中使用vant的时候，首先安装vant-ui插件分别是：先安装vant-ui，再安装按需引入的插件

安装vant-ui
npm i vant --save
安装按需引入的插件
npm i babel-plugin-import -D

2.在min.js中引入vant

import 'vant/lib/index.css';
// 全局引入按需引入UI库 vant
import '@/plugins/vant'

3.在vant官网中找到按需引入并把它复制到在src目录下配置 .babelrc 文件中

注：可观看vant官网在复制：
https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

{
   
    "plugins":
最低0.47元/天 解锁文章
Vant组件库的使用
2401_83213163的博客
03-20 918
组件库：第三方封装好的很多组件供我们直接调用，整合起来就是一个组件库相比于ELement（适用于PC端），Vant更适用于移动端。
vant-ui按需引入
Wen_Tao98的博客
12-28 293
vant-ui按需引入 1.安装vant-ui插件 # 安装插件 cnpm i babel-plugin-import -D 2.在babel.config.js中添加配置 plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] 3.创建一个plugin文件夹，在plugin中定义一个js文件用来存放代码 4.之后在
Vant-UI 按需引入
weixin_49612239的博客
06-03 259
第1步，下包 // 通过 npm 安装 npm install vant -S // -S: --save-dev 生产环境的依赖 （dependencies） // -D: --dev 开发环境的依赖 （devDependencies） 第2步，下需要的插件 // babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 npm i babel-plugin-import -D 第3步，配置 在src目录下配置 .b
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
前几天做的项目里有用...babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import 插件 npm i babel-plugin-import -D // .babelrc 中配置 //
面试中必须要知道的vant-ui的按需引入
weixin_49920110的博客
06-03 488
vant-ui的按需引入 1）我们需要先下载vant npm i vant -S 2）引入组件 babel-plugin-import是有趣的 babel 插件，它会在编译过程中将写法自动转换为导入引入的方式。 需要我们进行安装插件 npm i babel-plugin-import -D 自己创建个babelrc，并在里面进行配置 // 注意：webpack 1 无需设置 libraryDirectory { "plugins": [ ["import", { "library
vant UI 使用，按需引入
nilmao的博客
03-28 7788
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 } fro..
关于vant--ui按需引入的详解
七的博客
06-03 873
一、安装vant–ui npm install vant --save-dev //安装vant npm install element-ui --save-dev //安装element-ui 二、全局引入 // 在src/main.js进行全局引入 import Vant from 'vant' import 'vant/lib/vant-css/index.css' Vue.use(vant) 三、按需引入 import Button from 'vant/lib/button' import
vantUI按需引入(vue3-vite)
weixin_41824429的博客
05-03 373
npm i vant。
vue项目中vant-ui按需导入
weixin_57983561的博客
06-03 582
前言： 以前我使用ui组件库的时候，总是全局导入，但是到了实际开发中，为了提升性能，都会需要我们使用按需导入。 1、安装 安装vant-ui插件 cnpm install vant-ui --save 通过 npm 安装 npm i vant -S 通过 yarn 安装 yarn add vant -S 2、导入 我们先来说一下以前的导入方式 (全局导入) 这种导入方式直接在 main.js 文件下引入 以下两个文件就可以了 import Vant ...
vant-ui卸载安装使用
最新发布
12-31
成功安装之后，可以在 Vue.js 应用里按需加载所需的组件或样式资源。下面是一个简单的例子展示如何导入 Button 组件及其对应的 CSS 样式表： ```javascript import { createApp } from 'vue'; import App from './...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值