2020-09-04

Vue 项目中 引入某个文件夹下的多个 .vue组件 实现

方法一：

 import SelectItem from "@components/CrmComponents/SelectItem";
  import InputItem from "@components/CrmComponents/InputItem";
  import InputAreaItem from "@components/CrmComponents/InputAreaItem";
  import AddNumberItem from "@components/CrmComponents/AddNumberItem";
  import CheckRadioItem from "@components/CrmComponents/CheckRadioItem";
  import DatePickItem from "@components/CrmComponents/DatePickItem";
  import UploadItem from "@components/CrmComponents/UploadItem";
  import DateTimeItem from "@components/CrmComponents/DateTimeItem";
  import DateSecondItem from "@components/CrmComponents/DateSecondItem";
  import CheckBoxItem from "@components/CrmComponents/CheckBoxItem";
  import NewThreeLinkage from "@components/CrmComponents/NewThreeLinkage";
  import BaseInformCard from "@components/CrmComponents/BaseInformCard";

export default{
    name: "OfflinePartnerEdit",
    components: {
      BaseInformCard,
      NewThreeLinkage,
      CheckBoxItem,
      DateSecondItem,
      DateTimeItem,
      UploadItem,
      DatePickItem,
      CheckRadioItem,
      AddNumberItem,
      InputAreaItem,
      InputItem,
      SelectItem,
      MyTable,
      TableButton,
      ValidationObserver,
      AddEditContact,
      ContactList
    },
}

方法二：

import { ValidationObserver } from "vee-validate";
import { blankPage, pageLoading } from "@common/mixins";
const path = require('path');
  const files = require.context('@components/CrmComponents', false, /\.vue$/);  //这句话的意思是引入components下的所有vue文件，@需要在vue.config.js配置alias
  const modules = {};
  files.keys().forEach(key => {
    const name = path.basename(key, '.vue');
    modules[name] = files(key).default || files(key)
  });

components: {
      MyTable,
      TableButton,
      ValidationObserver,
      AddEditContact,
      ContactList,
      ...modules
    },

注意：
@components写法需要配置

image.png