Shulou(Shulou.com)06/01 Report--

This article mainly introduces how vue uses requir.context to obtain project directory information. The introduction in the article is very detailed and has certain reference value. Interested friends must read it!

Use require.context to get project directory information

With respect to require.context, the webpack documentation says this:

You can pass three parameters to this function: a directory to search, a flag indicating whether to search its subdirectories as well, and a regular expression that matches files.

Webpack will parse requre.context() in the code in the build. This is helpful if you want to import all the files under a folder, or all the files that match a regular expression

According to this prompt, we can refer to all the files under a folder, so we can use the obtained file information to do some operations, such as when registering components, originally we need to import and register components one by one, and later want to add new ones, but also write them again, now we can optimize this code through require.context.

// import WmsTable from './ wms-table/table/index';import Table from './ table/index.vue';import CustomHooks from './ custom-hooks/custom-hooks-actions/index';import SFilter from './ s-filter/filter-form';import WButton from './ button/index';import CreateForm from './ createForm/create-form/CreateForm.vue';import Action from './ table/action-table-column.vue';import DetailItem from './ detail-item.vue';Vue.component('w-filter', SFilter);Vue.component('w-button', WButton);Vue.component('custom-hooks', CustomHooks);Vue.component('create-form', CreateForm);Vue.component('w-table', Table);Vue.component('w-table-action', Action);Vue.component('zonetime-date-picker', ZonetimeDatePicker);Vue.component('detail', DetailItem);

When registering global components, you don't need to import them one by one, and register them one by one. Using require.context can automatically import modules. The advantage of this is that when we create a new component, we don't have to register it by hand, but it will help us do it automatically at the beginning.

const contexts = require.context('./ ', true, /\. (vue|ts)$/);export default { install (vm) { contexts.keys().forEach(component => { const componentEntity = contexts(component).default; if (componentEntity.name) { vm.component(componentEntity.name, componentEntity); } }); }}; The above is "vue how to use requir.context to obtain project directory information" All the contents of this article, thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.