自学内容网 自学内容网

Vant组件库的按需导入和导出

vant组件库及Vue周边的其他组件库

  • 组件库并不是唯一的,常用的组件库还有以下几种:
    • pc: element-ui(支持v2) element-plus(支持v3) iview(v2,v3均支持) ant-design(v2,v3均支持)
    • 移动:vant-ui Mint UI (饿了么) Cube UI (滴滴)

全部导入和按需导入以及两者区别

区别:
1.全部导入会引起项目打包后的体积变大,进而影响用户访问网站的性能
2.按需导入只会导入你使用的组件,进而节约了资源

全部导入

  • 安装vant-ui
yarn add vant@latest-v2
  • main.js中导入
import Vant from 'vant';
import 'vant/lib/index.css';
// 把vant中所有的组件都导入了
Vue.use(Vant)
  • 使用
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

按需导入

自动按需引入

手动按需引入

  • 安装vant
  • 安装一个插件
  • 在babel.config.js中配置
  • 在main.js中按需加载
  • 使用

升级写法

把引入组件的步骤抽离到单独的js文件中(utils/vant-ui.js)

import { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

main.js中导入该文件即可

// 导入按需导入的配置文件
import '@/utils/vant-ui'

原文地址:https://blog.csdn.net/jkjkikik/article/details/140559969

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!