vant和element-ui按需导入

说多了都是废话，首先说vant怎么按需导入

vant

首先安装一个插件

cnpm i babel-plugin-import -D

然后在根目录创建一个.babelrc文件

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }],
  ]
}

然后在组件如何使用呢？

比如我们想用Button

默认按钮

import { Button } from 'vant';

 components:{
    vanButton: Button
  },

想用Circle进度条

import { Circle } from 'vant';
export default {
  data() {
    return {
      currentRate: 0,
    };
  },
  components:{
  vanCircle:Circle
},
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%';
    },
  },
};

再说element-ui

首先安装一个插件

cnpm install babel-plugin-component -D

同样在根目录创建一个.babelrc文件

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在组件如何使用呢?

import {Switch} from 'element-ui'

 components:{
   elSwitch:Switch
 },
 data() {
  return {
  value1: true
};
},

如果我们想同时使用vant和element-ui

首先上面那两个插件全要下，然后在.babelrc里面全要写上

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }],
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后在组件里面使用是一样的套路