按需引入ui框架

按需引入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，随即引入样式 ，这样我们按需引入就成功啦