vant-ui 组件内引用vant 和 按需引入

vant-ui 组件内引用vant

<template>
  <div class="view-content" style="postion: relative;">
    <div class="art-dior">
      <div class="img-box">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <template v-for="(arr, n) in list">
            <div :key="'line' + n" class="img-line">
              <div v-for="(item, i) in arr" :key="'line-img-' + n + i" class="img-wrap">
                <img v-if="item.fileUrl" :src="item.fileUrl" class="w100"/>
              </div>
            </div>
          </template>
        </van-pull-refresh>
      </div>
    </div>
    <van-loading class="my-loading" size="24px" vertical v-show="firstLoading">加载中...</van-loading>
  </div>
</template>
<script>
import 'vant/lib/loading/style';
import 'vant/lib/toast/style';
import 'vant/lib/pull-refresh/style';
import { PullRefresh, Toast, Loading } from 'vant';
import { mapGetters } from "vuex";
import baseHttp from '../api/baseHttpService'
export default {
  name: "me-dior",
  components: {
    [PullRefresh.name]: PullRefresh,
    [Loading.name]: Loading,
    [Toast.name]: Toast
  },
  data () {
    return {
      total: 0,
      list: [],
      isLoading: false,
      firstLoading: true
    }
  },
  computed: {
    ...mapGetters(["token"]),
  },
  created () {
    this.queryList()
  },
  methods: {
    onRefresh () {
      this.queryList()
    },
    queryList () {
      let success = (res) => {
        this.isLoading = false;
        if (this.firstLoading) {
          this.firstLoading = false
        }
        if (res && res.code === '000000') {
          this.total = (res.data && res.data.total) || 0
          if (res.data && Array.isArray(res.data.list)) {
            let list = res.data.list
            this.list = list
          } else {
            this.list = []
          }
        } else {
          Toast(res.info || '接口获取数据失败了~')
        }
      }
      // ajax
      baseHttp.getUserList({
        token: this.token || ''
      }).then(res => {
        console.log(res)
        success(res)
      })
      // mock test
      // setTimeout(() => {
      //   let res = {
      //     code: '000000',
      //     data: {
      //       total: 111
      //     }
      //   }
      //   res.data.list = [
      //     {fileUrl: '../../images/d_me_temp.jpg'},
      //     {fileUrl: '../../images/d_me_temp.jpg'}
      //   ]
      //   success(res)
      // }, 3000)
    }
  }
};
</script>
<style lang="less" scoped>
</style>

按需引入

// ui.js
/**
 * vant 按需引入 示例
 */
import Vue from 'vue';
/**
 * vant 按需引入 示例
 */
import {
  Button,
  Icon,
  Swipe,
  SwipeItem,
  PullRefresh,
  Toast,
  Loading,
  Popup,
  List
} from 'vant';
import 'vant/lib/index.css';

let install = (Vue) => {
  Vue.use(Button)
    .use(Icon)
    .use(Swipe)
    .use(SwipeItem)
    .use(PullRefresh)
    .use(Toast)
    .use(Loading)
    .use(Popup)
    .use(List)
}

export default { install };

// app.js
...
import UI from '@/utils/ui.js'
...
Vue.use(UI);
...