vue 3.0 項目搭建移動端 (七) 安裝Vant

# 通過 npm 安裝 

npm i vant -S

安裝完配置

babel.config.js

 

 

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    'lodash',
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
};

運行后報錯

 

 先安裝插件

# 安裝 babel-plugin-import 插件
npm i babel-plugin-import -D

再次運行，但是這里配置了‘lodash',如果去掉可以正常運行，如果不去掉，還要添加

npm i lodash -D

npm i babel-plugin-lodash -D

然后再運行 OK

<template>
  <van-tabbar v-model="active" style="z-index: 1999">
    <van-tabbar-item v-for="(tab, index) in tabbar" :dot="tab.dot" :info="tab.info" :key="index">
      <span>{{tab.name}}</span>
      <div slot="icon">
        <p class="icon-box">
          圖
        </p>
      </div>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from "vant";
export default {
  data() {
    return {
      active: 0,
      tabbar: [
        {
          name: "首頁",
          path: "/",
          pathName: "home",
          dot: false,
          info: "",
          code: "4"
        },
        {
          name: "其它",
          path: "/",
          pathName: "home",
          dot: false,
          info: "",
          code: "4"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {},
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  }
};
</script>
<style lang="scss" scoped>
.van-tabbar-item__icon {
  .icon-box {
    width: 24px;
    height: 24px;
    img {
      max-width: 100%;
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }
  }
}
</style>