Вы все еще импортируете высокочастотные компоненты? слишком низко

Vue.js
Вы все еще импортируете высокочастотные компоненты? слишком низко

Вы все еще представляете такие высокочастотные компоненты?

Используйте require.context для автоматизации проектирования переднего плана и быстрого применения его к проекту.

что такое require.context?

API веб-пакета, который получает определенный контекст, выполняя функцию require.context, в основном используется для автоматического импорта модулей.В фронтенд-проекте, если вы столкнулись с ситуацией, когда из папки импортируется много модулей, вы можете использовать это api, он будет перемещаться по указанным файлам в папке, а затем импортировать их автоматически, поэтому нет необходимости явно вызывать импорт каждый раз для импорта модуля.

Проанализируйте require.context

Функция require.context принимает три параметра.

  • directory {String} - путь для чтения файла из
  • useSubdirectories {Boolean} - Обходить ли подкаталоги файлов
  • regExp {RegExp} - регулярное выражение для соответствия файлу
语法: require.context(directory, useSubdirectories = false, regExp = /^.//);


在components下的index.js中require.context('./common', false, /\.vue$/);

Вы можете видеть, что выполнение метода keys() возвращает массив имен файлов совпадающих файлов.
我们注册组件是需要Vue.component(组件名,options) 
options是个对象
{
data:function(){},
template:'<button>点击计算点击次数</button>'
}

Описание changeStr делает первую букву строки заглавной (регистрация компонента обычно делает первую букву заглавной)// импортируем демо из '@/components/demo'
где пусть config = requireComponent(fileName) доставит вас

мы в main.js

Наконец, компонент глобальной инъекции завершен.

Эти компоненты доступны везде, их не нужно импортировать, и передача значений — это нормально.

// import Vue from "vue";
function changeStr(str) {
  //首字母大写
  return str.charAt(0).toUpperCase() + str.slice(1);
}
//找到上一级common目录下的.vue结尾的所有文件
const requireComponent = require.context("./common", false, /\.vue$/);

console.log(requireComponent.keys());
//["./child1.vue", "./child2.vue"]
const install = (Vue) => {
  requireComponent.keys().forEach((fileName) => {
    let config = requireComponent(fileName);
    let componentName = changeStr(
      fileName.replace(/^\.\//, "").replace(/\.\w+$/, "")
    );
    console.log(config);
    // console.log(componentName); //Child1   Child2
    Vue.component(componentName, config.default || config);
  });
};
export default {
  install,
};
Категории