不安装按需加载的插件， 实现element ui 或者 vant按需引入

vue模板中的使用配置

<template>
 ......
 	//element ui select组件命名方法
    <el-select v-model="" placeholder="">
      <el-option
        v-for="item in arr"
        :key="item.w"
        :label="item.n"
        :value="item.w"
      >
      </el-option>
    </el-select>
    
    ......
    //vant Search组件使用方法
    <Search
       v-model=""
       show-action
       placeholder=""
       shape=""
       background="#FFFFFF"
       @search=""
       @cancel=""
     />
    ......
</template>

<script>
import Search from "vant/lib/search"; // vant组件引入方式
import "vant/lib/search/style"; // vant组件样式引入方式
import Select from "element-ui/lib/select"; // element 组件引入方式
import "element-ui/packages/theme-chalk/src/select.scss"; // element 组件样式引入方式
export default {
  components: {
    Search, // vant 组件注册方式
    [Select.name]: Select // element 组件引入方式
  }
};
</script>

element 还有两个公用样式需要全局引入

/*icon字体路径变量*/
$--font-path: "~element-ui/lib/theme-chalk/fonts";
/*按需引入用到的组件的scss文件和基础scss文件*/
@import "~element-ui/packages/theme-chalk/src/base.scss";

引入的组件路径，官网没有说，怎么查找？

如果你npm安装了element 或者 vant 你可以在 项目的node_modules 文件夹下根据以下路径查找确认：

vant  => "vant/lib/组件名"; // vant组件引入方式
vant  => "vant/lib/组件名/style"; // vant组件样式引入方式
element =>  "element-ui/lib/组件名"; // element 组件引入方式
element => "element-ui/packages/theme-chalk/src/组件名.scss"; // element 组件样式引入方式

如果没有安装 element 或者 vant 请先npm安装一下，再继续上面的方式

注意：

通常驼峰命名 的组件 DateTimePicker => date-time-picker （全部小写）；单个单词的组件：Upload => upload （全部小写）
vue components选项的组件注册的名称可以有多种形式，具体每个组件的内部结构，可以在其父组件的mouted生命周期钩子中（console.log）打印一下这个组件

element参考

element 部分组件批量全局注册

elementComponents.ts 内容

// elementComponents.js
// element 样式
import "element-ui/packages/theme-chalk/src/tooltip.scss";
import "element-ui/packages/theme-chalk/src/select.scss";
import "element-ui/packages/theme-chalk/src/option.scss";
import "element-ui/packages/theme-chalk/src/date-picker.scss";
// element 组件
// import Tooltip from "element-ui/lib/tooltip";
// import Select from "element-ui/lib/select";
// import Option from "element-ui/lib/option";
// import DatePicker from "element-ui/lib/date-picker";
import { Tooltip, Select, Option, DatePicker } from "element-ui";

// element 组件数组
const components = [Tooltip, Select, Option, DatePicker];
// 自定vue义注册方法 vm 默认指向调用它的对象， main.js中 vue.use(elementComponents); 所以vm指向Vue
export const elementComponents = {
  install: (vm: any) => {
    components.forEach(item => {
      vm.component(item.name, item);
    });
  }
};

common.scss

/*icon字体路径变量*/
$--font-path: "~element-ui/lib/theme-chalk/fonts";
/*按需引入用到的组件的scss文件和基础scss文件*/
@import "~element-ui/packages/theme-chalk/src/base.scss";

main.ts

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import "@/assets/css/common.scss"; // 引入公用样式
import { elementComponents } from "@/utils/static/elementComponents/index"; // 引入需要注册的element 组件
Vue.config.productionTip = false;
Vue.use(elementComponents); // 统一注册
const vue = new Vue({
  router,
  render: h => h(<any>App)
}).$mount("#app");

Vant 部分组件批量全局注册

needToVant.ts

// 引入需要的样式
import 'vant/lib/divider/style'
import 'vant/lib/image/style'
import 'vant/lib/field/style'
import 'vant/lib/rate/style'
import 'vant/lib/button/style'
import 'vant/lib/toast/style'
// 引入需要的组件
// import Divider from "vant/lib/divider";
// import VanImage from "vant/lib/image";
// import Field from "vant/lib/field";
// import Rate from "vant/lib/rate";
// import Button from "vant/lib/button";
// import Toast from "vant/lib/toast";
import { Toast, Button, Rate, Field, Image as VanImage, Divider } from 'vant'
// vant 组件数组
const components = [Divider, VanImage, Field, Rate, Button, Toast]
// 自定vue义注册方法 vm 默认指向调用它的对象， main.js中 vue.use(needToVant); 所以vm指向Vue
export default {
  install: (vm: any) => {
    components.forEach(item => {
      vm.component(item.name, item)
    })
  }
}

main.ts

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import needToVant from "@/utils/static/needToVant"; // 引入需要注册的Vant组件
Vue.config.productionTip = false;
Vue.use(needToVant); // 统一注册
const vue = new Vue({
  router,
  render: h => h(<any>App)
}).$mount("#app");