下载按需引入插件(推荐)

babel-plugin-import 是一款 babel 插件,
它会在编译过程中将 import 的写法自动转换为按需引入的方式
# 安装插件
npm i babel-plugin-import -D

配置按需引入 babel.config.js项目根目录

module.exports = {
presets: ["@vue/cli-plugin-babel/preset"], //配置开始
plugins: [
[
"import",
{
libraryName: "vant",
libraryDirectory: "es",
style: true,
},
"vant",
],
],
//结束
};

main.js使用按需引用

// 按需加载 只用按钮
import { Button } from "vant";
Vue.use(Button);

页面使用

<template>
<div class="home">
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</template> <script>
export default {
name: "Home",
};
</script>

h5按需引入Vant的更多相关文章

  1. vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem

    偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...

  2. 自动按需引入组件用不了(Vant)

    按照官网的自动按需引入之后,这样写是报错的,直接在vue页面中这样引用也是报错的. 正确的使用方法是这样的

  3. UI组件--element-ui--全部引入和按需引入

    主要就是一句话, 如果用到的组件少, 要按需引入, 如果用到的组件很多,就全部引入, 因为按需引入全部的, 和全部引入效果一样(我这是废话, 大家都知道...) 完整引入 在 main.js 中写入以 ...

  4. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...

  5. vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined

    vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined 借鉴了该大神的文 ...

  6. vue按需引入element或mint

    vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component

  7. create-react-app:reject和不reject(使用react-app-rewired)这2种情况下的antd组件按需引入配置

    create-react-app:eject和不eject(使用react-app-rewired)这2种情况下的antd组件按需引入配置: 不eject(使用react-app-rewired)配置 ...

  8. 【eclipse jar包】在编写java代码时,为方便编程,常常会引用别人已经实现的方法,通常会封装成jar包,我们在编写时,只需引入到Eclipse中即可。

    Eclipse中导入外部jar包 在编写java代码时,为方便编程,常常会引用别人已经实现的方法,通常会封装成jar包,我们在编写时,只需引入到Eclipse中即可. 工具/原料 Eclipse 需要 ...

  9. jstl-日期格式化-jsp页面需引入fmt标签

    jsp页面需引入fmt标签: <taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"> ...

  10. vue按需引入echarts

    下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...

随机推荐

  1. VScode 扩展推荐和配置

    VScode 扩展推荐和配置 VSCode Extensions 推荐 Themes Dracula Official 拥有明亮的颜色和舒适的对比度,非常适合长时间编程. Nord 基于北极地区自然色 ...

  2. PHP扩展之Yaconf

    这个是继鸟哥出品的yaf,yar 之后的又一个好用的工具.  Yaconf配置管理工具 具体可以看鸟哥的文档: https://www.laruence.com/2015/06/12/3051.htm ...

  3. Redis集群搭建-Docker

    使用docker搭建本地集群Redis服务(参考:https://www.cnblogs.com/slowbirdoflsh/p/11633113.html) 环境配置 # 拉取redis镜像 doc ...

  4. php-fpm相关操作

    php-fpm常用操作 一. php5.3.3之后使用新号方式控制php-fpm进程 INT, TERM 立即终止 QUIT 平滑终止 USR1 重新打开日志文件 USR2 平滑重启所有worker进 ...

  5. PythonDay8Advance

    PythonDay8Advance 正则表达式 本身也是一个字符串,其中的字符具有特殊含义,将来我们可以根据这个字符串[正则表达式]去处理其他的字符串,比如可以对其他字符串进行匹配,切分,查找,替换等 ...

  6. spring 使用 事件机制

    概述 在编写代码的时候,比如我删除一篇文章,这个时候,如果我想做些额外的逻辑,这是就需要修改删除部分的代码.spring 提供了事件机制更优雅的实现这个,用户只需要实现事件监听即可. 代码实现 注入发 ...

  7. 如何使用blender生成城市群

    在我们做数字孪生相关的项目的时候,会需要生成一些城市的模型,这时候我们可以使用 blender 来生成一些城市的模型. 我们,先来看一下效果. 安装 blender blender 是一个开源的 3D ...

  8. Flutter之GetX之路由管理

    GetX之路由管理 GetX有一套完整的路由管理,并且不需要context上下文,API非常简洁 直接导航 导航到新的页面 Get.to(NextScreen()); 返回,此方法可以用于关闭Snac ...

  9. CW信号的正交解调

    1.CW信号   CW可以叫做等幅电报,它通过电键控制发信机产生短信号"."(点)和长信号"--"(划),并利用其不同组合表示不同的字符,从而组成单词和句子. ...

  10. C#字符串拼接的几种方式及其性能分析对比

    前言 在C#编程中字符串拼接是一种常见且基础的操作,广泛应用于各种场景,如动态生成SQL查询.构建日志信息.格式化用户显示内容等.然而,不同的字符串拼接方式在性能和内存使用上可能存在显著差异.今天咱们 ...