按需引入ui框架

在一个项目中，我们往往需要使用到ui框架，因此我们需要下载依赖，引入ui框架库，但是开发过程中，我们只需要使用到一部分组件，为了缩小打包后的文件大小，我们需要按需引入我们需要使用的组件

下载依赖 有多种下载方式 

npm i vant --save cnpm i vant --save

全局引入vant

在项目中的main.js中

import vant from 'vant' import 'vant/lib/index.css' Vue.use(vant)

页面使用vant组件

只需要直接使用即可

<van-swipe :autoplay="3000"> <van-swipe-item v-for="(item, index) in banner" :key="index"> <img :src="item.imgUrl" /> </van-swipe-item> </van-swipe>

按需引入

在src下新建一个vant文件夹，文件夹中新建一个index.js 引入所需要使用到的ui组件

import Vue from 'vue' import { DatetimePicker, Popup, Checkbox, CheckboxGroup, Switch, Button, NavBar, Uploader, Toast, RadioGroup, Radio, Area } from 'vant' Vue.use(Toast) Vue.use(Popup) Vue.use(Checkbox) Vue.use(DatetimePicker) Vue.use(CheckboxGroup) Vue.use(Switch) Vue.use(Button) Vue.use(NavBar) Vue.use(Uploader) Vue.use(RadioGroup) Vue.use(Radio) Vue.use(Area)

随即在main.js中引入我们创建的这个index.js，随即引入样式 ，这样我们按需引入就成功啦